Windows 下 Hugo + GitHub Pages 搭建静态博客

确确实实感觉记性越来越差,有记录包括“问题解决方法”、“配置文件修改”等信息的需求了,但同时也希望一切从简,听从V友建议选用 Hugo+GitHub Pages 免费搭建个静态博客来做树洞吧。


环境:Windows 10 64 位
需要时间:1 小时左右
原教程CSDN Windows 下搭建 Hugo 博客


1、在 https://github.com/gohugoio/hugo/releases 地址下找到Windows压缩文件下载,如下图 64 位的。
64位

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

3、在 Cmd 中输入

hugo version

检测
检测是否安装成功,安装成功后进入 Hugo 文件夹中,输入

hugo new site myblog

myblog 替换成想要的博客文件夹名字。
新建

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

5、建完文件夹后先去挑选主题,在 https://themes.gohugo.io/ 选择自己喜欢的主题进行下载,这次我使用 hugo-theme-m10c 这款主题,因为选择它避免配置 config.toml 文件而花费大量时间。
挑选博客
进入github页面
复制git地址方便clone

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 图中并未做修改,如果不修改就是草稿,不会在博文页面上显示内容!
vscode
vscode预览
写完后直接 Ctrl+S 保存即可。

10、再次本地启动项目,可以看见已经有对应的博文了。至此,本地博客环境就算配置完成了。

hugo server -t m10c --buildDrafts

博文

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

创建仓库
我因为已经部署完成,因此这里显示重复创建。

12、创建完成后,回到 myblog 博客目录,执行以下命令来生成 public 目录,也就是 GitHub 仓库所需的静态博客的文件。(后续都用的原博客的图,路径可能有偏差,都是基础的 Git 操作)

hugo --theme=m10c --baseUrl="地址" --buildDrafts

public
路径

13、进入 public 文件夹,将所有文件添加、提交到本地。

git init
git add.
git commit -m "附言"

git提交本地

14、将本地 public 与 GitHub 进行关联后,进行推送,第一次推送会需要输入 GitHub 的账号密码。

git add origin http://github.com/m1801823/m1801823.github.io.git
git push -u origin master

git关联
git推送

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

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

首先选择已有域名进入管理面板。
域名管理

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

最后回到 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 的静态博客搭建完成,开始养成记录的好习惯吧!