Hugo搭建静态页面及自动推送指南

最近把个人主页从Statiq全面转移到Hugo上了。五年的时间内,从Hexo到Statiq再到Hugo,我尝试了不同的几种静态页面生成器。最终选择了Hugo也是因为感觉,它还是最方便好用的一种。在此记录一下Hugo的使用方式、我所选用的FixIt主题的搭建和配置,以及配合GitHub Webhook实现代码自动更新推送的流程。

Hugo是基于GoLang的静态页面生成器,以超高的渲染速度,超低的渲染负载著称。开发速度、更新迭代都非常快,各项功能支持也很广泛,堪称“下一代”静态页面生成器。下文中开发环境为Windows11 x64操作系统,VSCode编辑器。

首先在发布页面下载二进制预编译文件,然后将解压后的hugo.exe放在你喜欢的目录里。我放在了C:\Program Files\hugo目录下。

打开「开始->设置->系统->高级系统设置->环境变量」,在「用户变量->Path」下加入存放Hugo可执行文件的目录。终端测试命令hugo version,如能够正确显示版本号,则可以进入下一步。

在代码编辑器中导航至想存放项目文件的目录中,使用命令

1
hugo new site your_project_name

建立项目文件夹,并初始化项目。

之后,从FixIt主题的Github仓库下载全部文件,复制到本地项目的themes/anatole/目录中。再将主题文件夹中的exampleSite/config目录及内容拷贝到项目根目录下,并删除原项目自带的config.toml文件。至此,所有基本环境已经搭建完成。

FixIt主题的配置可以参考官方文档,整体较为简单,并且主题随带的默认配置已经很合适了。主题中包含大量支持自定义的元素,可以根据需求自行调整。

建立好项目以后,就可以在项目目录下的content目录中进行写作了。如果掌握不好写作的格式要求,可以将themes/anatole/exampleSite/content目录下的内容拷贝到项目content目录中,这些示例文档都是可以参考的案例。Markdown语法部分也可以参考我在这个系列中的第二篇文章——Hugo/FixIt语法参考

文章编写完成后,终端中使用命令hugo server可以在localhost:1313进行预览,此模式下支持热编辑。如渲染效果满意,使用命令hugo可以进行渲染生成。常用命令如下:

1
2
3
4
5
6
hugo serve # 预览网页
hogo serve -e production # 以生产环境预览网页
hugo serve --disableFastRender # 预览时关闭快速渲染,重新完整渲染改动页面
hugo serve --cleanDestinationDir # 清除预览目录中的多余页面
hugo # 渲染输出
hugo --cleanDestinationDir # 清除输出目录中的多余页面

渲染输出到public目录后就可以推送到Git了。这部分本不想着墨太多,但考虑到我自己有时候也经常忘记如何使用Git,写在这里权当给自己一个Reminder了。

以GitHub为例,安装完Git后首先是本地Git用户信息配置并生成SSH密钥:

1
2
3
git config user.name "yourname"
git config user.email "your_email@youremail.com"
ssh-keygen -t rsa -C "your_email@youremail.com"

然后将.ssh/id_rsa.pub中的内容复制粘贴到GitHub 「Settings->SSH and GPG keys->New SSH key」处。

验证连接:ssh -T git@github.com

连接成功后,在远程创建与本地项目目录同名的仓库。本地目录下初始化Git:git init

然后将本地目录连接远程仓库:

1
2
git remote add origin git@github.com:xxx.git #推荐,SSH方式
git remote add origin https:xxx.git #HTTPS方式

最后同步仓库:

1
2
3
4
5
6
# 若远程仓库有文件:
git pull origin main

# 若远程仓库为空:
git commit -m "comment"
git push origin main

配置好Git后,可以开始进行服务器上的设置,以完成每次更新推送到Github都可以自动拉取文件,不需要手动同步服务器文件了。

服务器以使用宝塔面板为例,运行环境是Ubuntu 20.04LTS。

首先安装并配置Git:

1
2
3
4
5
6
7
sudo apt install git
git config --global user.name "yourname"
git config --global user.email "your_email@youremail.com"
sudo ssh-keygen -t rsa -C "xxxxx@xxxxx.com"
sudo cat /root/.ssh/id_rsa.pub
# 复制密钥并粘贴到GitHub
sudo -u root ssh -T git@github.com

之后登录宝塔面板,在「软件商店->宝塔插件」处搜索并安装宝塔WebHook。添加到主面板后,在主面板点击它,新建一个WebHook。这里需要注意,和常见的接收到信息后拉取同步整个仓库不同的是,Hugo渲染输出页面只存在于仓库的public路径下,所以我们需要设置为只同步该路径下的内容,其余文件不需要同步。具体配置代码如下:

 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
#! /bin/bash
echo ""
# 输出当前时间
date --date='0 days ago' "+%Y-%m-%d %H:%M:%S"
echo "-------开始-------"
# 服务器项目存放路径
gitPath="/www/wwwroot/your_file_path"
# 此处不要用HTTPS地址,使用SSH地址
gitHttp="git@github.com:your_repository_path"
echo "Web站点路径:$gitPath"
sudo rm -rf $gitPath
mkdir $gitPath
cd $gitPath
#判断是否存在git目录
if [ ! -d ".git" ]; then
  echo "在该目录下克隆git"
  sudo git clone $gitHttp gittemp
  sudo mv gittemp/.git .
  sudo rm -rf gittemp
fi
echo "拉取最新的项目文件"
# 设置部分拉取
sudo git config core.sparsecheckout true
sudo echo public/ >> .git/info/sparse-checkout
# 拉取最新的项目文件
git reset --hard origin/main
sudo git pull 
# 移动文件
sudo mv $gitPath/public/* $gitPath/
sudo rm -rf $gitPath/public
echo "-----拉取成功-----"
exit

设置好后保存,在WebHook右侧点击“测试”,可以在“日志”中查看代码执行情况。如果一切正常,那么点击“查看密钥”处可以看到密钥,复制它。来到GitHub仓库,在仓库设置的左侧有一个“Webhooks”选项卡,点击它,添加一个Webhook,在Payload URL处填写:

1
https://宝塔面板地址/hook?access_key=复制的密钥

Content Type选择“application/json”,SSL verification根据情况设置,其他不要改动,保存Webhook。

接下来就是更新本地代码,推送到GitHub上,然后查看自动拉取情况了。

0%