将 Hugo 生成的网站部署和托管到 GitHub Pages

GitHub 上的托管和部署

Github Pages 是 Github 推出的一项功能，可以免费托管静态网站，将你的静态文件放在仓库里，然后在仓库的 Settings 里面，翻到下面的 GitHub Pages 部分，可以将此仓库设置为你的静态网站文件的存放仓库。

Github pages分为两种：一种是项目主页，每个项目都可以有一个；另一种是用户主页，一个用户只能有一个。

  • 用户主页：存放的文件可以直接映射到你网站的根路径，而且只能有一个仓库名固定为：.github.io，这个仓库的名字其实也就是访问你网站的域名(e.g: kuroko.github.io)。

  • 项目主页：其它的仓库只能映射到网站的子路径，子路径名称和仓库名一致，比如我新建一个 static 仓库并设置为 Github Pages 仓库，那么我可以通过 kuroko.github.io/static/ 访问到里面的页面和文件

相关约定

  • You must use a <USERNAME>.github.io to host your generated content (创建：username.github.io 仓库托管网站内容)
  • Content from the master branch will be used to publish your GitHub Pages site(网站的内容只有在 master 分支上，才会被发布)

分步说明

基于 GitHub User Pages 托管我的 blog

  • 创建 GitHub 仓库：blog, 用来存放 Hugo 的内容和其他源文件

  • 创建 GitHub 仓库：iJayer.github.io，用来存放 Hugo 聚合生成的网站的静态内容, 即 public 目录下的内容

  • 克隆 blog 到本地 ( 如果前面通过 git remote add origin … 已经添加了 Github 源，则跳过该步骤)

    1

    $ git clone <REPO-BLOG-URL> && cd <YOUR-PROJECT>

    • Make your website work locally (hugo server or hugo server -t ) and open your browser to http://localhost:1313.

    • Once you are happy with the results:

    • Press Ctrl+C to kill the server

    • rm -rf public to completely remove the public directory(这个目录每次运行 hugo 都会再次生成，不用担心)

    • 把 public/ 目录添加为 submodule 与 username.github.io 同步

    1

    $ git submodule add -f -b master https://github.com/username/username.github.io public

  • 生成静态博客站

    1
2
3

    $ hugo
    
# 直接运行hugo命令，就会在public目录下生成静态博客页面文件。
    • 提交
    1
2
3
4

    cd public
git add .
git commit -m "YOUR COMMIT MESSAGE"
git push origin master

等一小会儿（10分钟左右），你就能在 https://username.github.io/ 这个页面看到你的网站了！

添加一键部署脚本：deploy.sh

为了方便，Hugo 提供了一个自动部署的脚本，这里 参考博客:keysaim 的脚本，用来同时提交这两个 repo：

 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

#!/bin/bash

################ Push Blog REPO ################

if [ $# -lt  1 ]; then
    echo "$0 <commit message>"
    exit 1
fi

msg="$1"

git add -A
git commit -m "$msg"
if [ $? -ne 0 ]; then
    echo "commit to blog repo failed"
    exit 1
fi

git push origin master
if [ $? -ne 0 ]; then
    echo "push to blog repo failed"
fi

################ Push Site REPO ################

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

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

# Go To Public folder
cd public

# Add changes to git.
git add .

# Commit changes.
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..

每次更新网站或者写了新文章，只需要运行./deploy.sh 发布就搞定了

Links

Thanks to the authors 🙂