开发

上线大吉!全新个站《可可托海没有海》正式发布

支持自动切换黑暗模式,响应式设计,RSS订阅

2022年10月9日
上线大吉!全新个站《可可托海没有海》正式发布
本文共有1137字,预计阅读时间5分钟
经过半个月的设计与开发,本人个站《可可托海没有海-darmau.design》已正式上线啦!
之前我有个博客,叫《城中村群租房-darmau.com》,现在还能在一些网页中找到蛛丝马迹。那是用Ghost在阿里云ECS上搭建的一个小网站,主题是我购买后稍加修改的,图片存在阿里云OSS。后来因为费用太高——我也不知道我一个小破站搞什么动静分离和CDN——被我关闭了。
更主要的原因还是Ghost只有文章一种数据类型,而我想展示更多的类型,比如视频、摄影。但当时我并没有能力定制开发一个网站,再花钱维护一个不能满足我需求的网站有点不划算。所以期间的输出也只在公众号这个曾经被我喷的平台上发布。
今年我终于下定决心自己开发一个博客了。九月下旬到十一假期,我基本每天都在熬夜,最后终于将网站打磨完,基础功能都具备,样式虽然有可优化空间但也还看的过去。​

为什么要改名

因为我已经不在深圳了,再叫城中村就名不副实。这个名字其实是这么来的:
  1. 我有一个网名叫李大毛,含义就是没有任何含义。最初是在网红大咕咕咕鸡那看到的,李大毛是他段子里一个经常出现的角色,很像那种突然被问到,我却不想告知真名时胡诌的名字。在毫无准备的情况下被问到姓,比如在理发店的时候,我下意识会说自己姓李……所以就用了李大毛这个名字。
  2. 但很多地方李大毛已经被注册了,本来想加没有毛,但像是秃了。所以就加上了“没有猫”,我其实并没有很喜欢猫。
  3. 新名字本来想跟成都有关,想了几个都不喜欢,干脆回到出生地,从新疆找找灵感。于是就有了这么一对结构一样的名字。
原先的域名darmau.com已经被收回了。我现在对.com域名也没有执念,就选了个.design

技术架构​

后台和CMS我用了Srapi,这种Headless CMS和Wordpress这类CMS的区别在于,Headless CMS只提供数据和内容接口,样式需要你来写。很适合我这种需要多个数据类型的场景。
前端我采用Gatsby开发。当GitHub指定项目发生变动或Strapi新发布了数据,Gatsby Cloud会触发构建流程,从Strapi拿到数据生成静态页面。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/website_structure_6cd866c8b8.jpeg

strapi和gatsby项目都可以在我github上看到。后续我会把网站开发经过写成教程,包括数据库设置、strapi部署、Nginx配置、Gatsby页面和组件开发、CSS设计。网站完全是按我需求设计的,所以直接拿来用很可能不适合你。
所有页面均完美支持手机到平板到电脑不同宽度的浏览,支持跟随系统设置自动切换明亮/黑暗主题,Accessibility表现优秀。
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/responsive_368472a394.jpeg
https://darmau-image-1256887306.cos.ap-hongkong.myqcloud.com/dark_mode_788c6ab51c.jpg

网站构成

目前结构很简单,就是文章、摄影、视频三个模块。
视频支持不同视频源切换(如果有的话)。
未来可能会有更多数据类型,比如“作品”。
前端代码可在darmau-gatsby看到。不过这个设计严重依赖于Strapi的数据结构,所以没什么通用性。可以参考。

近期开发计划:今年

有的已经在开发中了。
  • 关于本站
  • 小程序
  • 内容置顶
  • 大图全屏预览
  • 上一篇/下一篇
  • 移动端可以展开收起的目录

远期开发计划:明年

大部分功能通过静态网站不太好实现,所以很可能将来会变成动态网站。目前考虑使用Next搭建。也欢迎提供建议。
  • 完全定制的评论系统
  • 摄影图片支持显示Exif信息
  • 摄影增加显示拍摄位置的地图
Continue
另外本站支持RSS订阅:https://darmau.design/rss.xml
有任何反馈请在评论区留言。没梯子看不到的可以去公众号评论。

评论