Hugo Blog 搭建

2021-11-22

3分钟阅读时长

技术杂谈

比较流行的静态网站生成工具有 Jekyll，Hexo，Hugo 等等，由于工作上有使用到 Go 语言，所以选用 Hugo + markdown 的方案进行搭建

物料

存放文稿源码的私人仓库
本地 Hugo 环境
GitHub Action
云服务器及已备案域名

流程及原理

部署好云服务器的 web 环境，可选用 nginx 或其他代理进行搭建
本地添加文章，提交到 GitHub 私人仓库
Push 操作自动触发工作流，执行对应 action，完成云服务器的同步更新

详细步骤

配置 Hugo 环境

具体可参考官方 Quick Start，根据你自身的环境进行配置，若已有站点请跳过，以下为 MacOS Homebrew 环境演示

# 更新 homebrew 源并下载安装 Hugo
$ brew update
$ brew install hugo

# 等待下载完成，输入以下命令查看 Hugo 是否正确安装
$ hugo version 
hugo v0.89.4+extended darwin/amd64 BuildDate=unknown

新建站点，配置主题

可以在官网上选用你喜欢的主题，我使用的主题是 eureka

$ hugo new site blog   # hugo new site [Site Name]
$ cd blog

# 下载主题
$ git submodule add https://github.com/wangchucheng/hugo-eureka.git themes/eureka

# 复制示例站点 config 和 content 文件夹到根目录
$ cp -r themes/eureka/exampleSite/config ./
$ cp -r themes/eureka/exampleSite/content ./

# 请根据喜好修改主题配置，此处省略...配置好后删除根目录的 config.toml
$ rm -rf config.toml

# 构建站点，在浏览器打开 127.0.0.1:1313 即可浏览效果
$ hugo server
Start building sites …
hugo v0.89.4+extended darwin/amd64 BuildDate=unknown
.....
.....
.....
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

配置云服务器

创建新的 ssh key，可参考 GitHub 文档

首先 ssh 连接到云服务器，假设

Host: 10.10.10.10
Username: pc9527

创建 Ed25519 算法的密钥对

$ ssh-keygen -t ed25519 -C "your_email@example.com"

若系统不支持 Ed25519 算法（你不知道是否支持），请使用以下命令

$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

此时创建密钥对并输入保存的位置，可以直接回车或者输入具有辨识度的命名

# 此处我输入 github_action 代替默认的 id_rsa
Generating public/private rsa key pair.
Enter file in which to save the key (/home/pc9527/.ssh/id_rsa):/home/pc9527/.ssh/github_action

# 不需要安全密码，直接回车即可
Enter passphrase (empty for no passphrase):
Enter same passphrase again:

跳转到本用户的 .ssh 目录并查看

# 如果没有自定义命名则会是 id_rsa.pub 和 id_rsa，以下操作命令请自行替换!!!!!!!!!
$ cd ~/.ssh && ls
github_action  authorized_keys  github_action.pub known_hosts

把 public key 加入到 authorized_keys

$ cat ~/.ssh/github-deploy-key.pub >> ~/.ssh/authorized_keys

修改 ssh 文件夹权限

$ sudo chmod 700 -R ~/.ssh

修改 ssh 配置文件，打开密钥登录功能

$ sudo vim /etc/ssh/sshd_config

.....
.....
#LoginGraceTime 2m
#PermitRootLogin prohibit-password
#StrictModes yes
#MaxAuthTries 6
#MaxSessions 10

PubkeyAuthentication yes # 取消注释

重启 ssh 服务

$ sudo service sshd restart

复制 Private Key 内容备用，包括 Begin End 在内

$ cat ~/.ssh/github_action
-----BEGIN OPENSSH PRIVATE KEY-----
b3Blbnxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcx
cxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxc
xcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxc
xcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxc
xcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxcxc
xcxcxcxcxWlsLmNvbQ==
-----END OPENSSH PRIVATE KEY-----

创建 GitHub 仓库，并设置所需要的 Secrets

前往 GitHub 新建仓库，✈️，创建成功按照提示，把本地的站点提交到远程仓库，请自行添加 .gitignore 文件

依次点击仓库的 Setting ➡️ Secret ➡️ New repository secret，我们需要新建三个值，请自行替换或更改 Name

SERVER_PRIVATE_KEY： 上面步骤复制备用的 Private Key
SERVER_HOST：10.10.10.10 (请输入你使用的云服务器 IP 地址)
SERVER_USERNAME：pc9527

登录云服务器，拉取远程仓库

Web 环境搭建不再赘述，我的服务器使用的是 Nginx，假设相关路径如下：

域名：zeroyc.me
blog 站点所在路径：/home/pc9527/blog

$ cd /home/pc9527 && git clone <your blog remote address>.git blog

若提示没有访问权限，前往 GitHub Account Settings ➡️ SSH and GPG keys

✈️ 新建 SSH Key，云服务器运行命令，复制公钥内容到新建文本框，确认保存

然后再重新尝试拉取仓库

$ cat ~/.ssh/github_action
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQDerOvIDLatfl4U2RTLK3A8Hse0tqJOCRpi+UuhLF+1g2erZgiwbwJ51AMLXMiAZNPWhQVUZpEkYNO8oTd2jChzASRmM6GdJcr8rXF5JKEvh8EQtPhT/ia6y4sbjxSHVFiQE/wkBGYcHT0oUlsQhFyMMQkPWqCH6TziZlK9iRXFyqhOvqkXFO751dHhJG4VynqqbU/qFW0PCIrYkMTzHrtOh2gvDbkMHkgqAMi5KANU/iUU3lQyprbo8p79Miu53wi+1Jx5RvIlGm23Mf5D/InX/f5MgYnluQSoFweN3sJWFHF8gX1BItNrZsPDw== your_email@example.com

Nginx 的简单配置如下

server {
    server_name zeroyc.me;
    root /home/pc9527/blog/public;
    index index.html index.htm;
    location / {
	      try_files $uri $uri/ =404;
    }
}

重启 Nginx 服务，访问 blog 配置域名，如无意外就能正常访问了

$ sudo nginx -s reload

我习惯创建一个 bash 文件来运行所需要的命令，即使也就一行命令…

创建 bash

$ mkdir /home/pc9527/deploy && cd /home/pc9527/deploy
$ touch sync-blog.sh
$ chmod 700 sync-blog.sh
$ vim symc-blog.sh

编写 bash，保存

#!/bin/sh
set -e

cd /home/pc9527/blog && git pull origin main

试运行，提示 Already up to date 则正常运行

$ /home/pc9527/deploy/sync-blog.sh
From github.com:<your blog github repo>
 * branch            main       -> FETCH_HEAD
Already up to date.

编写 GitHub Action 工作流，实现提交自动同步到云服务器

跳转到本地站点根目录，新建 deploy.yml

$ mkdir -p .github/workflows
$ cd .github/workflows
$ touch deploy.yml

编写 deploy.yml

# <blog root path>/.github/workflows/deploy.yml
name: Deploy

# 我使用的主分支命名为 main，常见使用的还有 master，请自行替换
on:
  push:
    branches:
      - main

jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: webfactory/ssh-agent@v0.5.3
        with:
          ssh-private-key: ${{ secrets.SERVER_PRIVATE_KEY }}

      - name: Run deploy script
        env:
          HOST: ${{ secrets.SERVER_HOST }}
          USERNAME: ${{ secrets.SERVER_USERNAME }}
        run: ssh -o StrictHostKeyChecking=no -tt $USERNAME@$HOST "./deploy/sync-blog.sh"

把新增的 .github 部分提交到远程分支，然后可以到远程仓库的 GitHub Action 查看是否正常工作，如无意外，Github Action 操作成功后，刷新你的博客域名，就可以看到同步更新完毕啦。