上一篇写了怎么从零把 Hexo + Butterfly 博客搭起来。搭完之后我发现，”能访问”和”好用”之间还差着一截：搜索引擎不收录、没有 RSS、404 页面是个假的、所有前端资源都吊在时好时坏的 jsdelivr 上……这篇就记录我把这些坑一个个填掉的过程，每个问题都附上最终的解决方案，同款博客可以直接抄作业。

一、404 页面：最隐蔽的坑

发现问题纯属偶然：我随手访问了一个不存在的网址，竟然返回了 200 状态码，内容是首页。看了一眼 nginx 配置：

1
2
3
location / {
    try_files $uri $uri/ /index.html;
}

这是写 SPA（单页应用）的套路，静态博客用它的后果是：任何乱七八糟的 URL 都返回首页和 200，搜索引擎会以为我站上有无数个重复的首页，对收录是灾难。

改成静态博客该有的样子：

1
2
3
4
5
6
7
error_page 404 /404.html;
location / {
    try_files $uri $uri/ =404;
}
location = /404.html {
    internal;
}

404 页面本身不用手写，Butterfly 主题自带模板，配置里启用即可：

1
2
3
4
error_404:
  enable: true
  subtitle: 你要找的页面不存在或已被移动
  background: /img/banner.jpg

建表（指 hexo generate）之后主题会自动生成 404.html，nginx 把错误码指过去就行。效果见仁见智，至少爬虫能拿到正确的 404 了。

二、RSS、Sitemap、robots.txt：给爬虫铺路

这三个是搜索引擎收录的基础设施，插件装上、配置补全就好：

1
2
3
4
5
6
7
8
9
10
11
# hexo-generator-feed
feed:
  enable: true
  type: atom
  path: atom.xml
  limit: 20
  content: true

# hexo-generator-sitemap
sitemap:
  path: sitemap.xml

再在 source/robots.txt 写一份：

1
2
3
4
5
User-agent: *
Allow: /
Disallow: /admin/

Sitemap: https://你的域名/sitemap.xml

Disallow: /admin/ 是因为我给自己留了个后台入口，没必要让爬虫盯着看。最后去百度搜索资源平台和 Google Search Console 提交 sitemap，这一步只能自己注册账号做。

顺手在主题配置的 inject.head 里加一行 RSS 自动发现，让阅读器能认出你的订阅源：

1
<link rel="alternate" type="application/atom+xml" title="RSS" href="/atom.xml">

三、摆脱 jsdelivr：前端资源全部本地化

Butterfly 默认把 fancybox（图片放大）、分享按钮、Twikoo 客户端等脚本指向 jsdelivr。jsdelivr 在国内是什么水平大家都有数，时通时断。断的时候图片放大失效是小事，评论系统加载不出来是大事。

解法是把这几个库下载到 source/lib/ 下，然后主题配置里覆盖 CDN 地址：

1
2
3
4
5
6
7
CDN:
  option:
    fancybox: /lib/fancybox/fancybox.umd.min.js
    fancybox_css: /lib/fancybox/fancybox.min.css
    sharejs: /lib/sharejs/js/social-share.min.js
    sharejs_css: /lib/sharejs/css/share.min.css
    twikoo: /lib/twikoo/twikoo.all.min.js

这里有个大坑：hexo 会把 source 目录下的 .js 和 .css 当成模板去渲染，minify 过的文件直接报错，构建失败。必须在站点配置里声明这些目录按原样复制：

1
2
skip_render:
  - lib/**

另外每个第三方库有自己的小尾巴，比如 sharejs 的 css 引用了字体文件，要连字体一起下载，目录结构保持相对关系。改完之后用浏览器开发者工具清一遍 network 面板，确认没有任何外部 js/css 请求，才算数。

四、favicon：别让浏览器显示地球

主题默认指向 /img/favicon.png，文件不存在的话浏览器就给你显示一个默认的地球图标，很掉价。我没有专门做图，直接用站长的头像生成了全套：

1
// PHP GD 中心裁剪 + 缩放，生成 favicon.png(180)、32、16 和 apple-touch-icon

图片放 source/img/，head 里补上几个 <link rel="icon"> 标签即可。注意浏览器对 favicon 的缓存极其顽固，换了图标看不到效果时，先 Ctrl+F5，再不行关掉标签页重开。

五、Twikoo 评论：自托管的小惊喜

评论用的是自托管 Twikoo，配合自写的后台做评论管理。两个心得：

1. 它的接口有版本握手保护。 我试图绕过前端直接 POST 接口留言，被服务端以「请更新 Twikoo 云函数至最新版本」拒绝——只有官方前端 JS 提交的请求才带正确的握手信息。这反而让人放心：刷子脚本没那么容易直接怼接口。

2. 前后端版本要一致。 主题默认引的 Twikoo 客户端是旧版，和服务端对不上时会有奇怪的兼容问题。把客户端 js 也本地化成和服务端相同的版本，一举两得。

六、其他值得一提的小事

  • .well-known 目录：Let’s Encrypt/TrustAsia 证书续期靠 HTTP 验证，验证文件要放在网站根目录的 .well-known/ 下。但 hexo 每次构建都会清空输出目录，所以要在站点配置里加 include: - ".well-known/**"，否则证书续到一半会失败。
  • 备份：折腾服务器的人迟早会懂这句话的分量。源文件和数据库定期打包，放在站点目录之外。
  • ** favicon、公告文案这类小东西**：改配置就能生效，但每次改完记得重新生成，hexo 是纯静态的，不会有热更新。

写在最后

这一轮折腾下来，博客终于从”我能打开”变成了”敢发给别人看”。清单式地列在这里，一是给自己留个记录，二是希望同样在搭博客的你少走弯路。

下一篇计划把搜索引擎收录的结果汇报一下——sitemap 提交之后到底多久能被收录，到时候见。