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.com上购买的域名为例,不推荐阿里云和腾讯云,只因为管局备案太麻烦。

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

然后新增或者修改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的静态博客搭建完成,开始养成记录的好习惯吧!