在 《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账号名一致）。
创建仓库，注意命名规则
仓库建好后，访问 username.github.io，会显示404。因为仓库是空的，啥都没有
3 上传静态网站代码
3.1 hugo生成静态网页文件
在hugo建站文件夹下启动终端（比如此处是my-hugo文件夹），执行hugo指令，会在my-hugo/public文件夹下生成静态网页文件。
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文件夹里面的文件了。
github.io仓库
这时候访问 username.github.io ，就能展现出博客首页。但你可能得到的是一个样式有点异常的页面。
访问博客首页，但样式有点不对头。F12打开控制台，错误提示integrity等
这是因为在
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页面。而不是具体的文章页面。
second子页面
这是因为配置文件hugo.toml的baseUrl没有改成github.io地址。
hugo.toml的baseUrl默认是example域
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
这样就能正确跳转的到子页面了。
second子页面
4 小结
以上简单完成了hugo生成静态页面，然后挂载在github.io上了。
后续我们可以丰富下blog页面，比如增加标签、外链、评论模块等。还可以定制主题等。
网友评论