开发

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

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

经过半个月的设计与开发,我的新网站《可可托海没有海-darmau.design》上线了。我以前的博客因费用和功能限制关闭。今年我决定自己开发一个博客,用Strapi和Gatsby构建,支持多种内容类型和设备自适应。后续我会分享开发教程,欢迎留言反馈。

  1. #网站上线
  2. #个人博客
  3. #Ghost
  4. #Strapi
  5. #Gatsby
  6. #摄影
  7. #视频
  8. #数据类型

454

A mountain with a mountain range is depicted within a brown circle, surrounded by a white background. The text "2016" is written in a brown font, and the number "12" is written in a lighter brown font.A mountain with a mountain range is depicted within a brown circle, surrounded by a white background. The text "2016" is written in a brown font, and the number "12" is written in a lighter brown font.

经过半个月的设计与开发,本人个站《可可托海没有海-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拿到数据生成静态页面。

A diagram with a light blue background, labeled with various symbols and colors, illustrating a complex network of symbols and colors.A diagram with a light blue background, labeled with various symbols and colors, illustrating a complex network of symbols and colors.

strapi和gatsby项目都可以在我github上看到。后续我会把网站开发经过写成教程,包括数据库设置、strapi部署、Nginx配置、Gatsby页面和组件开发、CSS设计。网站完全是按我需求设计的,所以直接拿来用很可能不适合你。

所有页面均完美支持手机到平板到电脑不同宽度的浏览,支持跟随系统设置自动切换明亮/黑暗主题,Accessibility表现优秀。

A screenshot of a website's homepage, with a white background and a black header, featuring a list of images and a search bar. The images include a cityscape, a mountain range, and a landscape. The search bar is located in the top right corner. The website appears to be a news website with a search bar.A screenshot of a website's homepage, with a white background and a black header, featuring a list of images and a search bar. The images include a cityscape, a mountain range, and a landscape. The search bar is located in the top right corner. The website appears to be a news website with a search bar.
A website with a large image of a temple in China, a smaller image of the temple in Mexico, and a search bar on the left side.A website with a large image of a temple in China, a smaller image of the temple in Mexico, and a search bar on the left side.

网站构成

目前结构很简单,就是文章、摄影、视频三个模块。

视频支持不同视频源切换(如果有的话)。

未来可能会有更多数据类型,比如“作品”。

前端代码可在darmau-gatsby看到。不过这个设计严重依赖于Strapi的数据结构,所以没什么通用性。可以参考。

近期开发计划:今年

有的已经在开发中了。

  • 关于本站

  • 小程序

  • 内容置顶

  • 大图全屏预览

  • 上一篇/下一篇

  • 移动端可以展开收起的目录

远期开发计划:明年

大部分功能通过静态网站不太好实现,所以很可能将来会变成动态网站。目前考虑使用Next搭建。也欢迎提供建议。

  • 完全定制的评论系统

  • 摄影图片支持显示Exif信息

  • 摄影增加显示拍摄位置的地图

另外本站支持RSS订阅:https://darmau.design/rss.xml

有任何反馈请在评论区留言。没梯子看不到的可以去公众号评论。