Hugo + Github配置个人博客搭建指南

写在前面

正如我前文所说，我在整个的搭建过程中还是踩了不少的坑，究其原因，就是因为太怕麻烦，结果变得更加麻烦，反而浪费时间。

所以授人以鱼不如授人以渔，我想在我写的教程里尽量将可能出现的问题和原因都写清楚，也算是对今天这一天不务正业的总结。

应该是详细的，不详细的话，只能不详细了。。。

希望你已经安装了git

安装hugo

感觉没啥好说的，但还是说一说把。

安装hugo的方式很多，根据个人电脑的不同环境，可以跟着官方文档安装。

受限于魔法，我所有的安装都是采用下载压缩包，解压配置路径再使用的，可能比较适合那些同样受限于魔法的人，也不一定，毕竟总归是要有魔法才能配置在GitHub上面的，反正我情况特殊，结合自身情况这是最适合我的方法，教程只是参考，一定不要跟着无脑操作。(切记！切记！)

这一步可以参照网上很多人的文档，最推荐官方，链接如下
https://github.com/gohugoio/hugo/releases

选择对应的压缩包版本，这里注意一下有extend的区别，我看了一下，extend只是多了一些可以自己操作的东西，新手还是建议老老实实的。

下载好压缩包之后，不论你是解压到哪里，都需要配置路径才能使用，因此一般推荐安装在除C盘之外的盘，例如我放在D盘中，新建一个文件夹Hugo，将解压的内容放进去，你可以看到最主要的其实就是一个.exe的二进制文件(意味着人家已经编译好了，我们直接拿来用就可以)，并将源文件夹的名字修改为bin。

解释一下，为什么要改文件夹名字？
–> 为了添加环境变量

为什么文件夹的名字是bin？
–> “约定俗成”，二进制的英文是 binary ，取前三个字母，其实没有什么特殊的含义，你要高兴，取你自己的名字都行，只要把.exe文件添加进环境变量就行

什么是环境变量？
–> emmmn，好问题，详细的无法解释，粗略一点，只有程序被添加到环境变量中后，才能被我们的操作系统识别并调用。

如何添加环境变量？
–> 请善用搜索引擎，有很多写得超级详细

当你添加好环境变量之后，可以打开cmd(命令提示符)，输入hugo version，显示版本信息后就说明安装成功了。(写到这里突然意识到，第一步或许是安装git比较好…)

使用hugo

假设，你已经安装好了git。

嗯，我们已经完成了第一步安装hugo，接下来就是使用的问题，然而当你直接点那个.exe文件时，嗯，才发现点不动

因为它的使用方法有点特殊

首先，我们最好在Hugo这个文件夹下，在bin的旁边再新建一个文件夹，我给它的名字sites，同样的，你完全可以取其他名字，没有影响。

文件夹sites的用处？
–> 为了方便折腾，你可以在这个文件夹下新建n多个站点，给他们不同的配置，看一下能产生什么奇妙的东西。当然，你说我只想建一个站点，那也是完全可以的，可以选择不创建这个文件夹。

点进/sites文件下，(在你已经安装了git的情况下)，直接右击鼠标，选择使用git bash那个选项进入命令行界面：

命令行是什么？
–> 一种操作工具，用户可以通过输入命令来完成各种各样的系统或程序操作，相比起图形界面而言，因为直接面向操作系统，其可操作性更强。

创建新站点

站点什么意思？
–> 草率的理解成一个新的网页界面，，，草率的

hugo new site my-site
//
cd my-site

//my-site文件的结构如下
my-site/
├── archetypes/
│   └── default.md
├── assets/
├── content/
├── data/
├── i18n/
├── layouts/
├── static/
├── themes/
└── hugo.toml         <-- site configuration

写累了，快速记录要点。

remember：现在所有的操作都在本地，还没有与github的远程仓库产生任何交集

在这个框架下，最主要的是对hugo.toml，themes/的配置，创建的所有.md文件都放置在content/文件夹下，所有文章的图片都放在static/下面。

配置themes/

一个好看的主题是必要的，但是完全自己去写就太麻烦了，hugo中有很多精美的主题，比较方便的操作是在Hugo项目目录里面使用Git命令来克隆themes：你需要提供主题的 Git 仓库 URL。通常，主题的仓库 URL 可以在 Hugo Themes 官方网站或主题的文档中找到。

git clone https://github.com/author/theme-name.git themes/theme-name

或者直接下载主题的压缩包，将其解压到themes/文件夹下，这样的话，就需要你对hugo.toml文件进行一点过的修改。

配置hugo.toml

好多教程里面直接就说会生成config.yml文件，但事实上新版的都是生成的hugo.toml，这不免让第一次配置的人感到迷惑，这两种的使用都是可以的，只是在语法结构上会有区别(类似于c++和python)，如果你想要完全自己手搓，按照你喜欢的语言就好，如果像我一样，只想点点鼠标，那就主要观察你下载的themes里面它使用的是什么，跟着用就行。

例如，我下载的主题是PaperMod，其提供的范例里面用config.yml替代了hugo.toml，所以在使用时，可以直接将范例中的文件替代掉你创建的站点下的hugo.toml文件，并在里面进行一定的修改：

theme = "my-theme"
// my-theme是你下载的theme的主题名，要和你解压的文件名一致

例如我的主题解压后的名字是：

那么在config.yml中，我需要将上面的代码修改为

theme: hugo-PaperMod-master//(这里是因为.yml和.toml写法不同，意思是一致的)

最好的配置方法，我觉得是，参照theme的官方文档，用hugo server让本地将网站运行着，边看边改。

添加md文件

hugo new content/posts/my-new-post.md

这里提醒一下，如果安装了vscode或者其他的IDE，在里面打开来写md文件是相当舒服的，强烈推荐。

一些常用的.yml语法有：

//封面图片的使用
cover: 
    image: /pic/1.jpg
    caption: '封面'
//标签
tags: 
    - tag

//文章插入图片
![本地图片](images/my-image.png)
//远程图片插入
![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)

生成网站

需要注意的是，虽然我们做了这么多，但是在这个结构下(在 my-site这个结构下)，我们网站的页面实际上是还没有生成的，要想生成静态网站页面，必须运行如下命令

hugo

命令运行后，在上文提到my-site这个结构下会产生一个public/文件夹，里面保存生成的静态页面，后面将其在GitHub上面布置，实际上就是将public/中的内容远程推送到Github仓库中后进行展示。

hugo server

可以在本地预览你生成的网站

推送到Github

在GitHub上创建一个仓库

命名很有讲究，仓库的名字要与你自己的名字一致。

在public文件夹中创建仓库

git init
git add.
git commit -m "备注"

这个仓库用于储存生成的静态页面的版本信息。

将两个仓库链接起来 超级重要！！！

使用ssh链接,稳定性很高，
坑：ssh链接如何设定，可以参考这个

// 创建一个分支
git branch -M main
//使用 git remote add 命令将远程仓库添加到仓库配置中
git remote add origin https://github.com/your-username/your-repo.git
//使用 SSH 连接后，可以使用 SSH URL 推送到 GitHub 仓库
git remote set-url origin git@github.com:your-username/your-repo.git
//推送文件
git push -u origin main

设置GitHub page 页面

将其布置在page上面，有一些需要修改

其他需要注意的地方

推送的文件过大时，需要自己去action那里找到pages-build-deployment选项，选择重新构建。

后续提交问题

//在站点中运行
hugo

//进入public/文件夹下
cd public/

//提交文件

git add .

git commit -m "备注"
//推送到远程：在ssh已连接的情况下
git push -u origin main

---------9.15 未完待续。