利用 Hugo 建立静态博客并通过 GitHub Pages 部署

Assumptions about Audience

本「教程」乃为女友之便所写,故

  1. 假设阅读者具有使用命令行工具的基本能力。(或许有帮助:Learning the Shell
  2. 假设操作环境为 macOS Mojave/Big Sur。

Pre-requisites

安装 Homebrew

Homebrew 是 macOS 广为流行的包管理器。我们使用它来安装 Git、Hugo 及更多工具。

很便利地就可以安装它:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

安装 Git

Git 是一个分布式版本管理工具,我们使用它来管理项目(在此例中也就是博客)版本。

使用前步骤安装的 Homebrew 安装它:

brew install git

注册 GitHub 帐号并添加 SSH Key 到账户

GitHub 是一个用以支持版本管理和合作开发的代码代管服务平台。我们需要用它来存放站点文件以及使用它的 GitHub Pages 服务来发布我们的博客。

Join GitHub - Create your account

如果此前未生成过 SSH Keys(可以检查),生成新的 SSH Key 并加入 ssh-agent将 SSH Key 加入 GitHub 账户

创建 GitHub Repositories

在此步骤中我们需要创建两个 repos,一个用来通过 GitHub Pages 部署静态博客,一个用来储存站点源文件。

  1. 创建一个用来部署 GitHub Pages 的 repo,命名为 <USERNAME>.github.io
  2. 创建一个储存站点源文件的 repo,命名为 blog

初次运行 Git 前的配置

为 Git 配置用户名和邮件地址:

git config --global user.name "<USERNAME>" # GitHub username
git config --global user.email <EMAIL> # GitHub 注册邮箱

准备域名(Optional)

如要使用定制域名(custom domain),可参考 tld-list.com/ 挑选并购买域名。

此处假设我们购买了域名,并已通过 Let’s EncryptCloudflare Free SSL/TLS 等途径为其获取了 SSL 证书(如果不确定的话可以检查)。

安装 Hugo 并在本地启用

安装 Hugo

brew install hugo

检查安装是否成功以及其版本:

hugo version

得到类似的结果说明安装已经成功,并指示了 Hugo 的版本:

Hugo Static Site Generator v0.80.0-792EF0F4/extended darwin/amd64 BuildDate: 2020-12-31T13:44:15Z

生成站点文件

cd ~/Documents # 这里我们将 blog 目录放置在 Documents/ 下,请按需修改
git clone [email protected]:<USERNAME>/blog.git

首先 clone blog repo 到本地。

hugo new site hugo_tmp
cd hugo_tmp && cp -R . ../blog && cd .. && rm -rf hugo_tmp

生成站点文件,并将站点文件转移到其中,这样我们就获得了一个存放站点文件的本地 repo blog

接下来的操作(命令)主要都是以 blog 目录为根基执行,以 . 表示,比如 ./data 代表 blog 目录下的 data 目录。相关文档中,如果看到 site’s rootproject’s root 等等都指的是此站点目录

添加主题

这里使用女友选中的主题 Hello Friend NG 作为例子,可以到 themes.gohugo.io/ 或者按照项目 Git Stars 排序的 hugoranked.com/ 处查看更多的 Hugo 主题。

从 GitHub 获取主题,以 submodule 形式添加到 ./themes 目录:

cd blog
git submodule add https://github.com/rhazdon/hugo-theme-hello-friend-ng.git themes/hello-friend-ng

修改站点配置

将主题提供的模板站点配置复制到站点根目录:

cp themes/hello-friend-ng/exampleSite/config.toml .

为了后续使用 GitHub Pages 发布,我们需要修改 config.tomlbaseurl 的值。

如果准备直接使用 <USERNAME>.github.io 作为域名,将 baseurl 的值修改为 https://<USERNAME>.github.io 。如果准备使用定制域名,将 baseurl 的值修改为 https://<YOURDOMAIN>http://<YOURDOMAIN>(如果域名没有 SSL 证书)。

可能还需要按自己的需求修改其他的值,例如 titlename 之类。

创建文章

hugo new posts/my-first-post.md

新文章(名为 my-first-post.md 的 Markdown 文件)会被创建在 ./content/posts 下。

写入一些内容:

echo "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." >> content/posts/my-first-post.md

本地启动 Hugo 服务器

hugo server -D # -D 令 drafts 在编写与校对中可见。后续将站点部署上线,drafts 不会出现在 posts 中。

可在 http://localhost:1313/ 于本地查看站点页面、修改并实时观察变动。按下 Ctrl + C 中止。

撰写文章

编辑 Markdown 文件

推荐使用 Typora 编辑器,它移除了预览窗口,主打的特性是无缝(从 syntax 转换到样式文本)、所见即所想的编辑体验。

Front Matter

front matter 出现在每篇文章的开头,允许你将 metadata(比如 categoriesdatetagstitle)附在内容文件之中,Hugo 通过这些信息生成、组织、归类你的文章。

它可以由四种不同的格式完成,这里我们以 yaml 格式为例。yaml 格式的 front matter 以 --- 包裹。将以下代码放在文章(Markdown 文件)的最开头将给文章提供 metadata,不同的 front matter variables 提供的信息可查看具体说明

---
categories:
- Tech
- Programming
date: "2020-12-21"
slug: why-ruby-is-the-best-pl
tags:
- ruby
- programming-language
title: Ruby is Best
---

注意,通过 hugo new posts/... 生成的新文章已经包含了默认的 front matter,你可以直接进行增添及修改。

部署到 GitHub Pages

准备事项

将此前生成的 public 目录删除:

rm -rf public

将我们作为 GitHub Pages 部署的 repo clone 到本地,命名为 public。这样后续使用 hugo 生成的静态文件将全部存放在此目录,并且拥有一个 remote origin 指向我们的 GitHub Pages repo。

git submodule add [email protected]:<USERNAME>/<USERNAME>.github.io.git public

如果使用 custom domain 的话,需要将域名写入 CNAME 文件并将其放置在 GitHub Pages repo 之中:

echo "<YOURDOMAIN>" > static/CNAME

同时,在 DNS 管理中添加一条 CNAME record:

Name:    <YOURDOMAIN>
Content: <USERNAME>.github.io

脚本化发布流程

完整的发布步骤需要执行好几条命令,所以我们将其放在一个脚本中,并在之后的部署中直接调用它。

首先创建一个脚本 deploy.sh,并将它通过相应的应用打开(可能是 TextEdit 或其他文本编辑器):

touch deploy.sh
open deploy.sh

将以下代码粘贴到其中:

#!/bin/sh

set -e # If a command fails then the deploy stops
printf "\033[0;32mDeploying updates to GitHub...\033[0m\n"
hugo # Build a site to the ./public directory
cd public
git add . # Add all changes to git

# Commit changes
msg="Rebuild site $(date)"
if [ -n "$*" ]; then
	msg="$*"
fi
git commit -m "$msg"

# Push source and build repos
git push origin master

# Commit all changes of project files and push
cd ..
git add .
git commit -m "Update blog files"
git push origin master

最后,给予 deploy.sh 可执行权限:

chmod +x deploy.sh

发布

每次需要发布,通过执行 deploy.sh

./deploy.sh

如果你有额外的 commit message:

./deploy.sh "<YOUR OPTIONAL COMMIT MESSAGE>"

如此,我们每一次执行「发布」,public 内文件将被推送至 GitHub Pages repo,然后新版本的博客将会被部署。随后,blog repo 将会存放你新的站点文件,这方便于备份以及在新的工作环境中重新创建并启用一个博客目录。


技术

2051 Words

2021-01-03

comments powered by Disqus