关于使用 GitHub Pages 和 Hugo 搭建静态博客的教程。
注:这篇文章是从旧的博客系统中迁移过来的、我觉得还存在价值的文章。但是由于时间关系,可能已经不再是最佳实践,请仅作参考。
确确实实感觉记性越来越差,有记录包括“问题解决方法”、“配置文件修改”等信息的需求了,但同时也希望一切从简,听从V友建议选用 Hugo+GitHub Pages 免费搭建个静态博客来做树洞吧。
环境:Windows 10 64 位
需要时间:1 小时左右
原教程:CSDN Windows 下搭建 Hugo 博客
1、下载 Hugo
在 https://github.com/gohugoio/hugo/releases 地址下找到Windows压缩文件下载
如下图 64 位的:

2、添加至环境变量
新建 Hugo 和 Hugo/bin 文件夹,将下载下来的 .exe 文件放入 bin 文件夹,并添加至环境变量中。

3、验证 Hugo
hugo version

检测是否安装成功,安装成功后进入 Hugo 文件夹中,输入
hugo new site myblog
myblog 替换成想要的博客文件夹名字。

4、项目结构
可以看见项目结构:content 文件夹存放内容,themes 文件夹用来存放主题,config.toml 用来配置文件,这也是这次初步建立需要博客需要改的内容。

5、挑选主题
在 https://themes.gohugo.io/ 选择自己喜欢的主题进行下载,这次我使用 hugo-theme-m10c 这款主题,因为选择它避免配置 config.toml 文件而花费大量时间。



6、下载主题
Cmd 进入博客文件夹下,执行以下命令把 GitHub 上的主题文件 Clone 到对应文件夹下 themes/m10c
git clone https://github.com/vaga/hugo-theme-m10c.git themes/m10c


7、本地构建
此时就已经在本地运行博客做确认了,执行:
hugo server -t m10c --buildDrafts
启动项目,然后前往 http://localhost:1313/ 就可以看到了。


8、新建一篇博客
使用 Hugo 很大程度上就是看中了它将 .md 文件渲染成静态博客页面的能力,即使是发布完成后,原稿也可以保存方便脱机查看。
首选 Ctrl+C 结束本地的预览,然后新建博文对应的 .md 文件。
hugo new post/blog.md
新建的 .md 文件会存储在 content/post 中,直接前往进行编辑即可。

9、编辑博文
推荐使用 VS Code 进行编辑,左上角的预览按钮,点击后可以将窗口分为左右两部分用于查看实施效果。
注意:draft: true 需要改为 draft: false 图中并未做修改,如果不修改就是草稿,不会在博文页面上显示内容!


写完后直接 Ctrl+S 保存即可。
10、再发布、检查新博文
再次本地启动项目,可以看见已经有对应的博文了。至此,本地博客环境就算配置完成了。
hugo server -t m10c --buildDrafts

11、创建 GitHub Pages 仓库
GitHub 为每个账号提供了一个免费的空间来存储静态的 HTML、JS 和 CSS,而我们就可以借此来发布博客。
首先去新建仓库,注意命名,这是 GitHub 辨别是否为网络空间的依据。
仓库名需满足 账户名.github.io 的命名规范,然后点击绿色的 create 按钮进行创建。

我因为已经部署完成,因此这里显示重复创建。
12、生成 public 目录
创建完成后,回到 myblog 博客目录,执行以下命令来生成 public 目录,也就是 GitHub 仓库所需的静态博客的文件。(后续都用的原博客的图,路径可能有偏差,都是基础的 Git 操作)
hugo --theme=m10c --baseUrl="地址" --buildDrafts


13、Git 提交
进入 public 文件夹,将所有文件添加、提交到本地。
git init
git add.
git commit -m "附言"

14、Git 推送
将本地 public 与 GitHub 进行关联后,进行推送,第一次推送会需要输入 GitHub 的账号密码。
git add origin http://github.com/m1801823/m1801823.github.io.git
git push -u origin master


15、检查 GitHub 页面
等待推送完成后,刷新 GitHub 页面,对应的文件就上传上来了,这时候输入 http://账户名.github.io 就可以访问了

16、DNS 解析
如果自己有域名的话,也可以配置 DNS 直接让域名解析到你的静态博客上,方便告诉好友你的博客网址。
这里以在 Namecheap 上购买的域名为例,不推荐阿里云和腾讯云,只因为管局备案太麻烦。
首先选择已有域名进入管理面板。

然后新增或者修改 DNS 解析记录,对应以下修改即可,只需要把 CNAME Record 的 Value 修改成你的地址即可。

最后回到 GitHub 的仓库部分,选择 Settings,拉到 Custom domain 部分修改成你的域名保存。


大概 5 分钟左右,域名就会解析到你的博客,在开始的几天是不支持 HTTPS 的,只能先用 http://你的域名 进行访问。

之后如果 HTTPS 加密可用,则需要更改一下模板,在 head 部分加上
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
来自动将 HTTP 的不安全请求升级为 HTTPS,否则可能出现 CSS 等加载不出来的情况。

至此基于 Hugo 和 Github Pages 的静态博客搭建完成,开始养成记录的好习惯吧!