从零开始搭建个人博客网站系列 二、把Hugo个人站点托管到Github Pages上

推广

背景

使用个人博客也有一年多的时间，这一年多的时候踩了很多坑，也学到了很多知识。
这里分享一个系列教程：从零开始搭建个人博客，把我的经验分享在这里。
系列地址：https://techxiaofei.com

把Hugo个人站点托管到Github Pages上

上一篇文章，我们学习了怎么搭建个人博客，但是只是在个人电脑上运行，现在我们要把博客部署到互联网上让其他的用户能够访问到你的个人博客网站。
如果你没有自己的云服务器，不要慌，我们可以把个人博客搭建在Github Pages中，就跟搭建在自己的服务器一样。
Github Pages是Github提供的一个静态网站托管服务，可以用于存放静态网页，包括博客，项目文档甚至整本书。非常适合我们搭建个人博客。

创建Github Pages

要想把个人博客托管在Github Pages上，首先你需要有一个Github账号，作为程序员，应该每个人都有自己的Github账号。

下面我介绍下怎么部署在Github Pages上：
假设你需要部署在 GitHub Pages 上，首先在GitHub上创建一个Repository，命名为：{your_username}.github.io. 比如我的Repo就叫 codingxiaoma.github.io。
如果你对你的username不满意，需要先在Setting->Account->Change username修改一个你满意的username。
注： Repository的前缀一定要跟你的username保持一致。

Repo的权限需要选择Public, 否则无法访问。
勾选Add a README.md，主要是为了自动创建main分支。

然后在你的 仓库 xx.github.io 里面点击Settings, 左边的菜单栏找到Pages。

可以看到Your site is live at https://codingxiaoma.github.io/

你的Github Pages就自动部署好了。点击Visit Site就可以看到你的网站了。

因为我们的仓库是空的，所以网站也是空的。

下面还可以改主题。但是因为我们需要绑定到hugo上，所以直接使用hugo的主题就可以了。

搭建Hugo站点

这个在上一篇文章里面有讲解：如果有疑问可以回顾上一篇文章。 从零开始搭建个人博客（一）- 使用hugo搭建个人博客

hugo站点和目标文件

现在我们有了Hugo个人站点，有了Github Pages，那么下一步就是把hugo博客发布到github。这样我们才能在互联网的任何地方访问我们的博客。
在我们本地的hugo根目录中执行 hugo 指令。会生成一个public文件夹，我们只需要把public的文件夹上传到github上刚才创建的Github 仓库里面, 一分钟左右，就能正常查看博客内容。

这里解释一下

• hugo站点（hugo根目录）：这个是源文件，也就是你写Markdown的地方，可以不用提交到github，也可以选择在github上创建一个新的repo，并提交。
• public文件（hugo/public）：这个是目标文件，是使用hugo指令生成的发布HTML内容，可以在浏览器浏览的格式，需要推送到Github上然后发布到Github Pages静态网站上。

我们的hugo站点是源文件 （带主题，图片，markdown源文件），public是目标文件（最终生成的css/js/html文件）。我们最终网页上展示的是目标文件，所以需要使用hugo指令生成目标文件。

发布博客到Github Pages

在任意hugo站点外（是为了以后把hugo源文件也上传到github，git是不能有层级的，所以要放在站点外），直接用git clone把创建好的github仓库克隆下来。

git clone git@github.com:codingxiaoma/codingxiaoma.github.io.git

然后把public里面的所有内容复制到这个Git仓库并执行：

1
2
3

git add *
git commit -m "first commit"
git push

即可成功把内容push到远程仓库。

复杂一点但是方便的办法 为了不要每次改动都手动复制，我们可以创建一个public目录和github 仓库的软链接。 (需要先删除public目录)

1
2
3
4
5
6
7

# 进入你的hugo根目录

# 删除public文件夹
rm -rf public

# 前面是 github.io仓库的本地目录，后面是 public文件夹的本地​目录
ln -s /Users/hugo/codingxiaoma.github.io /Users/hugo/codingxiaoma/public

然后在hugo站点使用hugo指令，就会自动在public软链接也就是git repo下生成目标文件。
最终执行git add/commit/push之后，打开
https://codingxiaoma.github.io/
就能看到博客内容。 (可能有几分钟延迟，耐心等待)。

如果git push提示没有权限：

ERROR: Permission to left-pocket-test/left-pocket-test.github.io.git denied to left-pocket.
fatal: Could not read from remote repository.

Please make sure you have the correct access rights

那就在Github上添加一下ssh key就好了。

在电脑上生成ssh key：

1
2
3
4

# mac command
cd ~/.ssh

ssh-keygen -t rsa -C "xxx@xxx.com" # 填写你的邮箱地址

然后一路 Enter到底（不需要填路径和密码，全部默认值就好）。就会在 ~/.ssh/ 目录生成默认的文件:

• id_rsa 私钥
• id_rsa.pub 公钥

生成成功后，把id_rsa.pub 也就是公钥的内容copy到github上即可。

1. cat ~/.ssh/id_rsa.pub 并复制
2. 登录github，Settings->SSH and GPG Keys->add SSH Key.

shell脚本一件编译并提交到github 在任意目录复制下面的指令并点击return执行。

1
2
3
4
5
6
7

echo "#\!/bin/sh" > hugo.sh
echo "cd /Users/hugo/hugo/ && hugo" >> hugo.sh
echo "cd /Users/hugo/codingxiaoma.github.io" >> hugo.sh
echo "git add *" >> hugo.sh
echo "git commit -m \"first commit\"" >> hugo.sh
echo "git push" >> hugo.sh
chmod a+x hugo.sh

执行完会生成一个hugo.sh的脚本，它会帮你执行编译+提交git的操作。

以后每次只需要到这个目录执行 ./hugo.sh即可。

发布源文件到Github

注意： 如果只是发布到github pages上，源文件没必要上传，public也就是目标文件放在github上的codingxiaoma.github.io仓库即可。

但是考虑到本机电脑里面的硬盘损坏或者丢失等风险，可以考虑把源文件也上传到github的另一个新的仓库。

同时上传到github上也方便多人协作。

源文件对最终的展示效果没有影响，只是为了方便保存。我个人创建了一个单独的hugo仓库来保存源文件。

1. 在Github创建一个空的Repo（不要勾选Add README.md） 创建完会提示你怎么使用指令把本地内容上传到Github

2. 在源文件目录下执行指令 github会提示你执行哪些命令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

echo "# codingxiaoma.github.io" >> README.md

git init

git add *

git commit -m "first commit"

git branch -M main

git remote add origin git@github.com:codingxiaoma/codingxiaoma.git

git push -u origin main

t 这个时候你的源文件就上传到Github的一个新的仓库codingxiaoma了。这是用来保存源文件的。而codingxiaoma.github.io是用来保存网站的目标文件的。

<全文完>

视频教程

本篇博客的视频教程首发于 Youtube：科技小飞哥，加入 电报粉丝群 获得最新视频更新和问题解答。