Hugo部署方案

目录

前言

本文介绍如何部署Hugo静态站点到Github Pages。

静态生成

在尝试Hugo、Hexo、Jekyll等静态生成器后,发现这些生成器在本质上是将你的markdown文件转为Html、Css、JavaScript。

在本地预览的时候,可以通过Hugo Server进行实时预览,甚至Hugo还会监控文件的改动,以便自动重建站点,实时刷新文章的内容。但最终你需要将这些文件部署到服务器上,其他人才能正常访问。

hugo官方提供了手动部署脚本,可以实现一键部署到GitHub Pages。由于我的GitHub Pages采用了私有版本库+项目页面+自定义域名实现的,所以对部署脚本进行一定优化修改。

GitHub Pages类型

这里简单介绍下GitHub Pages支持的类型:用户/组织、项目。规则如下:

版本库(repository)对应域名
<username>/<username>.github.iohttp(s)://<username>.github.io
<organization>.github.iohttp(s)://<organization>.github.io
<username>/<repository>http(s)://<user>.github.io/<repository>

其主要的区别在于,需要建立的版本库以及对应访问域名不同。GitHub Pages会根据用户建立的版本库,自动关联并解析到对应的域名。 GitHub Pages的顶级域名的DNS设置:

类型名称
A@185.199.108.153
CNAMEwwwgeekwho11.github.io
A@185.199.109.153、185.199.110.153、185.199.111.153

因为GitHub Pages需要解析的IP地址有4个,最后一条A记录,可以根据情况进行设置。

我是通过2个独立的版本库里隔离了草稿箱和已完成的文章。

你不想你还没写完的文章,就公开发布了吧。

具体方案如下:

  1. xbc.me版本库用于更新发布文章,存储已完成的文章。
  2. write版本库属于私有,相当于你自己的文章草稿箱。
  3. 在write版本写文章,提交发布后触发GitHub Action,自动更新到xbc.me版本
版本库(repository)对应域名备注
xbc.mehttps://xbc.meProject Pages Sites/公开
write私有

目录结构

假设你有一个私有版本库write,构建的内容将会生成到public文件夹,其目录结构如下:

➜  write git:(master) ✗ tree -L 1
.
├── archetypes
├── config.toml
├── content
├── deploy.sh
├── layouts
├── public
├── README.md
├── resources
├── static
└── themes
    └── mainroad

7 directories, 3 files

其中文件夹public以及theme/mainloan,是通过下面命令添加的子模块:

git submodule add git@github.com:geekwho11/xbc.me.git public
git submodule add git@github.com:geekwho11/mainroad.git themes/mainload

最终你的.gitmodules的内容如下:

[submodule "themes/mainroad"]
	path = themes/mainroad
	url = git@github.com:geekwho11/mainroad.git
[submodule "public"]
	path = public
	url = git@github.com:geekwho11/xbc.me.git
	branch = master

你可以使用官方推荐的部署脚本,部署文件到GitHub Pages。

为了实现简单,部署脚本直接push到master分支,故需要在通过master分支,这需要你在设置为master。

这里我尝试建立deploy.sh,参考原文Host on GitHub 进行修改,建立deploy.sh文件,内容如下:

#!/bin/bash
# Program:
#   发布Hugo生成文件到GitHub Pages
# History:
# 2020.05.05 GeekWho First release.
# If a command fails then the deploy stops
set -e

printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

# Build the project.
Hugo --minify # if using a theme, replace with `Hugo -t <YOURTHEME>`

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
msg="Published on $(date +'%Y-%m-%d %H:%M:%S')"
if [ -n "$*" ]; then
    msg="$*"
fi
git commit -m "$msg"

git pull --rebase origin master
# Push source and build repos.
git push -f origin master

通过master分支,这需要你在版本库的settings的GitHub Pages,设置Source为master。

如果你希望用官方推荐的gh-pages分支发布的话,建议使用下面的deploy.sh脚本。

#!/bin/bash
# Program:
#   发布hugo生成文件到GitHub Pages
# History:
# 2020.05.05 GeekWho First release.
# If a command fails then the deploy stops
set -e

printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"

# Build the project.
hugo --minify # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public

# 切换到gh-pages
git checkout gh-pages

# Add changes to git.
git add .

# Commit changes.
msg="Published on $(date +'%Y-%m-%d %H:%M:%S')"
if [ -n "$*" ]; then
    msg="$*"
fi
git commit -m "$msg"

git pull --rebase origin gh-pages
# Push source and build repos.
git push -f origin gh-pages

工作流程

这样你的工作流程就变成了下面的步骤:

  1. 提交版本库代码
  2. 执行deploy.sh脚本
  3. 访问对应的Pages页面是否发布成功

当你在当前版本库修改完md文件后,你可以通过执行deploy.sh脚本实现自动同步到GitHub Pages。

注意事项

注意,如果你不想要渲染部分未完成的草稿,你可以用下面任意一种方式避免被同步。

第一种,在Front Matter设置draft: true,标识为草稿,Hugo默认不会进行渲染。

另外一种方式,直接设置config.toml配置,忽略指定文件夹。

# 忽略当前文件夹draft下全部文件
ignorefiles = [ "draft/.*" ]

当然,GitHub Pages使用肯定会有一些限制的。

  • 磁盘空间限制为1GB。这意味着发布的站点全部文件大小不能超过1GB。
  • 每月限制100GB的带宽,可调整。
  • 每小时可构建10次,可调整。

你可以从这里查看更多的限制

参考链接

  1. Host on GitHub
  2. About GitHub Pages
  3. About custom domains and GitHub Pages