将 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 🙂