通过Hugo建造博客网站
概述
大家好，因为这个网站的建成，我终于可以在属于我自己的地方写东西了。
但是，在看文章的大家又该怎么办呢？
不用担心！这不，我就把教程放出来了，大家可以通过这个自己动手建造一个博客网站。
不啰嗦了，开始吧。
教程-制作本地网站
材料准备
- 一台搭载任意系统的电脑
- the Internet
- Hugo软件（如果没有请看下面）
- Visual Studio Code软件（或其他任意代码编辑器）
- MarkText软件（或其他能编写Markdown文档的编辑器）
- 能加速Github的任意加速器（如果不需要加速可以跳过）
配置Hugo环境
如果是MacOS或Linux系统且安装了Homebrew包管理器的话，直接在命令行输入
brew install hugo
如果像我一样是Windows系统的话，可以先去Hugo的Github仓库下载Hugo主程序，然后把这个程序放在一个容易记住的目录里（放在你经常安装软件的那个目录就行，建议路径不要有中文名），复制这个目录的绝对路径，
接着右键任务栏上的Windows徽标，点击“系统”，在弹出的设置界面选择“高级系统设置”（没有的往下拉），点击“环境变量”，
在“系统变量”中选中“Path”并点击“编辑”，在弹出窗口中点击“新建”，把刚刚复制的路径粘贴进去，点击“确定”、“确定”和“确定”，
最后，如果你想验证你安装好了没有的话，可以在命令行输入
hugo version
如果你在命令行看到了他的版本号，说明你已经跨过了创建博客网站的第一道坎儿，恭喜你！
创建本地站点
在你想创建站点的上一个目录下打开命令行，或使用cd命令跳转到那里。但是要确保这个目录下没有和你想创建的站点名字一样的目录。即使有也要保证里面什么也没有，否则会出现错误。
然后在命令行里输入
hugo new site your-sites-name
但是
然后你就会发现目录下面出现了很多文件，具体如下
.
│ .hintrc
│ .hugo_build.lock
│ hugo.toml
│
├─archetypes
│ default.md
│
├─assets
├─content
├─data
├─i18n
├─layouts
├─public
├─static
└─themes
现在你已经创建好了本地站点，来看看下一步吧。
选择并加载主题
首先，你需要前往Hugo主题页面相中一个主题，点击那个主题，点“Download”，
在跳转到的Github仓库点击Code按钮，点击"Download ZIP"，
下载解压后，把解压后得到的目录复制到刚刚你创建的站点目录下的themes目录里，
返回上一个目录，找到hugo.toml并打开，在里面按照以下例子来设置
baseURL = "your site's URL" #你网站的网址
languageCode = "en-us" #你网站的语言代码（这里显示了默认值“英语-美国”）
title = "your site's name" #你网站的名字
theme = "the name of the downloaded theme" #你网站使用的主题，直接把刚刚复制到“themes”的目录名字写上去就行
附：语言代码表
创建文章
将命令行跳转到你的站点目录下，输入
hugo new post/theNameOfYourArticle.md
把“theNameOfYourArticle”改成你的文章的名字，
然后打开content，再打开post，使用你的Markdown语言编辑器打开刚刚创建的那个文件，
打开之后显示像这样（只是参考）
---
title : 'theNameOfYourArticle'
date : 2000-01-01T10:00:00+08:00
draft : true
---
此时你就可以在第五行三个减号下面开始编写你的文章了。
如果编写完成，需要把第四行的true改为false就代表你这篇文章发出去了。
启动网站
站点有了，文章也有了，是不是迫不及待想看了？
好，现在再把命令行跳转到你的站点目录下，输入
hugo server
如果看到命令行输出以下信息，你就可以通过localhost:1313/your-sites-name/（命令行倒数第二行显示的那个网址）来访问了。
Watching for changes in ######\{archetypes,assets,content,data,i18n,layouts,static,themes}
Watching for config changes in ######\hugo.toml, ######\themes\######\hugo.toml
Start building sites …
hugo v0.129.0-e85be29867d71e09ce48d293ad9d1f715bc09bb9+extended windows/amd64 BuildDate=2000-01-01T10:00:00Z VendorInfo=gohugoio
| EN
-------------------+-----
Pages | 1
Paginator pages | 0
Non-page files | 0
Static files | 1
Processed images | 0
Aliases | 0
Cleaned | 0
Built in 146 ms
Environment: "development"
Serving pages from disk
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/your-sites-name/ (bind address 127.0.0.1)
Press Ctrl+C to stop
教程-上传到Github Pages
材料准备
- 一台搭载任意系统的电脑
- the Internet
- Hugo软件
- 你创建好的Hugo站点
- Git软件（可以用Github Desktop软件）
- 能加速Github的任意加速器（如果不用加速可以跳过）
创建Github仓库
打开Github官网，创建一个新的存储库，并且创建2个不同的分支（一个存放源代码，另一个存放部署网页），然后把你的站点推送到存放源代码的分支上。
配置Github Actions工作流
在源代码分支创建.github/workflows/deploy.yml文件，用来配置Github Actions工作流，
在这个文件中按照实际输入
name: Deploy to GitHub Pages
on:
push:
branches:
- source # 这里写你存放源代码的分支名字
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout Source Branch
uses: actions/checkout@v2
with:
ref: 'source' # 这里写你存放源代码的分支名字
submodules: true
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
- name: Build Hugo Site
run: hugo --minify --baseURL "https://yourUserName.github.io/yourRepositoryName" # 这里写你想要的网站网址（一般是“https://你的用户名.github.io/这个仓库名”）
- name: Deploy to GitHub Pages
uses: peaceiris/actions-gh-pages@v3
with:
publish_branch: gh-pages # 这里写你想部署到的分支名字
publish_dir: ./public
github_token: ${{ secrets.GITHUB_TOKEN }}
保存，Push。
配置Github Pages
打开存储库，选择“Settings”标签，在左栏中选中“Pages”选项，
在“Branch”栏目将分支选择你定的用于部署的分支（示例中是gh-pages，按实际情况而定），然后点击“Save”，
当点击后页面上显示成功时，你的网页就成功部署到Github Pages上了。
上传文章
在本地，按照上一个教程的步骤4创建文章，编写后提交到源码分支上，
提交好之后，Github Actions会自动部署网站，至此，大功告成！
教程-高阶操作与美化
添加评论系统
当你的博客网站做好之后，你肯定想让其他朋友来看，但是如果你想让他们留言的话，你需要一个外包的评论系统来实现评论。
这里使用我使用的Intensedebate平台来做示范。
首先打开Intensedebate官网，注册一个账号。
然后登录，在页面点击“Install Intensedebate”字样，跳转。
按照提示，输入你的博客网站的网址，点“Next Step”。
按照提示，点击“Generic Install”（因为我们是用Hugo制作的，不是上面列出的任何一个），点“Next Step”。
按照提示，将左边第一个文本框里的代码复制粘贴到你的单篇文章模板（一般是themes/yourThemeDirection/layouts/\_default/single.html）的底部（一般是放在{{ .content }}后面），保存，Push。
然后回到Intensedebate仪表板，设置一些评论规则，根据文档通过CSS美化，至此，大功告成！
添加目录
当你的博客网站做好之后，你肯定想看文章，但是如果你写了一篇很长的文章，而且页面上没有目录，碰巧你想看看中间部分写了什么，你就需要一点一点往下扒，这很容易把你和访问你这篇文章的人气亖，
那么怎么办呢？当然是在你的页面上添加目录啦。
好，话不多说，先上教程：
只需要在你的单篇文章模板（一般是themes/yourThemeDirection/layouts/_default/single.html）的顶部（或者其他你想放的地方也行）添加神秘小代码：
{{ .TableOfContents }}
然后就成了。
什么？你问为什么？
那还不简单？Hugo的Markdown转换器本来就支持目录啊！
但是——在实际情况下，你的H1标题是不会出现在目录里的。
最后你可以在网站目录下的hugo.toml中更改一下目录的显示数量就行了（就是从H2到H6显示多少的意思）
[blackfriday]
toc=true
toc_depth=6
所以至此，大功告成！
{{ .TableOfContents }}就行了。链接外部层叠样式表
众所周知，如果html是一个网站的骨架，那么css就是它的外表，js就是它的灵魂。
那么我们在这里要如何链接css呢？且听我说。
在用Hugo搭建的站点上，我们是不可使用常规方式链接css，因为它实际上需要构建之后才是我们看到的，所以这样链接的css就会移位，到时候出个404你就哭笑不得了。
其实只需要使用Hugo的短代码就行了。
例如：我有一css文件style.css就放在/themes/the name of the downloaded theme/assets/css中，那么你就可以使用以下短代码：
{{ $style := resources.Get "css/style.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" crossorigin="anonymous">
like this，但是——
$style改为不同名字再把路径换一下就行了，例如我分别引用了s1.css，s2.css和s3.css。就按这样写：
{{ $s1 := resources.Get "css/s1.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $s1.Permalink }}" integrity="{{ $s1.Data.Integrity }}" crossorigin="anonymous">
{{ $s2 := resources.Get "css/s2.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $s3.Permalink }}" integrity="{{ $s3.Data.Integrity }}" crossorigin="anonymous">
{{ $s3 := resources.Get "css/s3.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $s3.Permalink }}" integrity="{{ $s3.Data.Integrity }}" crossorigin="anonymous">
至此，大功告成！
卷末语
本期教程到此结束，希望你能通过这里的教程，自己构建一个精美的博客页面，再见。