这篇文章不准备堆一串听起来很厉害的技术名词，而是想说明一件更实际的事：当你打开「在流放地」时，浏览器里看到的页面究竟从哪里来；我在网页编辑器里保存一篇文章后，它又是怎样出现在网站上的。

先给出结论：这是一个静态生成的个人博客。它的主体是前端页面，目前没有传统意义上的网站业务后端。文章保存在 GitHub 仓库中，由 Hexo 提前生成网页，再通过 GitHub Pages 免费发布。

先分清网站的几个部分

刚接触网站开发时，最容易把“网站”“服务器”“前端”“后端”混成一个概念。实际上，它们承担的工作不同。

部分 可以把它理解成 本站对应的技术
内容 文章的原稿 Markdown 文件
生成器 把原稿排版成网页的机器 Hexo
主题 网页的外观模板 Reimu
前端 最终在浏览器里运行的页面 HTML、CSS、JavaScript、SVG
仓库 保存代码和文章，并记录修改历史 Git、GitHub
自动构建 每次修改后自动重新生成网站 GitHub Actions
静态托管 把生成好的网页发送给访客 GitHub Pages
网页编辑器 不碰代码也能写文章的管理界面 Pages CMS
留言后端 接收、保存和管理访客留言 Twikoo，正在接入
留言数据库 真正存放留言数据的地方 MongoDB，正在接入

下面逐项解释。

这是静态网站，不是传统动态网站

“静态”不代表页面不能动，也不代表网站只能放几行文字。

静态网站的意思是：访客打开页面之前，HTML 文件已经生成好了。访客访问首页时，GitHub Pages 直接把现成的 HTML、CSS、图片和 JavaScript 文件发给浏览器，不需要服务器临时查询数据库，再拼出一张页面。

这和常见论坛、购物网站的工作方式不同。论坛通常要在每次访问时判断登录状态、读取帖子和回复、检查权限，因此需要持续运行的后端程序和数据库。本站的文章数量不多，绝大多数内容对所有人公开，用静态方案更简单、更便宜，也更容易长期保存。

不过，静态页面仍然可以有动画。现在首页的菜单、加载效果、移动的小行星带和缓慢穿过页面的星尘，都是浏览器执行 CSS 后产生的前端效果。这些动画不需要服务器参与。

前端：访客真正看到的东西

前端主要由三类技术组成：

  • HTML 决定页面里有什么，例如标题、文章、导航和图片。
  • CSS 决定这些内容长什么样，例如颜色、宽度、位置、暗色模式和动画。
  • JavaScript 负责需要程序逻辑的交互，例如搜索、菜单切换和评论组件。

本站还使用了 SVG。SVG 是一种用代码描述的矢量图片，菜单图标、鼠标样式和一部分装饰都可以用它制作。与普通 PNG 相比，SVG 放大后不会变糊，而且颜色和形状比较容易修改。

浏览器最终只认识这些前端资源。Hexo、Markdown 和 Pages CMS 都是为了更方便地生产这些资源，访客并不会直接运行它们。

Hexo：把文章变成网页的静态网站生成器

Hexo 属于静态网站生成器，不是网站后端，也不是用来画页面的设计软件。

我们把文章写成 Markdown 文件，Hexo 会读取文章顶部的标题、日期、分类、标签等信息，再把正文交给主题模板。最后，它会生成完整的首页、文章页、归档页、分类页和搜索数据。

当前项目使用 Hexo 8.1.2。常用命令只有几个：

1
2
3
npm.cmd run dev
npm.cmd run clean
npm.cmd run build

dev 用于在本地预览；clean 删除上一次生成的临时结果；build 重新生成整站网页。

Reimu：网站的主题和页面骨架

Reimu 是一个 Hexo 主题。主题提供导航栏、首页文章卡片、侧栏、归档页、暗色模式、搜索和评论区位置等现成结构。

它有点像装修好的房屋模板：房间和水电已经存在，我们主要更换配色、图片、图标和装饰。本站目前使用 Reimu 1.12.5，并在它的基础上做了这些修改：

  • 将默认红色强调色改为暗蓝色；
  • 使用自己的首页横幅；
  • 替换菜单图标和鼠标指针；
  • 增加小行星带和星尘动画；
  • 增加关于、友链和留言页面。

主题本身安装在 node_modules 中。我们尽量不直接修改主题源码，而是通过 _config.reimu.yml 和自定义 CSS 覆盖样式。这样以后升级主题时，不容易把自己的修改全部冲掉。

Markdown：文章真正保存的格式

文章保存在 source/_posts 文件夹中，每篇文章就是一个 .md 文件。

Markdown 是一种简化的纯文本格式。例如：

1
2
3
4
5
6
## 一个二级标题

这是正文，**这里是粗体**。

- 第一项
- 第二项

文件顶部还有一段 Front Matter，用于保存标题、日期、标签和封面：

1
2
3
4
5
6
---
title: 示例文章
date: 2026-07-08 12:00:00
tags:
  - 建站
---

它的优点是内容不依赖某个在线平台。即使以后不再租域名、不再部署网站，Markdown 文件仍然是普通文本，可以备份、迁移，也可以几年后重新生成网站。

Node.js 和 npm：本地的构建环境

Hexo 是用 JavaScript 编写的工具，所以开发电脑上需要 Node.js。

Node.js 在这里不是网站的线上后端。它只是在本地电脑和 GitHub Actions 中运行 Hexo。npm 则负责安装和记录 Hexo、主题及其他插件的版本。

项目里的 package.json 像一张依赖清单，package-lock.json 则把具体版本记录得更精确。换一台电脑后，只要有这些文件，运行 npm install 就能重新安装环境。

Git 和 GitHub：版本记录与远程备份

Git 是版本管理工具。每次提交都像给项目拍一张带说明的快照，可以查看什么时候改了什么，也能在出现问题时找到以前的版本。

GitHub 是存放 Git 仓库的在线平台。本站代码位于 Hard-to-tell/personal-website 仓库。

因此，现在网站至少有两份：

  1. 电脑里的本地项目；
  2. GitHub 上的远程仓库。

真正重要的不是某一次部署出来的网页，而是仓库中的源码、文章和图片。只要仓库还在，网站就能重新构建。

GitHub Actions：自动构建流水线

GitHub Actions 属于持续集成和自动部署工具，常缩写为 CI/CD。

每次有新提交进入 main 分支，它会自动完成以下工作：

  1. 读取仓库代码；
  2. 安装 Node.js 和 npm 依赖；
  3. 运行 Hexo；
  4. 生成静态网页；
  5. 把结果交给 GitHub Pages。

以前这套流程需要手动在电脑上执行并上传文件。现在只要文章被提交到 GitHub，后面的构建和发布会自动进行。

GitHub Pages：负责把网页送给访客

GitHub Pages 是静态网站托管服务。

它不运行我们的留言数据库，也不负责写文章。它只保存 Hexo 生成的网页文件，并在有人访问时把文件传给浏览器。

当前网站地址是：

https://hard-to-tell.github.io/personal-website/

以后购买独立域名后，可以把域名指向这里。更换域名不会改变文章和项目结构。

Pages CMS：网页上的文章编辑器

直接修改 Markdown 很可靠，但日常写作不够方便。Pages CMS 的作用，就是在 GitHub 仓库上面增加一个更友好的编辑界面。

它属于无头内容管理系统。这里的“无头”可以简单理解为：它只管理内容，不接管网站外观。网站长什么样仍由 Hexo 和 Reimu 决定。

Pages CMS 得到指定仓库的授权后，可以读取和修改文章文件。点击保存时，它并不是把文章存入自己的数据库，而是向 GitHub 创建一次提交。之后 GitHub Actions 自动运行，新文章就会出现在网站上。

完整流程是：

1
2
3
4
5
6
7
8
9
10
11
在 Pages CMS 写文章
        ↓
保存为 GitHub 中的 Markdown 文件
        ↓
GitHub Actions 自动运行 Hexo
        ↓
生成 HTML、CSS 和 JavaScript
        ↓
GitHub Pages 发布
        ↓
访客在浏览器中看到新文章

这也是为什么我们只把 Pages CMS 授权给 personal-website 仓库，而不必授权整个 GitHub 账号。

留言板为什么需要后端

文章可以提前生成，但访客留言是无法提前知道的。

当访客提交留言时，需要有一个持续在线的程序接收内容、检查格式、写入数据库，并在打开留言页时把历史留言读取出来。这部分就是后端。

本站准备使用 Twikoo。它会负责：

  • 接收昵称、邮箱和留言正文；
  • 读取并展示历史留言；
  • 提供回复和管理功能；
  • 在需要时进行垃圾留言过滤。

留言数据准备保存在 MongoDB 中，Twikoo 后端则托管在 Netlify。GitHub Pages 继续负责网站主体，Twikoo 只负责评论和留言。这样不用为了一个留言板重写整个网站。

邮箱不会直接显示在网页上，但留言系统仍需要妥善保护数据库连接信息。因此密码和连接字符串不会写进公开仓库，而是保存在托管平台的环境变量中。

这个方案的优点和限制

优点：

  • 主站可以免费托管；
  • 页面生成后结构简单，维护成本低；
  • 文章是普通文件，容易备份和迁移；
  • 不运营时可以停止服务，源码仍然保留；
  • 以后恢复时重新部署即可。

限制：

  • 每次保存文章后需要等待几十秒重新构建；
  • 复杂登录、私信和论坛功能不适合纯静态网站；
  • GitHub Pages 在中国大陆的访问速度不一定稳定；
  • 留言板仍然需要单独的后端和数据库。

最后用一句话总结

「在流放地」的主体是一套用 Markdown 管理内容、由 Hexo 生成前端、通过 GitHub 自动构建并由 GitHub Pages 托管的静态个人网站；Pages CMS 提供网页写作界面，Twikoo 和 MongoDB 则负责静态网站无法独立完成的访客留言。

这套结构没有追求复杂，而是优先保证便宜、容易保存、可以逐步增加功能，也能在停止运营后随时重新启动。

说些什么吧！

twikoo