Morio 第一天：从 Astro 模板到能用的博客

把 Morio 从零搭起来了。一天。记一下整个过程，免得以后自己都忘了当时为什么这么选。

起点

没从空白仓库开始。直接用了 Astro 官方那个博客模板 (houston[bot] 帮我 Initial commit)，省掉了自己布局搭骨架的时间。

模板里的内容全是英文 + 占位文（first-post / second-post / third-post / using-mdx / markdown-style-guide），那是给 Astro 自己做 demo 用的，全部都得换掉或者删掉，不能留在生产站点里。

留下来的：

  • 路由结构（pages/blog/[...slug].astro、pages/index.astro、pages/rss.xml.js）
  • 内容集合的 schema（src/content.config.ts）
  • MDX 和 sitemap 集成
  • 字体加载逻辑（Atkinson，本地 woff）
  • 几篇文章用的 placeholder 图（占位就好，先不上正式 hero）

汉化 + 站点元信息

把模板里那套英语 SITE_TITLE / SITE_DESCRIPTION / SITE_AUTHOR 全部改了。src/consts.ts 现在长这样：

export const SITE_TITLE = 'Morio';
export const SITE_DESCRIPTION = '记录一些想法、过程、和发现。';
export const SITE_AUTHOR = 'Morio';
export const SITE_LANG = 'zh-CN';

src/layouts/BlogPost.astro 里的 <html lang> 跟着改了。

src/pages/about.astro 也重写了，从模板里「About this template」改成了真正介绍这个博客是干嘛的。

删了三篇 demo post (second-post / third-post / markdown-style-guide / using-mdx)，重命名了两篇：

  • markdown-style-guide.md → demo-markdown.md（保留作排版参考）
  • using-mdx.mdx → demo-mdx.mdx（同上）

留下一篇 first-post.md 作为真正的开篇 ——「你好，Morio」。

评论：接 Giscus

不想自己后端。Giscus 是 GitHub Discussions 驱动的评论系统，读者用 GitHub 登录发言，每篇文章自动对应一条 Discussion。完全静态部署就能用。

写了 src/components/Comment.astro：

  • 看 consts.ts 里的 GISCUS.enabled
  • enabled 但 4 个 ID 任一为空 → 显示「未启用」提示，不挂 iframe（fail-safe）
  • enabled 且 ID 齐全 → 注入 <script> 拉 giscus client

BlogPost.astro 底部加了一行 <Comment />，所有文章自动有评论。

ID 本身（repo / repoId / category / categoryId）写在 src/consts.ts，不写进环境变量。Astro build 的时候 inline 进 HTML，没有 secret 泄漏风险，但也不算“secret”所以就放在源码里。

最后一步是把 4 个 ID 真填进去 —— 单独的 commit：enable Giscus comments with morio-comments repo，纯改 consts.ts。

主题：森绿 + 深林夜底

配色不想用蓝紫那种 SaaS 默认色。选了个偏森林的绿（#5a8c5f），深色模式底色偏深墨绿（不是纯黑，看着不那么死）。

所有颜色都在 src/styles/global.css 里走 CSS 变量：

:root {
  --accent: #5a8c5f;
  --bg: #fbfaf7;
  /* … */
}
:root[data-theme='dark'] {
  --accent: #7ab07f;
  --bg: #0f1612;
  /* … */
}

「改颜色改变量，别直接改十六进制」是这次定下来的规矩，下一个写组件的人就不用每次都 grep 一遍十六进制了。

切换按钮在 Header.astro 右上角第一个图标。逻辑：

  1. 默认跟系统 prefers-color-scheme
  2. 用户点过的话写 localStorage.theme
  3. 切完之后发 themechange 事件，Giscus iframe 监听这个事件同步主题 —— 不用手动改 data-theme

data-theme 属性千万别手动赋值（容易写出竞态），全部走点击事件。

部署

没上 CI，没装 GH Actions。Cloudflare Pages 接 GitHub，main 一 push 就自动 build & deploy。astro.config.mjs 里 site: 'https://morio.pages.dev'。

git push origin main

完事。零成本，dist 是纯静态。

这一轮 commit 长这样

e9bbdab  Initial commit from Astro          # houston[bot] 拉模板
7ca23c2  personalize for morio              # 汉化、占位改、AGENTS.md
f5c0c32  add Giscus comments via Comment    # 接评论组件
151af08  add 森绿 forest-green + dark mode   # 主题 + 切换
c727f34  enable Giscus with morio-comments   # 把真 ID 填进去

五个 commit 把第一版搭起来了。

没做的事

  • 没接 GH Actions 做 link check / lighthouse bot —— 博客不大，不必要。
  • 没上 CDN 图片优化 —— placeholder 都不大，等真有正式 hero 图再说。
  • 没写第二篇文章 —— 等的就是这一篇。

下一个要做的事：把 README 那段部署说明补全（已经写了一版，Cloudflare Pages 控制台那边的截图还没加），然后开始写真正的笔记。

💬 留言

留言使用 Giscus， 通过 GitHub Discussions 驱动。需 GitHub 账号，无需注册。