前期准备
要在Github上部署静态博客,首先需要准备好:
Github账号
在本地开发环境安装Hugo并准备好要发布的网页
在本地开发环境安装 Git 2.8 或更高版本
Github 页面种类
有两种Github页面可供选择:
个人/组织页面
(
https://<USERNAME|ORGANIZATION>.github.io/
)项目页面
(
https://<USERNAME|ORGANIZATION>.github.io/<PROJECT>/
)
参考Github页面文档以便决定你将要部署的页面类型,这里选择比较简单的个人组织页面类型作为示例
个人/组织页面建立的分步教学
首先,个人/组织页面和项目页面的差别是:
必须用
<USERNAME>.github.io
来托管你用Hugo生成的内容在
master
分支下的内容会被公开发布到你的Github主页上
分步教学
在Github上建立一个
<YOUR-PROJECT>
项目分支(例如,blog),这个分支会包含你的Hugo页面内容以及其他源文件在Github上建立一个
<USERNAME>.github.io
,替换<USERNAME>
为你的Github用户名。这个分支会包含你的Hugo页面的渲染版本。在本地终端执行
git clone <YOUR-PROJECT-URL> && cd <YOUR-PROJECT>
,克隆你在步骤1里建立的项目确保网站在本地可以运行,在本地终端执行
hugo server
或hugo server -t <YOURTHEME>
后用浏览器打开http://localhost:1313确保网站内容可以发布后
按
CTRL+C
来终止服务器执行
rm -rf public
移除public
文件夹下全部内容(没有则可忽略)
执行
git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public
创建git 子模块。现在当你再执行hugo
命令来部署网站到’public’时,建立的public
目录则会在一个不同的Github分支下运作。
建立一键发布的脚本
现在,部署页面已经基本完成,你可以建立一个deploy.sh
脚本来帮助你快速发布页面在Github上,使用chmod +x deploy.sh
来确保脚本可运行。
下面是脚本deploy.sh
的内容:
#!/bin/bash
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.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
# Push source and build repos.
git push origin master
# Come Back up to the Project Root
cd ..
你可以执行./deploy.sh "你的commit内容"
来将页面更改发布到<USERNAME>.github.io
, 注意这里也要将更改commit到步骤1里建立的<YOUR-PROJECT>
项目分支中。
大功告成
现在如果你打开https://<USERNAME>.github.io
,则会发现你的页面已经成功部署!