使用Hugo搭建个人博客

安装Hugo

在Github releases页面下载安装最新版本。 例如下载*.deb文件然后使用dpkg -i *.deb安装。

或者使用官方文档安装：【安装方法】

第一步：创建所需Repo

在Github创建两个Repo，创建时皆勾选Add a README file选项：

• Blog源文件仓库：存储网页源文件，用于生成博客网站。（参考命名：blog-resources）
• Pages仓库：用于保存所生成的网页文件，并可通过网址进入博客。（命名需按照：<username>.github.io，其中<username>为Github账户名。【官方说明】）

第二步：使用Hugo命令创建博客文件

源文件仓库名以blog-resources为例。

1. 克隆blog-resources到本地。
2. 进入blog-resources路径中，使用Hugo命令创建网站整体文件夹结构hugo new site <blog-name>，替换<blog-name>为你需要的，例如woods-blog。
3. 此时repo文件结构以及它们的主要用途如下：

    1├── README.md           # 创建Repo时自动天剑的README
    2└── woods-blog          # 博客文件夹名，与上一步使用hugo创建的一致
    3    ├── archetypes
    4    ├── config.toml     # 博客网站自定义配置文件，需要进一步编辑
    5    ├── content         # 博客内容文件夹，存放博客文档，图片等
    6    ├── data
    7    ├── layouts
    8    ├── resources
    9    ├── static
   10    └── themes          # 主题文件夹，需要进一步安装Hugo主题
   

第三步：添加主题文件并配置

1. 浏览Hugo主题并选择。
2. 主题介绍部分一般带有安装方法，可以按照该方法进行安装。但我在安装一些主题过程中总遇到错误。此处以我选择的主题Mainroad进行介绍。
3. 进入博客文件路径blog-resources/woods-blog，以git submodule方式添加主题文件。

   1git submodule add https://github.com/vimux/mainroad.git themes/mainroad
   

4. 若添加成功，此时在blog-resources/woods-blog/themes下会出现该主题文件名为Mainroad。

   1└── themes 
   2    └── Mainroad         # 此处为所安装的主题名
   

5. 在blog-resources/woods-blog/themes/Mainroad/exampleSite中，复制文件夹content，static，和文件config.toml到blog-resources/woods-blog下，并覆盖原有文件。
6. 配置blog-resources/woods-blog/config.toml文件，主要需要查看的关键词如下：

   1# 确认url为所创建Pages Repo网址，其形式如下，结尾带`/`
   2baseurl = "https://<username>.github.io/"
   3# Theme 为所安装的主题名字
   4theme = "mainroad"
   

第四步：测试博客并发布为HTML

1. 启动Hugo server：hugo server，登录网址http://localhost:1313/预览博客主题。
2. 若需要添加博客文档，可在blog-resources/woods-blog/content下创建新的.md文档进行测试，Hugo server会实时更新以预览。
3. 发布博客为HTML网页，在blog-resources/woods-blog/路径下使用命令hugo。
4. 若发布成功，此时在路径blog-resources/woods-blog/下会多一个文件夹public用于保存HTML网页文件。

第五步：将HTML文件推送到Pages仓库

1. 进入blog-resources/woods-blog/public路径，将该文件夹设置为Pages仓库：

   1# 初始化为新的Git仓库
   2git init
   3# 创建main分支
   4git checkout -b 'main'
   5# 将Pages仓库的SSH添加为到本地
   6git remote add origin git@github.com:<username>/<username>.github.io.git
   

2. 推送本地文件到仓库：

   1# 同步本地与远端的commits
   2git pull --rebase origin main
   3# 添加本地所有的改变
   4git add .
   5# 添加commit以及相关描述信息
   6git commit -m "commit information, e.g. add blog template"
   7# 推送到远端仓库
   8git push origin main
   

3. 浏览器键入网址以浏览博客https://<username>.github.io/，可能需要等待几分钟。

后续

推送blog-resources仓库至Github。

参考

• 如何用 GitHub Pages + Hugo 搭建个人博客。