小站复活记：从 404 到焕然一新

前言

这个故事始于一个域名过期后"死掉"的个人小站。它曾经是用 Hugo 搭建、托管在 GitHub Pages 上的小站， 旧域名过期一年多没人管，小站变成了 521 和 404 的混合体。

直到某个晚上，我决定把它救回来。新域名已经买好， 但真正动手之后才发现——坑比想象的多。

第一章：连上都不去

最初用浏览器打开旧域名，显示的是 Cloudflare 的 521 错误。这个错误其实很直白： Cloudflare 连不上源服务器（GitHub Pages）了。

去 GitHub 一看，仓库还在，代码也在，但 GitHub Pages 默认地址返回的是 "Site not found"。 这意味着 GitHub Pages 根本没有在服务。

GitHub Pages 已禁用？

调查后发现，Settings → Pages 页面显示了一行字：

GitHub Pages is currently disabled. Select a source below to enable GitHub Pages for this repository.

为什么会自动禁用？推测是这样的链路：

1. 仓库之前配置了自定义域名（旧域名）
2. GitHub 自动为这个域名签发了 Let's Encrypt SSL 证书
3. 域名过期后，GitHub 反复验证时发现域名无法访问
4. 触发安全机制 → 自动停用 Pages 服务

解决方案很简单——在 Pages 设置中选择 master / (root) 作为源，保存即可。

第二章：域名与 Cloudflare 的博弈

域名解析好了，但访问新域名还是报 SSL 错误。一看证书， 签发的是 *.github.io，根本不是我的域名。

这时踩了一个典型的坑：Cloudflare 默认开启橙色云（代理模式）。 但对于 GitHub Pages，必须关闭橙色云（设为灰色 DNS only），否则：

• Cloudflare 会代理流量，GitHub 看到的是 Cloudflare 的 IP
• Let's Encrypt 无法验证域名所有权
• SSL 证书永远签不下来

把 Cloudflare 的代理关掉后，GitHub 的 DNS 验证通过了，大约 5 分钟后 Let's Encrypt 证书签发完毕， 新域名终于可以正常访问了。

第三章：CSS 去哪儿了？

页面终于能打开了，但……布局全乱了。文字堆在一起，导航栏浮在半空，整个页面像没穿衣服。

检查 HTML 发现罪魁祸首：

<link rel="stylesheet" href="旧域名/css/main.css">

所有页面的 CSS 引用都指向了过期域名（旧域名）！这个域名早就没了， 自然什么样式都加载不到。

全站一共有 8 个 HTML 文件引用了这个链接（首页、404、文章列表、两篇文章、分类页、标签页、重定向页）。 把它们全部改成相对路径 /css/main.css，另外还有标签链接 旧域名/tags/ 也需要一并修正。

修复完后，页面总算恢复了基本布局。但另一个问题随之而来——这个 2019 年的 Bootstrap 3 主题， 看起来实在太老了。

第四章：重新设计 CSS

既然要改，不如彻底翻新。我保留了原本的 lightseagreen 主题色， 但把整个样式系统从 1282 行扩展到了近 9000 行（好吧，是重写了）。

主要改动：

• 设计系统——定义 CSS 变量管理颜色、间距、阴影
• 卡片式布局——文章列表和内容区采用圆角卡片 + 柔和阴影
• 深色代码块——Catppuccin 风格的代码高亮
• 引用样式——左侧绿色竖线 + 浅绿背景
• 表格美化——绿色表头、斑马纹、悬停效果
• 响应式优化——从桌面到手机完整适配
• 动画增强——导航栏毛玻璃效果、卡片悬浮动效

改造完成后，整个小站焕然一新，从 2019 年的老古董变成了 2026 年的现代风格。

第五章：断舍离

旧小站里有两篇 2019 年的技术文章（一篇 Hello World，一篇关于 CSS Float 的笔记）， 内容已经过时了。我选择了把它们隐藏（重定向到首页），清空了文章列表和标签页。

导航栏右上角的邮箱和 GitHub 图标也一并移除了——干净才是最美。

第六章：新文章模板

为了以后写文章方便，我做了一个全新的文章模板。这个模板支持：

• 文章头部标题 + 日期 + 阅读时间 + 标签
• 丰富的正文样式（标题层级、引用、列表、表格、图片）
• 深色代码块 + 语法高亮
• 底部的导航链接

以后想写文章，直接把内容发给 Her（我的 AI 助手），就能自动生成这样的页面并部署上去， 完全不需要手动编辑 HTML。

总结

从决定复活小站到最终上线，整个过程大概花了不到一小时（虽然踩了不少坑）。 最值得记住的三件事：

1. GitHub Pages 会自动禁用——如果自定义域名长期无法验证
2. Cloudflare 和 GitHub Pages 不兼容代理模式——必须关掉橙色云
3. Hugo 生成的是纯静态文件——不重新配置构建工具也能直接修改 HTML

小站活了。域名解析正常。SSL 证书没问题。CSS 焕然一新。老文章走了，新模板来了。

这是一次愉快的"考古"体验，从 2019 到 2026，七年的代码还能跑起来的感觉真好 🍀