跳至正文
这个博客

这个博客

AI 参与说明:Codex 于 2026-09-07 协助核对当前站点实现、补充 Astro 架构和发布流程,并更新技术时间线;早期个人经历保留原文。

这是一篇后记,大约写于 2015 年,但适合作为本站的第一篇来了解一下,而 2012 年是本站注册域名和我开始上大学的时间点。本文持续补充后续变化,当前方案见下文,早期记录保留当时的背景。

timeline
    2012 : WordPress
         : VPS
    2013 : Jekyll
         : Github Pages
    2014 : Coding.net
    2015 : Hexo
         : Coding.net
    2016 : Ghost
         : VPS
    2019 : Hugo
         : Typora
         : Github Pages
    2022 : Hugo
         : Obsidian
         : Github Pages
    2026 : Astro + astro-book
         : Obsidian + Codex
         : Cloudflare Workers Static Assets

当前方案:Astro + astro-book + Cloudflare

2026 年 9 月 7 日,本站从 Hugo 迁移到 Astro,并将生产站切换到 Cloudflare Workers Static Assets。站点项目现在统一叫 tcitry-blog;GitHub 仓库 仍保留原来的地址,它是源码仓库,不再承担 GitHub Pages 托管。

博客继续以文章和知识目录为主体,同时加入可操作的前端组件与研究演示。正文在构建时生成静态 HTML,浏览器在需要交互的地方加载组件脚本。这与 Astro 的 Islands architecture 相配合:文章阅读与组件交互可以分别维护,无需为整个博客建立常驻应用后端。

内容、站点和主题

部分当前职责
Blog 内容仓库在 Obsidian 中维护 Markdown、文章、知识文档和周刊,用 Git 保存内容历史。构建只读取允许公开的内容。
tcitry-blog 站点工程使用 Astro 生成页面,维护旧 URL、分类标签、RSS、sitemap,以及 Timeline、Weekly、Portfolio、Links 等本站栏目。
独立的 astro-book 主题维护通用阅读布局、导航、右侧目录、Markdown/MDX 渲染、KaTeX、Mermaid、Pagefind 和 Giscus 组件,站点通过 @tcitry/astro-book 的公开接口使用。
交互组件本站按需使用 React、HeroUI / HeroUI Pro 与 Svelte;演示组件和页面保存在站点工程中,通用主题不依赖商业组件。
生产托管将静态产物部署到一个 Cloudflare Worker tcitry-blog,由 Workers Static Assets 提供页面和资源。
flowchart TD
    content["Blog:Obsidian / Markdown / Git"] -->|"BLOG_DIR 只读导入公开内容"| site["tcitry-blog:Astro 构建"]
    theme["astro-book:通用主题"] --> site
    demos["本站交互组件与演示"] --> site
    site --> output["dist:静态页面、资源与 Pagefind 索引"]
    output --> review["本地预览、review 与验证"]
    review -->|"生产构建与验收后手动发布"| cloudflare["Cloudflare Workers Static Assets"]
    cloudflare --> readers["yindongliang.com"]

主题沿用 Book 的阅读布局,样式由 Tailwind CSS v4 与必要的 CSS Modules 维护。搜索由主题在静态构建后生成 Pagefind 索引,目前覆盖 Docs、Posts 和 Weekly 的正文。astro-book 默认使用 Astro 自带的 Shiki 在构建时高亮代码,配合小型独立复制功能;本站通过主题的关闭与替换接口接入 HeroUI Pro CodeBlock,先输出可读的静态代码,接近视口后再加载高亮与复制功能。

Labs 目前以 HeroUI Pro 组件展示为主,保留右侧目录,后续还会加入 Vue、Svelte 等前端测试组件。Blog 的普通 Markdown 仍走内容导入流程;需要导入交互组件的 MDX 页面放在站点工程中编译。

写作与发布

写作仍从 Markdown 开始。站点通过 BLOG_DIR 指向内容仓库,生成文件写入站点工程;内容与主题的升级可以各自管理。公开主题来源固定到 Git 提交,首次检出站点先运行 npm run setup 准备主题包和锁定依赖。

在已安装依赖的站点目录中,本地验收入口是:

sh
BLOG_DIR=/path/to/Blog npm run build
npm run check
npm test
npm run verify
npm run preview -- --port 4321

普通 build 生成带 noindex 的本地预览产物,搜索也需完整构建后预览。正式发布先运行 build:production 和 verify:production,确认后使用 Wrangler 将已验收的 dist/ 发布到生产 Worker;也可以用 deploy:production 重新构建、验证并发布。完整步骤维护在站点的构建与发布文档。

当前生产及默认分支是 main,采用本地 review 后手动发布。站点、Blog 或主题仓库的推送都不会自动发布博客;Workers Builds 和内容 Deploy Hook 尚未接通。旧 Hugo Pages 工作流已停用,hugo-book 与旧 master 分支保留历史,astro 分支保留迁移过程。

地址与评论兼容

这次迁移保留主域名、旧文章 URL、分类标签和已有订阅入口。Giscus 继续使用 pathname 映射,评论位于独立内容页的前后篇导航之后,分区与分类索引页不启用评论。技术框架更换本身不会要求读者重新寻找文章或讨论。

www.yindongliang.com 由 Cloudflare Redirect Rule 以 301 跳转到主域,保留原路径和查询参数。迁移时使用的远端预览环境已经停用,日常在本地预览。

早期记录:从 WordPress 到 Hugo

我对做一个自己的博客的过程是可以说非常的折腾,技术架构上有过很多的版本,本文专门来总结一下。

记得最早是在大一(2012 年)的时候,先是经常看 CSDN 和博客园的博客,自己也在上面写了一些学习笔记,后来看到 酷壳 写的非常好,接着就发现了 Wordpress,然后在寒假赶在开学前一个星期做出了一个和酷壳一样的 Wordpress 博客,随便买了个虚拟主机,并且用我的名字注册了域名,那个时候感觉 VPS 还是很贵很高大上的东西。

搭建博客这个东西,开始一发不可收拾。大二时 Github 已经非常流行,不可避免的,发现了 Github Pages 这个东西,同时也是经常看 王垠的博客,于是开始了用 Jekyll 来生成静态博客,然后提交到我的 tcitry/tcitry.github.io 项目中,也是这一段时间学会了用 Git 这个会使幸福感提升 N 倍的代码管理工具。

然后呢,大三上学期的时候,在我忍受 Github 龟速的同时,国内的 Git 社区已经比较成熟了,有非常多的组织和公司推出了 Git 服务,但很少能有像 Github 这样各方面都很贴心和高大上的,直到我从 Oschina、CSDN、Gitcafe、Gitshell 等众多社区中逐渐注意到 Coding 这个工具,Coding 从 UI 到功能做的都非常全面,另一方面在教育网和移动网的访问速度非常快,还有演示功能,相当于一个 App Engine 了。以前我在 Github 提交代码的时候光等 git push 完事就要好久,现在在 Coding 绝对是秒秒钟的事,心情顺畅了很多,现在我一些私有的项目就都托管在Coding 了。

又说回来,我在大三寒假发现了一个新的静态网页生成器 Hexo,是台湾一个大学生用 Node.Js 写的,试用了以后果断放弃了 Jekyll,投入 Hexo 怀抱,用 Hexo 感觉很酷的样子,每次在本地用 Markdown 编辑器写完博客,hexo g、hexo d直接就部署在 Coding 了,还备份了文件,感觉以后终于可以不再折腾了。可是,好景不长,因为我遇见了 Ghost(也是 Node.Js 系)。

想了下,觉得终究是我在做博客的时候总是想追求完美,不想停下来,而且花费了大量的时间。

为什么选择 Ghost 呢,它一需要自己部署,二需要花钱养着 VPS,三还得经常备个份。我觉得,Ghost 可以让我专注博客,而不是在模板,样式上花费太多的时间,顶多就是部署程序的时候稍微费点心,备份文件也需要点工夫,仅此而已,可以接受,话说我还是挺喜欢在自己的服务器上折腾 Linux 的东西,另外我在 Github Pack 上面拿到了 Digitalocean 的 $100 和 Namecheap 的一年 SSL 证书,可以用一段时间了。可是这样说着说着好像自己又绕了回来,怎么和 Wordpress 有点像呢,都是自己搭建服务器。。

当时的博客架构是 Ghost,服务器是部署在 Digitalocean 的纽约服务器(我不会说 DO 纽约的服务器比旧金山不知稳定多少,亲身体验),环境是 Ubuntu14.04+Nginx+MySQL,图片等静态资源存储在七牛云,域名和 SSL 证书是从 Namecheap 购得,至于这个 HTTPS,除了逼格高之外,对避免被墙也应该有一定作用。

后记:后来我又发现了 hugo,重新回到了 GitHub Pages,具体实现参考 使用 Typora 来编辑你的 Hugo 博客。

本文共 2208 字,上次修改于 Sep 7, 2026,以 CC 署名-非商业性使用-禁止演绎 4.0 国际 协议进行许可。

评论

博客助手

正在打开博客助手…