Hugo结合github-page(github.io)建站

2023-06-18 本文已影响0人 celineWong7

在《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属性导致的。

1. 临时解决方案：简单粗暴的删除该属性。这种方式有点饮鸩止渴，每次生成静态页面都要去修改一下。而且子页面也要一个一个去修改。放弃。
1. 彻底解决方案：修改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页面，比如增加标签、外链、评论模块等。还可以定制主题等。