安装Go

Go安装地址，下载相应版本的Go安装器，按步骤安装即可。

安装Hugo

去Hugo的Github上下载，hugo_extended版的压缩包，然后解压到指定目录，并将Hugo执行文件所在目录加入到Path环境变量中。 在终端中执行以下命令判断Hugo是否安装成功：

1

hugo version

创建Hugo Site

1

hugo new site yoursitename

安装Hugo-Vitae主题

  1. 切换至站点的themes目录并将hugo-vitae添加为当前工程的子模块
1
2

cd themes
git submodule add https://github.com/dataCobra/hugo-vitae
  1. 将hugo-vitae的exampleSite config.toml 复制到根目录稍作改动

创建文章

1

hugo new post/first.md

运行Hugo Server

1

hugo server

创建GitHub仓库

创建GitHub仓库时需要注意仓库名称必须为：yourgithubusername.github.io

使用GitHub Actions自动部署

  1. 创建部署用的Token
  2. 在刚刚创建的仓库的设置中添加 Secrets
  3. 在仓库下创建文件 .github/workflows/gh-pages.yml
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

name: github pages

on:
  push:
    branches:
      - main  # Set a branch to deploy

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.HUGO_TOKEN }}
          publish_branch: gh-pages  # 推送到当前 gh-pages 分支
          publish_dir: ./public # 推送生成的public文件下的内容到 gh-pages 分支
          commit_message: ${{ github.event.head_commit.message }}
# 开始部署到VPS上的工作流
      - name: Cache Private Key
        uses: webfactory/ssh-agent@v0.4.1
        with:
          ssh-private-key: ${{ secrets.BLOG_DEPLOY_KEY }}
      - name: Scan public keys
        run: ssh-keyscan zling.site >> ~/.ssh/known_hosts
      - name: Deploy To VPS
        run: rsync -av --delete ./public root@zling.site:/data/caddy/site/hugo-web

自动部署至腾讯云

前提条件，在CVM上已安装好Caddy

基本思路是：通过rsync将生成的静态内容复制到VPS上

  1. 生成无密码的密钥
ssh-keygen -t ed25519 -f ~/.ssh/blog_deploy_key
  1. 将生成的公钥内容添加到VPS上
~/.ssh/authorized_keys

  1. 将生成的私钥内容添加到项目的Secrets中，命名为 blog_deploy_key

  2. 工作流文件中使用 webfactory/ssh-agent 实现私钥的缓存

- name: Cache Private Key
  uses: webfactory/ssh-agent@v0.4.1
  with:
    ssh-private-key: |
      ${{ secrets.BLOG_DEPLOY_KEY }}
  1. 工作流文件中还使用 ssh-keyscan 命令扫描 VPS 的公钥并保存到虚拟环境的 ~/.ssh/known_hosts 中
- name: Scan public keys
  run: |
    ssh-keyscan your_vps_ip_or_domain >> ~/.ssh/known_hosts
  1. 部署到VPS
- name: Deploy
  run: |
    rsync -av --delete public ./public root@your_vps_ip_or_domain:/data/caddy/site/hugo-web
  1. Caddyfile配置
blog.zling.site {
    root * /srv/hugo-web/public
    file_server
}

注意：VPS上也要安装 rsync

Hugo用法

创建文章

hugo new posts\xxx.md

删除文章

hugo delete posts\xxx.md

使用 MathJax 支持数学公式

layouts/partials/mathjax.html文件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

{{ if .Params.math }}
<script>
  MathJax = {
    tex: {
      inlineMath: [["$", "$"]],
    },
    displayMath: [
      ["$$", "$$"],
      ["\[\[", "\]\]"],
    ],
    svg: {
      fontCache: "global",
    },
  };
</script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script
  id="MathJax-script"
  async
  src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
></script>
{{ end }}

博文页面头加入以下内容

---
math: true
---

使用默认的 KaTex 显示数学公式

行内数学公式

$ E=mc^2 $

这是内嵌$ E=mc^2 $效果

单独一行

$$E=mc^2$$

$$E=mc^2$$