1 前言
之前也说了，我是用的Github Page加Hugo的方式搭建的博客，其实还有很多比如jekyll、hexo等部署静态网站的工具；而托管的服务器方面，有的大佬选择直接自己租一台，还有一些途径我就不多说了。
github pages直接托管在github上，比较方便所以很多人都用的这种方式，不过要求至少要会一点git控制命令，git相关教程我记得放在bookmarks里了，真正常用也就那么几个语句，比较容易上手。而之所以选择hugo纯粹是因为朋友推荐，我搭好了之后看有的hexo主题写的特详细，顿时有点后悔，觉得自己走了很多弯路，不过hugo也是很好用的虽然网上资料可能不是太多。
接下来我就详细叙述下这个博客的建立的过程，我也是萌新有些地方具体的原理可能不太清楚，不过只要搭的像个样子不就行了。
2 步骤
2.1 安装 hugo、git、nodejs
用hugo部署网站一般先是在本地调试，通过hugo server命令可以在浏览器http://localhost:1313 查看效果，然后用git将文件传到github里；nodejs是之后给网页加一些模块脚本要用的，用的机会不是很多。具体的安装步骤我觉得就没必要讲了，百度一下一大把的东西，又不复杂。
2.1.1 常用的Git命令
克隆远程库： git clone+目标库网址\
（如git clone https://github.com/chengpengzhao/latex_htm_zcp ）添加远程库： git remote add origin+目标库网址，若提示失败在前面用 git remote rm origin 命令。
同步到本地库：git pull origin master ，这个时候再使用命令：git push -u origin master 就能将本地库的内容推送到远程仓库；加上了-u参数，Git不但会把本地的master分支内容推送的远程新的master分支，还会把本地的master分支和远程的master分支关联起来，在以后的推送或者拉取时就可以简化命令。下一次直接使用 git pull 或者git push.
本地修改完进行同步：
git add -A (注意下add各参数的意义)
git commit -m “your message”
git push origin master
2.2 hugo的文件夹结构
如图hugo一般是这些文件夹（除了node_modules）加上一个config.toml配置文件（还有些文件是我后来写的上传东西用的脚本）。
archetypes：放模版文件？这个我真不知道有啥用，具体看hugo文档肯定有说明
content：写的文章都放这里面，md格式，要写博客markdown语法必须要先学一学
data：我的是空的，不知道干嘛的
layouts：十分重要！网页的结构全在里面，各种html代码
public：用hugo生成网页后的文件，把这些上传到github里就够了，所以通常在public文件夹里面建立.git项目。
resources：我的是空的
static：有三个文件夹，css里面放字体文件，img放图片，js放网页加载时所用的脚本。
themes：下载后的主题放在这里面，不过我一般把主题自己修改后里面的东西挪到layouts和static里，所以我这里面也是空的。
config.toml：配置文件，一般每个主题都会说明下这个文件怎么写。
推荐先在本地把网站安排好了再上传，不然改来改去很麻烦。
2.3 下载hugo主题
https://themes.gohugo.io/上可以找到很多好看的主题，仔细阅读所选主题的相关说明，把它下载到本地，把各个文件夹里的东西放到hugo的相应文件夹里，然后用hugo命令在本地查看效果。一般主题都会有一个exampleSite，可以看看里面config.toml设置和文章的格式。（必须先熟悉hugo文件夹结构后再进行这一步）
hugo server启动后网页(localhost1313)显示的内容会随着你的修改实时变动，所以在写博客时十分好用，这也是hugo的一大优点吧。
2.4 熟悉所下载主题的模块
如果你想要自己对主题做一些修改，比如加入评论系统啊、显示来访数、动态效果、搜索功能……那就必须经过最苦逼的这一个步骤了，把主题layouts和static里的文件一个个的啃一遍，知道每个文件大概实现了什么功能。一般好一点的主题都会说明一下它有哪些模块，怎么加入一些常用模块；总之在这方面花的时间应该是最多的。
建议把这部分放在最后进行，或者干脆不做修改直接拿他的主题用也行。下面我简单分类介绍下我博客中这几个模块添加的艰辛历程：
2.4.1 访问计数模块
我用的是不蒜子网页计数器，这个还比较简单，layouts文件夹里相应的html位置加入代码就行。
2.4.2 评论模块
由于在国内，某些评论系统被墙不好用，我用的是Valine的评论系统，也是在相应的html中插入代码；这里要注意页面的格式设置，可能会造成字体、方框大小不太合适，这时候要在css文件中修改格式。常采用开发者工具先找到控制对应字体的文件位置，再做相应修改。
2.4.3 搜索模块
我的主题自带了对algolia搜索模块的支持，所以注册、设置下来没有花太多功夫，这个好像还要装到本地，然后每次写了posts之后要用npm run algolia命令更新索引目录。
2.4.4 数学公式模块
Mathjax没得说。
2.4.5 特殊效果模块
可以加入一些动态背景效果（比如像我这样），或者甚至你可以加一个live2D的看板娘。
3 总结
不要在意具体的细节，知道代码的作用、大体的框架、实现的方式，然后进行粗略的调整就行了。如果把这些代码看成是一个个贴了标签的黑盒，那么对于我们这些非专业人士来说，读懂标签就够用了。