以前过hexo 和 dukewiki 做过个人学习笔记和Blog，但是部署在树莓派上。因为该死的switch，对，就是玩游戏的那个。当时switch有SD不够用，就把树莓派上的SD卡拿来格式化了（忘记wiki部署在上面），结果所有的笔记全部没有了。这是一个悲惨的教训，所以有了接下来的事情，废话不多说了，直接开始。
先说说我的需求：
1.Blog的内容不会丢失。（利用Github进行托管）
2.运行在自己的服务器上。（为什么要这个呢，因为Github经常被墙或者打不开，总之速度得不到保证）
3.需要支持Markdown。（出于程序员的习惯）
4.编辑Markdown以后能实时更新到Blog上。（我希望随时随地能编辑自己的文章）
根据上面的需求，我想到的办法就是利用Github Action 进行自动部署，然后通过Hugo 将Markdown生成成为静态页面。
注意：我们有一个前提条件，你需要有一台自己的VPS
在Github上创建一个仓库
这个不用教了，太简单，反正第一件事情就是先把这个仓库建好。
Hugo的使用
安装Hugo
第一步就是在自己的VPS上安装Hugo，安装Hugo的方式有很多，如果是ubuntu系统执行下面命令就可以安装。
sudo apt install hugo
不过系统自带软件源中的hugo版本不一定是最新的，可以通过官方Release下载自己对应的最新版本。
https://github.com/gohugoio/hugo/releases
部分主题生成HTML，需要Sass/SCSS支持，这个时候要安装hugo_extended包，否则安装hugo包就好了。
安装Hugo
wget https://github.com/gohugoio/hugo/releases/download/v0.76.5/hugo_0.76.5_Linux-64bit.deb
dpkg -i hugo_0.76.5_Linux-64bit.deb
安装Hugo Extended
wget https://github.com/gohugoio/hugo/releases/download/v0.76.5/hugo_extended_0.76.5_Linux-64bit.deb
dpkg -i hugo_extended_0.76.5_Linux-64bit.deb
利用Hugo创建一个自己的站点
执行命令,最后一个参数是站点的名称，这里就直接叫blog
hugo new site blog
创建好以后可以进入到目录下，可以看到下面这些目录
$ cd blog
$ ls
archetypes config.toml content data layouts static themes
将blog变成一个git项目
git init
选择hugo主题
我们用docsy 作为主题,其它主题可以到Hugo的官网自己下载。执行下面命令通过submodule命令将主题作为仓库的子模块。
git submodule add https://github.com/google/docsy.git themes/docsy
git submodule update --init --recursive
先使用主题默认的配置作为站点配置，关于详细的配置可以到主题自行去研究。
cp themes/docsy/userguide .
运行Hugo
执行下面命令就能运行hugo了。
hugo server -D
会看到以下信息，表示运行成功。
Start building sites …
| ZH
-------------------+-----
Pages | 44
Paginator pages | 0
Non-page files | 2
Static files | 38
Processed images | 3
Aliases | 1
Sitemaps | 1
Cleaned | 0
Built in 310 ms
Watching for changes in /home/micro/blog
archetypes,assets,content,layouts,package.json,themes}
Watching for config changes in /home/micro/blog/config.toml, /home/micro/blog/themes/docsy/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
打开浏览器访问 http://localhost:1313 可以看到自己的网站了。
最后将代码提交到Github仓库中。
Github CI/CD
Github CI/CD 可以通过 Gitlhub Action来完成。
安装Github Runner
打开自己的Github上的项目，在项目的Settings->Actions中，拖到页面的最后面，有一项Self-hosted runners，我们在这里点击Add runner按钮。会跳转到Github Runner的安装页面，页面上有相关的安装教程。
然后我们下载安装，并且在自己的服务器上将这个程序运行起来。Github Runner配置的时候需要指定一个token通过这个token就能将它和自己的项目绑定在一起了。
配置Action Workflow
配置好Runer以后需要我们在自己的项目中配置工作流，比如我们想配置在提交代码以后让Gitlhub Action触发我们服务器上的Github Runner获取最新的代码，并执行Hugo的发布过程。
在项目的.github目录下创建一个hugo.yml文件。
mkdir .github
touch hugo.yml
hugo.yml的内容如下
name: hugo
on:
push:
branches: [ master ]
pull_request:
branches: [ master ]
jobs:
build:
runs-on: self-hosted
steps:
- uses: actions/checkout@v2 #获取最新代码
with:
submodules: recursive
- name: npm install
run: |
# Install npm dependencies
npm install
- name: Build HTML #生成HTML代码
run: |
rm -rf public/
HUGO_ENV="production" hugo --gc || exit 1
上面是Github Action的配置，表示当在master分支提交代码的时候，触发self-hosted主机，也就是我们自己的服务执行setps里面的命令。其中npm install是docsy主题特有的。
这里有一个地方需要特别注意：通过actions/checkout@v2获取代码需要将服务的sshkey配置到Github仓库的对应的Deploy Keys中。否则它会通过Github Rest Api获取代码，获取的代码不是git项目，无法进行submodule 的操作。
添加Deploy Keys 在项目的Settings->Deploy Keys进行。
完成上面操作以后，提交代码可以在项目的Actions中查看工作流，确保没有问题。
当工作流执行成功，我们可以在Gitlab Runner的安装目录下看到_work/blog/blog/public目录，这里就是生成的html代码。
最后利用Nginx作为http服务器，就能访问网站了，同时所有更新提交的文档都能实时部署到网站上。
