在 《Hugo在windows安装教程》中,我们已经能通过
hugo server
在调试环境下打开博客页面了。接下来我们期望能结合github-page,把网站架设在github-page上,让小伙伴们可以通过 username.github.io来访问我们的博客。
1 申请github账号
注册账号就不多说了,直接进入官网 https://github.com/,注册个账号即可。
2 创建 username.github.io仓库
注册账号后登录github,然后根据 https://pages.github.com/ 上的指引,建立一个username.github.io仓库(注意:username需要和github账号名一致)。


3 上传静态网站代码
3.1 hugo生成静态网页文件
在hugo建站文件夹下启动终端(比如此处是my-hugo文件夹),执行hugo
指令,会在my-hugo/public文件夹下生成静态网页文件。


3.2 关联gihub.io仓库
进入public文件夹,把改文件夹初始化为git仓库并关联我们前面创建的username.gitub.io的远程仓库。
因为要上传代码到github仓库,需要事先做一下SSH配置,请按照 Github之SSH连接配置 教程,先做一下SSH连接配置。
这部分涉及一些git操作指令,建议先阅读下 GIT操作 之 常用指令(入门级) ,初步了解下git指令。
# 1. 进入public文件夹
cd public/
# 2. 初始化当前文件夹(此处就是public文件夹)为一个本地git仓库
git init
# 3. 关联远程仓库。
# 远程仓库地址(git@github.com:username/username.github.io)
# 可以进入github官网的username.github.io仓库-Code-SSH进行复制。(详见下图)
git remote add origin git@github.com:username/username.github.io
# 4. 把当前文件夹的所有文件加入到暂存区
git add .
# 5. 把相关文件提交到本地仓库
git commit -m "add hugo-test"
# 6. 把相关文件推送到远程仓库(github pages仓库)
git push origin master

执行完上面的一系列操作后,我们可以看到username.github.io仓库里面就有我们本地public文件夹里面的文件了。

这时候访问 username.github.io ,就能展现出博客首页。但你可能得到的是一个样式有点异常的页面。

这是因为在
public/index.html
引入样式文件(css文件)时,多了一个integrity属性导致的。
- 临时解决方案:简单粗暴的删除该属性。这种方式有点饮鸩止渴,每次生成静态页面都要去修改一下。而且子页面也要一个一个去修改。放弃。
- 彻底解决方案:修改
hugo.toml
配置项。
如下新增一行配置。(参考主题官网的FAQs的解决方案)
image.png
- 彻底解决方案:修改
注意:修改配置文件后,要重复操作上面的hugo生成静态文件和git上传代码等。
# 回到上一层目录(public文件夹的上一级目录)
cd ..
# 生成静态页面(即更新public文件夹内容)
hugo
# 进入public文件夹
cd public
# git操作三部曲
git add .
git commit -m "update hugo.toml"
git push origin master

但当你点击博客首页标题【Second】的时候,会进入如下example Domain页面。而不是具体的文章页面。

这是因为配置文件hugo.toml的baseUrl没有改成github.io地址。


修改配置文件后,再一次重复上面操作。
- 终端要退回到my-hugo文件夹重新
hugo
指令生成public文件夹; - 然后终端
cd public
,继续操作git指令操作的4-6步骤提交变更代码。
# 回到上一层目录(public文件夹的上一级目录)
cd ..
# 生成静态页面(即更新public文件夹内容)
hugo
# 进入public文件夹
cd public
# git操作三部曲
git add .
git commit -m "update hugo.toml"
git push origin master
这样就能正确跳转的到子页面了。

4 小结
以上简单完成了hugo生成静态页面,然后挂载在github.io上了。
后续我们可以丰富下blog页面,比如增加标签、外链、评论模块等。还可以定制主题等。
网友评论