继续折腾Hugo

来自 老麦
463 浏览

这段时间花了点时间把Hugo的主题给换了,Jane这个主题已经使用了一年,前前后后修改了很多次,改得已经不成样子了,我对这个主题是十分喜欢的。简约,该有的功能都有,基于Hugo的强大和易用性,集成一些其他功能变得十分简单、方便。虽然与Wordpress对比起来略差一丝,但对于个人博客来说,Hugo绝对称得上优秀。

这次换主题主要是看中了 Stack 这个主题对文章的构建比 Jane优雅,新建一篇文章的话,只要在/content/post/里新开一个文件夹,然后将Markdown文件和图片都扔到这里就可以了,这样的好处就是整理归档起来十分的清晰。当然Jane这个主题稍作修改也能实现这个功能,毕竟这其实就是Hugo自带的Page Bundles1功能。

选择直接更换而不去修改的原因之一是因为之前的主题被我修改得有点乱,再大刀阔斧下去感觉意义不大了。其次就是我最近状态不怎么好,还是直接使用新主题来得实际一点。以后时间充裕的话可以考虑以Jane为底子去重新写一个新的主题,我个人还是十分喜欢这种简约风格的。

下面记录一下这次更换主题碰到两个问题:

Jsdelivr的CDN服务原来是有限制的

在之前的周记里写过如何在Hugo上媷JsdelivrCDN的羊毛2,天真的我以为这种好日子可以一直下去,事实证明这又是我自己一个人的一厢情愿罢了。因为 Stack 主题默认情况下给文章添加一张特色图片才会达到最佳的效果,无奈只好去Pixabay扒图,方便倒是挺方便的,可没想到的是随着图片越来越多,Jsdelivr就来了一记重拳。提示「Package size exceeded the configured limit of 50 MB.」。老实说,我开始真不知道原来Jsdelivr有这个限制的,虽然网上也有一些取巧的方法去解决,但个人觉得这不是长久之计,只能以后再另辟途径吧。

为匹配主题的暗色模式更换评论系统

半年前我将评论系统换成了Twikoo,这大半年使用下来还算满意,数据存在腾讯云开发 CloudBase 上也放心,但不知是不是因为节点是广州的原因,数据读取偶尔会抽风一会,速度一般吧,属于可以接受的范围。

新主题有个暗色模式,当切换模式时Twikoo评论的样式就显得有点不搭,尝试修改样式进行匹配,效果只能说一般。主题的作者自己开发的评论系统没有开源,但我发现作者在主题上对Waline这个评论做了简单的适配,而且Waline本身自带暗色模式,这样的话匹配度就更高了。既然如此,那就换评论系统吧,反正自己一直想尝试一下这个评论系统,主要也因为个人感觉Waline自由度更高一点,可以部署在 Vercel 、CloudBase3或者自己的服务器上。

这次使用Waline我一开始尝试了Vercel+LeanCloud的组合,老实说,足够使用,速度和稳定性方面都很好,主要还免费。我最后选择部署在自己服务器上的原因其实是想多尝试尝试。前段时间学习了一些Docker的基础,正好Waline也支持这种方式来部署,所以决定尝试使用Docker+MySQL这样的组合。

服务器环境

Docker的安装可以使用官方安装脚本自动安装:

 curl -fsSL https://get.docker.com | bash -s docker --mirror aliyun

启动Docker:

 systemctl start docker

设置Docker自动启动:

 systemctl enable docker

至于其他安装方法可以参考:Docker 教程 | 菜鸟教程 (runoob.com)

我服务器上安装了宝塔并且一键搭建了LNMP环境,如果你和我一样可以直接跳过下面这一步。

Docker安装MySQL:

以安装MySQL5.7为例,拉取镜像:

 docker pull mysql:5.7

创建并运行容器:

 docker run -d -p 3306:3306 --name mysql \
 --restart=always \
 -e MYSQL_ROOT_PASSWORD=密码 \
 -e TZ=Asia/Shanghai \
 -v /laomai/mysql/conf:/etc/mysql/conf.d \
 -v /laomai/mysql/logs:/var/log/mysql \
 -v /laomai/mysql/data:/var/lib/mysql \
 mysql:5.7 --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci

命令说明:

-d后台运行;

-p 3306:3306设置容器的对外端口;

--name mysql设置容器的名字;

--restart=always设置自启;

-e MYSQL_ROOT_PASSWORD=密码设置MySQL的root密码;

-e TZ=Asia/Shanghai设置时区;

 -v /laomai/mysql/conf:/etc/mysql/conf.d \
 -v /laomai/mysql/logs:/var/log/mysql \
 -v /laomai/mysql/data:/var/lib/mysql \

挂载相应的目录,格式为-v 主机目录:容器内目录

mysql:5.7 --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci设置字符集与校对集;

最后创建一个数据库和用户,这里可以直接进入容器内部创建或者本地使用Navicat工具连接数据库后创建,这里推荐使用Navicat,操作起来直观很多。

温馨提示:记得到服务器的安全组开放3306端口。

在Navicat上使用用root用户连接到数据库,按F6进入命令列界面,分别输入以下命令进行创建:

 // 创建新的数据库并设置其编码
 mysql>CREATE DATABASE 数据库名字 DEFAULT CHARSET=utf8 DEFAULT COLLATE utf8_unicode_ci;
 ​
 // 创建新用户并设置密码
 mysql>CREATE USER '用户名'@'服务器IP' IDENTIFIED BY '密码';
 ​
 // 将新建的数据库管理权限赋予新建的用户
 mysql>GRANT ALL PRIVILEGES ON '数据库名字' TO '用户名'@'%';
 ​
 // 刷新权限
 mysql>FLUSH PRIVILEGES;

温馨提示:导入 waline.sql 到刚刚新建的数据库里完成表和表结构的创建,右键点击数据库,选择运行SQL文件即可。

部署Waline服务端

拉取Waline镜像:

 docker pull lizheming/waline

接下就运行容器,但在运行之前我们先了解一下Waline服务端相应的环境变量4,相对应的MySQL变量和简单的评论邮件通知变量如下:

环境变量名称必填默认值备注
MYSQL_HOST127.0.0.1MySQL 服务的地址
MYSQL_PORT3306MySQL 服务的端口
MYSQL_DBMySQL 数据库库名
MYSQL_USERMySQL 数据库的用户名
MYSQL_PASSWORDMySQL 数据库的密码
MYSQL_PREFIXwl_MySQL 数据表的表前缀
MYSQL_CHARSETutf8mb4MySQL 数据表的字符集
环境变量名称备注
SMTP_SERVICESMTP 邮件发送服务提供商
SMTP_HOSTSMTP 服务器地址,一般可以在邮箱的设置中找到。
SMTP_PORTSMTP 服务器端口,一般可以在邮箱的设置中找到。
SMTP_USERSMTP 邮件发送服务的用户名,一般为登录邮箱。
SMTP_PASSSMTP 邮件发送服务的密码,一般为邮箱登录密码,部分邮箱(例如 163)是单独的 SMTP 密码。
SENDER_NAME自定义发送邮件的发件人
SENDER_EMAIL自定义发送邮件的发件地址

温馨提示:

SMTP_SERVICE可以在这里查看支持的服务商。SMTP_SERVICE 和 (SMTP_HOSTSMTP_PORT)任选其一即可,如果没有在列表中知道对应的 SMTP_SERVICE 的话则需要配 SMTP_HOSTSMTP_PORT

参照上面的环境变量后输入以下命令运行并创建容器:

 docker run -d -p 8360:8360 --name waline \
  -v /laomai/waline/data:/app/data \
  -e TZ="Asia/Shanghai" \
  -e MYSQL_HOST="IP" \
  -e MYSQL_PORT="3306" \
  -e MYSQL_DB="数据库名字" \
  -e MYSQL_USER="用户名" \
  -e MYSQL_PASSWORD="密码" \
  -e AUTHOR_EMAIL="博主邮箱" \
  -e SITE_NAME="网站名字" \
  -e SITE_URL="网站地址" \
  -e SMTP_SERVICE="Gmail" \
  -e SMTP_USER="xxx@gmail.com" \
  -e SMTP_PASS="Gmail应用密码" \
  --restart always \
  lizheming/waline

注:-e MYSQL_HOST="IP"不知为何我直接使用本地IP127.0.0.1的话,评论时会提示连接不了数据库进行提交。直接使用服务器的内网IP和公网IP都能正常使用。-e SMTP_PASS="Gmail应用密码"这里不是填Gmail的登陆密码,应用密码须到Google账号——安全性——开启两步验证后才能独立申请。

打开http://IP:8360就能进入Waline的服务端了,打开http://IP:8360/ui/register进行注册,首个注册用户会设定成管理员。

绑定域名进行反向代理:

方法一、直接使用Nginx进行配置5

 server
 {
  listen 80;
  listen 443 ssl http2;
  server_name your.domain.server.name;
  root /www/wwwroot/your.domain.server.name;
  if ($server_port !~ 443){
    rewrite ^(/.*)$ https://$host$1 permanent;
  }
 ​
  # SSL setting
  ssl_certificate fullchain.pem;
  ssl_certificate_key privkey.pem;
  ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
  ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
  ssl_prefer_server_ciphers on;
  ssl_session_cache shared:SSL:10m;
  ssl_session_timeout 10m;
  add_header Strict-Transport-Security "max-age=31536000";
 ​
  # proxy to 8360
  location / {
    proxy_pass http://127.0.0.1:8360;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header REMOTE-HOST $remote_addr;
    add_header X-Cache $upstream_cache_status;
    # cache
    add_header Cache-Control no-cache;
    expires 12h;
  }
 }

方法二、在宝塔上进行设置:

宝塔面板——网站——添加站点——填写域名即可(其他的都不需要,我们只是用它来做反向代理和配置HTTPS)

宝塔面板——网站——设置——反向代理——添加反向代理——填写代理名称(Waline)和目标URL(http://127.0.0.1:8360

配置SSL的方法有很多,如果不想折腾,直接在宝塔面板上申请免费的 Let’s Encrypt 证书即可。

数据转换

Waline官网提供了一个迁移助手6,我Hugo上的评论之前都是存在 CloudBase 上的,数据导出来后利用迁移助手将JSON文件转换成CSV格式,然后就可以导进MySQL上了,因为Twikoo上使用了时间戳,直接导入MySQL会变成0000-00-00 00:00

解决办法:

利用Navicat进行重新定义时间格式再导入。

小结

静态博客什么都好,就是这个评论有点难搞,特别是数据转换这块,在各个第三方评论系统中转换问题不大,从Wordpress、Typecho导出来也容易,但想导回去就难了。办法虽然有,就是笨了一点,估计要一篇篇文章去改了。

至于为什么我转到Wordpress了还去折腾Hugo?老实说,我也不知道为什么。可能是我心底深处认为Hugo更适合我一点吧~


资料汇总:

  1. 详情请参考:Page Bundles | Hugo (gohugo.io)
  2. 详情请参考:2021年第27周 (iamlm.com)
  3. 适用于已有免费基础版 1 环境,或计划付费购买腾讯云云开发包年包月环境的的用户。
  4. 详情请参考:服务端配置 | Waline
  5. Waline官网提供的参考模板
  6. 详情请移步到:https://waline.js.org/migration/tool.html

您也许会喜欢……

欢迎留言来分享您的观点

61 评论

Js.nake 2021-08-13 - 22:08

从头看到尾,每个字我都认识,连起来就蒙了,老佩服加羡慕你们这些大佬了~

回复
老麦 2021-08-13 - 22:22

大佬我真不敢当,我也是整理一些方法而已。倒是你,主题达人,每次进去都不一样。而且主题都很漂亮~

回复
Andy烧麦 2021-08-13 - 17:15

以Jane为底子去重新写一个新的主题,你真给力,我就期待你这个了

回复
老麦 2021-08-13 - 21:16

不要期待,这句话说得我自己都有点不相信。哈哈哈

回复
灰狼 2021-08-13 - 10:45

首屏图太大,半天load不出来,也没什么信息看

回复
老麦 2021-08-13 - 21:14

当时为了测试随便弄上去的图,测试完忘了改了。哈哈哈~

回复
Andy烧麦 2021-08-12 - 15:45

已经换了,就这样把

回复
老麦 2021-08-12 - 17:50

我这边访问你的站报错哦。

回复
Andy烧麦 2021-08-12 - 17:59

哈哈哈,没开通,现在好了

回复
老麦 2021-08-12 - 18:48

刚才重新打开,还是报错,403 Forbidden。强制刷新还是一样。

回复
Andy烧麦 2021-08-12 - 18:51

你需要刷新 DNS 啦~

老麦 2021-08-12 - 18:56

刷新了也不行,也关了科学网,还是不行。我上网查,好像说是因为你设置了防盗链的原因。

Andy烧麦 2021-08-12 - 19:02

确实是这样

Andy烧麦 2021-08-12 - 19:02

现在关闭了COS的防盗链

老麦 2021-08-12 - 19:17

嗯,现在可以打开了。😁

老麦 2021-08-12 - 17:52

要在网址后面加上index.html才能正常打开,你是放对象储存上的么?如果是应该没有设置好。

回复
Andy烧麦 2021-08-12 - 18:05

是用的腾讯COS,桶上 索引文档 index.html,还需要 重定向规则 吗?

回复
老麦 2021-08-12 - 18:26

我最近也在寻思着加对象储存,哈哈。但感觉好复杂,我最近放的图片多了,打开速度变得比之前更慢了。不过昨天我的博客有人攻击,我去。搞得我现在都不知放不放好。

回复
Andy烧麦 2021-08-12 - 18:28

腾讯,阿里 这些是真快, 不过腾讯云工具 cosbrower 更方便,基本上窗口式操作。

老麦 2021-08-12 - 18:41

这个我倒没用过,不过其实git也很高效。

林海草原 2021-08-12 - 13:46

hugo我印象主题文件夹就是根文件夹。每个主题应用时都要修改一些设置以保证固定链接不变。当然我是2019年和2020年折腾时遇到的这些问题,现在这个博客还在netlify那里编译,只是绑定的域名过期了。评论系统自己搭建是非常好的,否则会遇到各种独特网络环境下的政策风险。当然,都有自己的服务器了只是自己搭建评论系统,而不是自己搭建博客系统,这时候靠的就是对静态系统的热爱,而不是便利了。

回复
老麦 2021-08-12 - 18:13

嗯,是的,就是根目录。这次我换主题基本没有修改,直接套上就用了。哈哈哈,文章、页面的固定链接都可以直接在MD文件加上URL来锁定。虽然我现在喜欢研究Hugo,但我想我还是会一直用Wordpress,除非哪天我不续费服务器和购买空间了。

回复
独元殇 2021-08-12 - 13:43

hugo这玩意吧,前几天研究了一下hugo,比我想象中要麻烦

回复
老麦 2021-08-12 - 18:15

我刚开始接触的时候也觉得很难入手,主要吧,我英文不好。很多有用的教程都是外文的~

回复
夜未央 2021-08-12 - 10:18

老麦记录的很认真,但我还是看不懂,天赋太差。

回复
老麦 2021-08-12 - 18:17

哈哈,这个嘛,记清楚一点,以后自己再弄一次就不用再到其他网站上找了。

回复
大峰 2021-08-12 - 09:22

高手,鉴定完毕!我还是用Twikoo这个吧,静态博客至少目前感觉挺好,hugo空了再研究研究,哈哈~

回复
老麦 2021-08-12 - 18:23

呵呵,Twikoo挺好用的,功能设定的刚刚好,相对Waline感觉就功能略显多了,有些功能我觉得根本不需要,要关闭吧,看官网都看半天,哈哈哈。

回复
哥斯拉 2021-08-11 - 21:22

本文看了一大半,再次查看了一下,确认你用的是wp,怎么又搞起hugo来。最后才看到最后一句话……
确实评论是硬伤,不然我也想用静态。

回复
老麦 2021-08-11 - 21:42

虽然用的是Wordpress,但我还是喜欢Hugo多一点。
本文提到的Waline这个评论用着还不错吧,就是感觉太过肥大,哈哈哈

回复
拾风 2021-08-11 - 20:46

都是折腾命,之前我一样一年得换几次主题。刚换的主题没多久就腻,总是惦记着别人的主题香

回复
老麦 2021-08-11 - 20:53

哈哈哈~还行吧。偶尔折腾、记录一下没那么容易忘记。

回复
拾风 2021-08-12 - 20:45

确实,生命在于折腾,时常有把之前做的一些网站重新搭建恢复的想法,又一次次荒废,最终想明白,好好坚持个人博客就够了,在精不在多。

回复
1 2 3