从WordPress到Hugo

做了一个艰难的决定，将博客从WordPress迁移到了Hugo。虽然期间也尝试了Typecho，对比了Hexo，但最终还是走向了Hugo的怀抱。

起因

域名的缘故

原来的WordPress博客因为事情比较多的缘故长期停更了，这次突然想起它是因为一条短信，来自阿里云。

您好！依据《互联网域名管理办法》和注册局实名政策，为避免历史实名状态与注册局系统数据不一致可能造成的后果，您账号下的moyanjun.cn等域名现已重置为“未实名认证”状态，详情查阅账号邮箱或站内信通知。感谢您的理解与支持！
——2022年7月14日

早已实名认证并且用了这么多年的域名，要再一次实名认证，难以理解。系统之间数据不一致，不是增加用户的负担，破坏用户体验的理由。这也让我下定决心离开CN域名，回到常规的COM域名。

就在第二天晚上，立马在NameSilo上注册了一个新的域名notesth.com，取的是“note something”的简写，意思是记录一些事情，这也契合我博客的内容，自此告别CN姓名域名。

在NameSilo购买域名时，输入notesth折扣码，可以享受1美元的优惠。

这里对NameSilo也要小小的吐槽以下，网页的改版不完全，新老页面互相跳转，让人眼花缭乱；另外就是DNS解析特别慢，不知道我是不是个例，所以入手后的第二天就把DNS解析服务转到了Cloudflare上。

主机的缘故

记得刚接触WordPress是从3.4版本开始，这些年下来，版本号已经刷到了6.0。

随着版本号的提高，WordPress对主机的要求也越来越高。运行最新的6.0版本，官方建议PHP版本7.4及以上，MySQL版本5.7及以上。我的VPS，单核，512M内存，运行推荐配置都比较吃力，于是开始考虑换框架。

经过

框架选择

最先尝试的是Typecho，轻量级的框架，能实现WordPress基本的功能，在我的小主机上响应速度也比WordPress快很多。尝试了它自带的markdown编辑器，不是很好用，图片管理也不是很方便。

其他语言的动态博客框架好像都没有上述两款流行，也就不去一一尝试了。

于是，我把目光转向了静态博客。

静态博客用得比较多的工具就是Hexo和Hugo，对比了很久。Hexo主题丰富，插件生态完善，让我很是犹豫，但最后我还是被Hugo的转换速度快和依赖少所征服。

Hugo的使用

这里以我自己的Win10系统为例：

去Github上下载最新版的Hugo。这里有两种版本，普通版hugo_版本号_Windows-64bit.zip和拓展版hugo_extended_版本号_Windows-64bit.zip。一般情况下，下普通版就行，如果你使用的主题需要用到一些特殊的功能，则可能需要下载拓展版。
解压压缩包中的hugo.exe到指定的文件夹，如D:\Hugo，并将该目录添加到环境变量中。在命令提示符中输入hugo version能返回版本号，说明添加成功。

创建一个网站的文件夹，如E:\Website，在文件夹目录中右键在终端打开，输入hugo new site myblog，生成myblog文件夹，作为网站的根目录；或者也可以输入hugo new site .，直接以Website文件夹作为网站根目录。hugo会初始化，生成网页的基础文件。目录结构如下：

├── archetypes
│   └── default.md
├── config.toml         # 博客站点的配置文件
├── content             # 博客文章所在目录
├── data                
├── layouts             # 网站布局
├── static              # 一些静态内容
└── themes              # 博客主题

找一个你喜欢的主题，放到themes文件夹中，如themes\LoveIt。在congfig.toml文件中，添加theme="LoveIt"即可启用该主题。主题的其他配置项可以查看主题的功能介绍。
在archetypes下的default.md用于定义文章默认的模板，可以仔细修改，定义自己md文件的front Matter部分。写文章时，输入hugo new posts/文章名称.md即可在content\posts下创建文章的md文件。
写好文章后，在命令行输入hugo serve，即可在本地启动网页预览。
发布时，在命令行输入hugo，即可在网站根目录下的public文件夹中找到生成的静态文件。
将public下的文件上传到服务器中网站的根目录下即可访问。

VPS环境部署

之前的WordPress需要一套LNMP环境，而对于静态博客而言，只需要一个Nginx，大大降低了VPS的负担。

我的VPS安装了宝塔面板，可以直接在软件商店里选择安装最新版的Nginx。

添加网站，配置域名、SSL、和重定向（把对moyanjun.cn的访问跳转到新域名notesth.com），这些在面板里都是可视化的操作，比较简单。

同步到Github

前面说到，网站的发布其实就是将生成的public下的文件上传到服务器网站的根目录下。但每次发布都手工上传这么多文件，岂不是很麻烦。我希望在本地用markdown写完文章，一提交就马上发布。

有需求，必有响应。目前应用比较广的就是利用Github下的Actions来实现自动化发布。

首先要把网站文件同步到Github上的仓库中

在Github上建立仓库和安装Git工具这里略过。我也是首次接触Git，这里记录一些日常用的命令，备忘。

在本地的网页根目录下，启动终端，输入git init进行初始化。
配置项目的用户邮箱和用户名：

# 配置本项目的邮箱和用户名
git config user.email "xxxxx@gmail.com"
git config user.name "xxxxx"

# 如果需要全局配置，加上 --global
git config --global user.email "xxxxx@mail.com"
git config --global user.name "xxxxx"

配置远程仓库：

git remote add origin https://github.com/xxxxxxx/xxxxxxxx.git

查看当前修改状态git status
添加修改过的文件，.表示当前目录下的所有文件，也可以指定文件：
```
git add .
```
提交修改内容到本地仓库

git commit -m "第一次提交"

提交至远程仓库

git push -u origin "main"

小提示：如果不想输入这么多命令行代码的话，可以用VSCode，也就点下提交的事。

Github Actions自动化发布

大体思路：在Github上建立一个仓库，通过Git将网站内容同步到仓库中，再在Actions配置Workflows（工作流），当监测到仓库内容变动后，运行hugo生成网页静态文件，再通过rsync将生成的pulic文件同步到VPS上的网站根目录下，从而实现自动化发布。

前面的步骤，我们已将网站文件同步到了Github上的仓库中，下面需要准备好Github虚拟环境通过SSH连接VPS的密钥。

通过putty等工具连接VPS后，输入：

ssh-keygen -t ed25519 -f ~/.ssh/blog_deploy_key

是否需要加密码保护，选否，以便在工作流中无人值守。

将公钥 ~/.ssh/blog_deploy_key.pub 的内容添加到 VPS 的 ~/.ssh/authorized_keys 中。
将私钥 ~/.ssh/blog_deploy_key 的内容添加到 GitHub 仓库的 Settings -> Secrets 中并命名为 BLOG_DEPLOY_KEY。

准备工作完成后，就可以开始编写Workflows了，Github上有默认的模板，再结合自身的需求以及网友们的智慧，就可以实现自己想要的功能。

分享以下我的Actions里配置的Workflows，供参考：

# 发布我的博客到自建VPS 
name: Hugo CI

on:
  push:
    branches: [ "main" ]
    paths-ignore: [ ".gitignore" ]  # 这些文件的变更不触发部署
  workflow_dispatch:


jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3
      
      # 安装hugo
      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true
      
      # 构建编译静态站点
      - name: Build
        run: hugo
      
      # ssh私钥缓存
      - uses: webfactory/ssh-agent@v0.4.1
        with:
          ssh-private-key: ${{ secrets.BLOG_DEPLOY_KEY }}

      # 使用 ssh-keyscan 命令扫描VPS服务器的公钥
      # 保存到github actions虚拟环境的 ~/.ssh/known_hosts 中
      # 用于工作流的无人值守
      - name: Scan public keys
        run: |
          ssh-keyscan -p 端口号 ${{ secrets.BLOG_DEPLOY_HOST }} >> ~/.ssh/known_hosts
      
      # 部署 通过rsync将虚拟环境下编译好的public目录同步到VPS指定目录下。
      # rsync --delete会删除目的目录中不在源目录中的文件。
      - name: Deploy to VPS
        run: rsync -av -e 'ssh -p 端口号' --delete public/ root@${{ secrets.BLOG_DEPLOY_HOST }}:/www/wwwroot/网站根目录

这里解释一下最后同步的脚本，以免引起不必要的麻烦。

rsync -av -e 'ssh -p 端口号' --delete public/ root@${{ secrets.BLOG_DEPLOY_HOST }}:/www/wwwroot/网站根目录

-e 'ssh -p 端口号'用于指定SSH连接的端口号，有些VPS并不是默认的22端口
--delete用于删除VPS上/www/wwwroot/网站根目录下的所有文件
public/指定同步的源文件，有/会同步该文件夹下的所有文件，没有/会直接将public文件夹复制到网站根目录下

结果

经历了一系列的折腾，我的Hugo博客算是搭建完毕了。同样的美国VPS，原先的WordPress和现在Hugo静态博客的响应速度完全不在一个Level。

从动态博客到静态博客，是一钟截然不同的体验。不用操心什么PHP优化、数据库优化，万一哪天不想用VPS了，迁移到免费的Github Pages也很方便。

有时间还是安安静静写点东西，记录才是最重要的！