老夫聊发少年狂, 博客改hugo一通忙

前情提要

简单说就是不知道因为什么,用了20年了 Wordpress 总是动辄宕机,最后逼得我不得不每小时重启服务器。

一直想换个静态博客,但感觉很麻烦,而且虽然要永远少年,但也不是什么事情都折腾,应该把精力放在更重要的事情上,比如说AI、投资。

但,可能脑子抽筋,最终还是决定行动起来,发现还是蛮容易的,记录一下吧。

安装Hugo

有台性能不怎么样的 debian 服务器,决定用起来。一句命令搞定。

sudo apt install hugo

生成新站点

进入到网站目录,例如 www 下,然后运行命令

hugo new site ABC

之后,就会在 www 下生成

配置模板

Hugo的主题列表页面

最火的两个主题应该是 PaperMod 和 Stack,最终选了 Stack 做博客模板。

直接在 Github 下载下来 zip文件,放到 themes 目录下,然后解压缩

配置 hugo.yaml

原来的文件夹下面有个 opml 配置文件,但普遍反映 yaml 更好,删除源文件,新建一个 hugo.yaml

按网站上的一些教程进行配置,这里有很多小坑,例如「:」之后必须有个空格,否则会报错,之后有空会继续折腾,所以这里先补列出来了。

Wordpress 导出 Hugo

有很多方案,大体是两个,一个是 Wordpress 插件直接导出,一个是 WP 后台生成 xml 然后在本地用 node.js 转换。

两个方案都试过,最后感觉 Wordpress 插件导出的更好,但存在两个问题

  1. 很多原来的 html 代码没有转换成 Markdown ,使用 Hugo 生成静态网站的时候,会被直接忽略,这就导致新博客的图片很多无法显示。这个问题,想了一下,决定「既往不恋,纵情向前」,直接不管了,以后拥抱 Markdown,但保留个 https://old.zyzhang.com 旧入口。
  2. 有大量不理解的「\」转义符号。这个直接搞了个 python 脚本给批量删除了。

生成静态网站

准换好的文件夹下会有多个子文件夹,一个是posts,其他是 pages 的一些页面

把他们都复制到 hugo 网站的文件夹下的 content 目录下,强调下

posts 文件夹需要改名为 post,不然无法在首页显示文章列表

当然,如果本来就希望把博客作为子目录,就可以保留,通过类似于 https://url.com/posts 访问

预览和发布

预览是 hugo server命令,输入这个命令后会在 public 文件夹下生成一大堆文件夹,文件夹名称就是博客标题名称,然后可以使用 https://localhost:1313这样的网址预览。

发布是 Hugo命令,发布后,把域名解释到 public 文件夹就可以正常访问了。

评论系统和迁移

Hugo支持的评论系统也很多,例如Disqus、 Daline 、 Twikoo,好像 Waline 比较受欢迎,但我看有一些人从 Waline 换到了 Twikoo,而且评价很好,所以决定用 Twikoo。

使用的是 Twikoo 推荐的 MongoDB Atlas + Vercel 方案,按照官方教程顺利搞定。小细节是类似于「 <name> 」要整个替换为「用户名」而不是「 <用户名> 」。

评论迁移也是意外的顺利,Wordpress 不能直接转 Twikoo,但我看 Twikoo 支持从 Waline 、Artalk 等导入,而 Artalk 官方有个Wordpress 转换服务,所以就 Wordpress → Artalk → Twikoo ,顺利搞定,不过貌似有一些没有匹配到链接还不知道啥情况,测试 关于页面 是可以显示旧评论的。还是那句话「既往不恋、纵情向前」,得空看能不能捯饬一下,不行就算了。

结尾

本来还打算再优化优化,解决历史遗留问题,精调下页面什么的,但还是决定直接上线了,反正有 old 版。

作为一个精通用各种语言写「hello world」,倒腾下还是有点成就感的,感觉又和新世界接轨了。

正好最近有篇博客在 Hacknews 挺火,说是按道理应该动态博客更多人用,静态博客更少人,实际恰恰相反。

那篇文章的主要观点是其实静态博客的门槛更高,而 Wordpress 门槛低,并且做了很多对比,但我感觉其实说的不太对,因为他说的是安装系统(例如lnmp)、解释域名等,但这些其实 Wordpress 也需要啊,所以我觉得他其实是说「 静态博客 VS 博客平台」,那就没什么可比行了。

但我作为老网民,LNMP + phpmyadmin + Wordpress 一套下来感觉还是很容易的,我确实有点说不准配置 Hugo 是不是其实更简单一些。

后续

  1. Hugo 默认 RSS 是「/index.xml」,而 Wordpress 是「/feed/」,要重定向 RSS,在 Nginx 配置文件里添加下面代码即可(2024-10-11)

        location ~ ^/feed/?$ {
    rewrite ^ /index.xml last;
    
  2. 解决Twikoo评论不匹配的问题

    评论有个问题是这样的:Artalk 导出的评论 URL 编码是小写,而 Hugo 生成的 URL 编码是大写,导致文章匹配不到文章。 最后的解决方案是

    1. 从 Twikoo 导出 json 文件;
    2. 用 python 脚本把小写全部转为大写;
    3. 在MongoDB数据库里清空 comment 里面的数据(还专门下载了一个 Mac 管理数据库的 APP);
    4. 把新的数据再导入进去。
  3. RSS错误和设置RSS条目数

    之前的 RSS 有问题,发现是WordPress导入的数据有乱码,导致报错。 且Hugo默认输出全部RSS,加入以下代码可以设置RSS输出条目数。

        services:
          rss:
            limit: 10
    
  4. Debian 的 hugo 版本是 0.111,最新的模板需要更高级版本,升级了一个版本,不是扩展版,执行 PaperMod 还行,执行 Stack 就不行了,所以是需要扩展版。步骤是

    1. 找 hugo_extended开头的版本;例如hugo_extended_0.134.3_Linux-64bit.tar.gz
    2. 运行 tar -zxvf hugo_extended_0.xx.x_Linux-64bit.tar.gz
    3. 运行 sudo mv hugo /usr/local/bin/
使用 Hugo 构建
主题 StackJimmy 设计