OctoBlog 以 GitHub 为蓝本的个人博客系统
全部文章

你好,世界:把这个博客重写了一遍

为什么又折腾

我的上一版博客是一个现成主题,装了三年,改动全靠「在 CSS 末尾追加 !important」。终于有一天我发现,我想调整一下文章列表的行高,需要改 6 个文件、覆盖 20 多条规则。

于是我决定推倒重来。但这次不是换一个主题,而是写一套自己的生成器。

选择 GitHub 风格,理由很朴素:

  1. 我每天有 6 个小时在 GitHub 上,它长什么样我最熟悉;
  2. 它的信息密度高,适合「浏览」而不是「欣赏」;
  3. 深浅色两套配色的对比度都是经过打磨的,直接借鉴不会出错。

顺便说一句:GitHub 的设计系统 Primer 是公开的,色值、间距、圆角都有文档。模仿一个成熟系统,比自己拍脑袋配色靠谱得多。

这一版有什么

  • 写作:只写 Markdown,content/posts/ 里丢一个 .md 文件就完事
  • 热力图:首页那张绿色小方块,记录每天的写作/提交
  • 命令面板:按 Ctrl / ⌘ + K 就能搜文章,和 GitHub 上那个手感一样
  • 深浅色:跟随系统,也可以手动切,选择会记住

一次写作到发布的完整流程

BASH
# 1. 新建一篇文章
$ touch content/posts/my-new-idea.md

# 2. 本地预览(改动自动重建)
$ npm run dev
   ➜  本地预览: http://localhost:4173/

# 3. 发布
$ npm run build && rsync -av dist/ server:/var/www/blog/

整个构建过程不需要联网,也不依赖任何第三方包——marked 的 ESM 版本直接放在 vendor/ 里跟着仓库走。

接下来想做的

  • 文章内的图片自动压缩
  • 按标签生成独立的 RSS
  • 一个「随机跳一篇」按钮

先发布,再迭代。这是我在这个项目上学到的最重要的一件事——不要等到"做完"才上线。