目录

从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系统为例:

  1. 去Github上下载最新版的Hugo。这里有两种版本,普通版hugo_版本号_Windows-64bit.zip和拓展版hugo_extended_版本号_Windows-64bit.zip。一般情况下,下普通版就行,如果你使用的主题需要用到一些特殊的功能,则可能需要下载拓展版。

  2. 解压压缩包中的hugo.exe到指定的文件夹,如D:\Hugo,并将该目录添加到环境变量中。在命令提示符中输入hugo version能返回版本号,说明添加成功。

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

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

    ``

  4. 找一个你喜欢的主题,放到themes文件夹中,如themes\LoveIt。在congfig.toml文件中,添加theme="LoveIt"即可启用该主题。主题的其他配置项可以查看主题的功能介绍。

  5. archetypes下的default.md用于定义文章默认的模板,可以仔细修改,定义自己md文件的front Matter部分。写文章时,输入hugo new posts/文章名称.md即可在content\posts下创建文章的md文件。

  6. 写好文章后,在命令行输入hugo serve,即可在本地启动网页预览。

  7. 发布时,在命令行输入hugo,即可在网站根目录下的public文件夹中找到生成的静态文件。

  8. public下的文件上传到服务器中网站的根目录下即可访问。

VPS环境部署

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

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

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

同步到Github

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

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

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

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

  1. 在本地的网页根目录下,启动终端,输入git init进行初始化。
  2. 配置项目的用户邮箱和用户名:
1
2
3
4
5
6
7
# 配置本项目的邮箱和用户名
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"
  1. 配置远程仓库:
1
git remote add origin https://github.com/xxxxxxx/xxxxxxxx.git
  1. 查看当前修改状态git status
  2. 添加修改过的文件,.表示当前目录下的所有文件,也可以指定文件:
1
git add .
  1. 提交修改内容 到本地仓库
1
git commit -m "第一次提交"
  1. 提交至远程仓库
1
git push -u origin "main"

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

Github Actions自动化发布

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

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

通过putty等工具连接VPS后,输入:

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

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

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

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

分享以下我的Actions里配置的Workflows,供参考:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
# 发布我的博客到自建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/网站根目录

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

1
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也很方便。

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