简介

本文将详细介绍Github搭建个人博客的流程，其中，通过hugo搭建本地服务，托管在Github Pages上，并用Github Action实现了CI/CD，非常方便！
注：本文是以macOS系统来讲解的。

搭建本地服务

Hugo，号称世界上最快的构建网站的框架，凭借其惊人的速度和灵活性，让搭建网站变得十分有趣。下面，我们将安装Hugo，并搭建本地服务。

安装Hugo

推荐使用homebrew方式来安装Hugo，十分简单。

brew install hugo

等待完成，进行验证：

hugo version

创建站点

通过hugo命令来创建一个新的web站点：

hugo new site "博客名"

命令执行完毕，将会创建一个文件夹：

选择主题

推荐两个主题库： Hexo Themes 和 Hugo Themes
你可以自行选择一个喜欢的主题，并通过git submodule add命令安装至theme文件夹下（这里以hugo-theme-cleanwhite主题为例）：

git submodule add https://github.com/zhaohuabing/hugo-theme-cleanwhite.git themes/hugo-theme-cleanwhite

通过命令启动Hugo服务器：

hugo server -t hugo-theme-cleanwhite

在http://localhost:1313/将会看到由主题生成的示例网站。

配置Hugo

config.toml配置文件在根目录下，可根据自身的需求进行修改。可参考hugo-theme-cleanwhite主题下的exampleSite文件夹中的文件。

默认的文章存储在./content/post文件夹下，每当运行Hugo启动服务命令后，Hugo将自动生成静态网站文件至. /public文件夹中，此时我们只需要将新增的文件内容发布在网络上即可。

更详细的配置规则，可参考Configure Hugo 。

写博客

现在我们可以创建一篇文章了。执行下面的命令，会在./content/post文件夹下新增一个名为hello-blog.md的文件：

 hugo new post/hello-blog.md

我们会看到，有默认的数据，将其进行修改后，就可以在下面编写文章了。

本地部署

执行命令，就可以直接通过http://localhost:1313/地址在本地访问并预览网页了。

hugo server -t hugo-theme-cleanwhite

至此，Hugo本地服务已搭建完成。

发布到Github Pages

接下来，我们将搭建好的本地博客托管到Github，以hello-blog.md为例。

前期准备

1、Github账号
2、发布好的本地静态网页文件，即hello-blog.md执行hugo命令后./public目录下的结果。

基本流程

下面我将介绍如何发布到Github Pages。

1、创建新的Github仓库
新建一个public仓库，并命名为username.github.io，其中username必须是github账户名！！！

2、将Github仓库拉到本地
在你指定的目录位置，执行git clone命令，将远程仓库拉到本地。

git clone https://github.com/username/username.github.io.git

3、将静态网页文件添加至Github仓库
将Hugo命令生成的./public文件夹下的所有文件，拷贝至本地仓库，这一步可以手动拷贝，也可以用命令实现。

cp -rf hugo-site/public/* username.github.io/
git add --all
git commit -m "init commit"

4、提交至Github仓库

git push -u origin main

注：git操作，建议使用github客户端来完成，可以省去账号登录的工作。

提交完成后，在浏览器中输入https://username.github.io/，就能看到你的博客了。

配置Github Action实现CI/CD

最后，我们要通过Github Action完成两件事：

1、编译，生成静态网页文件
2、部署，将静态网页文件拷贝到指定的位置

这样一来，我们只需要通过git push命令来触发Github Action就可以了。

前期准备

1、私有库，用于存放博客源码
2、公开库，用于存放静态网页文件（已有，username.github.io）

基本流程

1、创建私有库，配置Github Action
在GitHub，创建一个私有仓库，命名为hugo-blog，并通过git clone命令将仓库拉到hugo-site目录下。

git clone https://github.com/username/username.github.io.git "/hugo-site"

在./hugo-site/.github/workflows/目录下创建一个hugo.yml文件，参考如下：

name: hugo blog
on:
  push:
    branches:
      - main
jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Check out source
        uses: actions/checkout@v2

      - name: Setup hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: "0.104.3"
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN }}
          external_repository: username/username.github.io
          publish_dir: ./public
          publish_branch: main

Github Action包含四个步骤：

• Check out source，拉取代码
• Setup hugo，准备Hugo环境
• Build，使用Hugo编译并生成静态网页文件
• Deploy，部署并发布到Github Pages

注：其中的PERSONAL_TOKEN，在第2步中进行讲解。

2、配置合适的TOKEN 首先，需要生成一个Personal access tokens：

[1] 在GitHub个人主页，以此点击Settings -> Developer settings -> Personal access tokens -> Tokens(classic)，进入如下页面： [2] 点击Generate new token(classic)，在Note中输入名称，如GITHUB_ACTION_TOKEN，在Select scopes选择workflow： [3] 点击Generate token，将生成的token复制，为后续创建secret做准备；
（*** 一定要复制！！！一旦离开此页面，将无法再次查看此值 ***）

[4] 在私有库（hugo-blog）项目下，依次点击Settings -> Secrets -> Actions，进入添加Action secrets的页面，点击New repository secret按钮： [5] 新增secret，Name项输入hugo.yml中设置的PERSONAL_TOKEN，Secret项输入步骤[3]中复制的token值，然后点击Add Secret按钮，即可。
（注：Name的值，不能以GITHUB_开头，否则会创建失败）

至此，整个使用 Hugo + Github Pages + Github Action 方案搭建个人博客的过程已讲解完毕！

结束语

完成上述配置后，当我们写完一篇md文章后，通过git push命令或者Github客户端推送到远程仓库时，将会触发GitHub Action， 按hugo.yml文件配置的工作流自动编译并生成静态网页文件，并推送到Github Pages仓库。当Github Pages仓库更新完成后， 又会自动触发官方页面部署CI，实现网站的自动发布。

以上就是Hugo搭建本地服务、GitHub Pages自动部署和发布，实现了一个完整的自动发布系统，心动不如行动，抓紧用起来吧！

• ← Previous Post
• Next Post →