前几天学习操作了一下如何用hugo＋GitHub Pages搭建个人博客，今天在这里记录总结一下。
首先，GitHub Pages 和 Hugo 分别是什么呢？
-
GitHub Pages 是一个静态站点托管服务，直接将个人、组织或项目的页面托管于 GitHub 库或仓库 (repository) 中。
-
Hugo 是一个用 Go 语言编写的静态站点生成器，它针对速度、易用性和可配置性进行了优化，快速灵活。
接下来，就是一步一步地为自己搭建一个博客。
以下步骤以在 macOS 上的操作为例，其它操作系统类似，可能会有一些工具和命令有区别。
一、新建一个 GitHub 库。
1.打开GitHub官网，登陆/注册一个账号。
GitHub官网：http://github.com
2.新建一个 GitHub repository，库名为
username
.github.io，username 即你的 GitHub 账号 username。如下图,由于我已经创建了该名称仓库所以报红，但是其实就是这样的格式写仓库名，然后直接点击新建即可。
二、安装hugo
打开终端，深入如下命令行进行hugo安装
brew install hugo
等待下载后，输入如下命令行检查安装成功与否，出现版本号即成功。
hugo version
三、新建一个hugo网站，并根据官网提示进行配置。
1.新建一个目录在装载该站点。然后打开终端，通过cd进入到该目录，例如我放在桌面的hugo文件夹里面
即cd ~/Desktop/hugo
2.执行以下命令行创建hugo网站
hugo new site blogName
blogName就是你想创建的网站文件夹的名称，例如我的是xiaocaotx.github.io-creater,所以我执行的命令行为hugo new site xiaocaotx.github.io-creater
3.选择hugo主题并下载到本地
1）打开 Hugo Themes 页面，选择一个你喜欢的主题。
Hugo Themes: themes.gohugo.io
2）将所选主题克隆至本地目录。下面以选择 Tranquilpeak 主题为例，但是推荐用默认主题，因为它的其他主题会导致一些bug
cd xiaocaotx.github.io-creater # 进入网站目录，用你的网站目录名替换 "xiaocaotx.github.io-creater"。
mkdir -p themes # 创建 "themes" 目录。
cd themes # 进入 "themes" 目录。
git clone https://github.com/kakawait/hugo-tranquilpeak-theme.git tranquilpeak # 将 Tranquilpeak 主题克隆至 "tranquilpeak" 目录。
4.编辑配置文件
-
在网站文件夹的根目录下，我的就是xiaocaotx.github.io-creater，使用 Visual Studio Code 打开
config.toml文件。 -
参考所选 Hugo 主题的配置说明，编辑
config.toml文件。
注意：theme配置项指的是所选主题的名称，必须与所选主题被克隆至的目录名相同。在本例中，即theme = "tranquilpeak"。
至此，hugo网站新建和配置已完成。
四、新建一篇文章，并进行博客编写
-
进入网站文件夹的根目录。
cd xiaocaotx.github.io-creater
-
使用以下命令新建一篇文章。
hugo new post/第一篇博客.md # "第一篇博客.md" 是新建文章的文件名。
然后编辑新建的文章，添加内容并保存。
五、预览本地网站网站效果
-
启动 Hugo server。
hugo server -D
-
使用浏览器打开 http://localhost:1313 预览。
-
如果你对预览效果满意，进入下一步。
-
如果不满意，进行修改，再次预览。
六、构建public目录
在 Hugo 网站文件夹的根目录下，执行 hugo 命令来构建。
hugo
然后Hugo 会将构建的网站内容默认保存至网站根目录的 public/ 文件夹中。
七、在public目录下新建.git文件，将其构建git库
-
用vscode打开xiaocaotx.github.io-creater，在其目录下新建.ignore文件，并将/public/写入其中，使外面的仓库忽略public目录，此操作防止.git目录嵌套
-
进入
xiaocaotx.github.io-creater /public目录，初始化 Git 库。cd /public # 生成的 HTML 文件保存在 "public" 目录中 git init # 初始化 Git 库。
-
查看
public目录下的文件，检查.git文件。ls -a # 显示所有文件和目录列表，包含隐藏文件。
八、将本地git库关联到远程GitHub库
- 进入你的GIthub账号，打开前面创建的repo,复制链接，选择自己的格式，这里我使用的是ssh格式
-
在
public目录下，为 Git 本地库添加远程库。输入git remote add origin +链接git remote add origin git@github.com:xiaocaotx/xiaocaotx.github.io.git
-
查看
config文件。cat .git/config # 显示 config 信息。
如果没有报error，即为成功。
九、提交本地修改，并推至远程仓库
1）在 public 目录下，通过 commit 提交修改，并写一个 commit message 来简洁描述你的修改。
git status # 查看当前修改状态。
git add . # 添加所有修改过的文件。你也可以只添加某个文件。
git commit -m "Add a new post" # "Add a new post" 是 commit message.
2）在public 目录下，将修改推至远程库。
git push -u origin master
由于此次是第一次提交，需要加-u ,后续只需要 git push即可。
十、设置GitHub-page显示html，并****根据GitHub Pages生成的个人博客链接来访问自己的博客。
1）进入上面新建的github项目库，点击settings进入设置界面
2）进入到以下位置，点击使用github-page来显示html,然后通过生成的链接即可访问你的博客了。
至此，博客新建和显示的整个过程完成，后续更新博客的话，只需要重复四、五、九操作即可。然后同样通过链接即可查看和分享自己的博客。
