当前博客使用PaperMod主题,使用github托管发布。
源文件仓库位于https://github.com/kanajin/hugo-blog-source
初期学习时提交过多无用commit,望海涵
hugo quick start:https://gohugo.io/getting-started/quick-start/

1. 安装Hugo

可以直接前往Hugo官网下载查看说明

此外各操作系统均可使用包管理器安装

  • Windows:scoop
scoop bucket add extras
scoop install hugo

Linxu与macOS不再赘述

安装成功后使用命令hugo version确认安装情况

2. 建站

使用命令hugo new site <name>来新建一个博客站点,可以在命令中指定博客配置文件的格式,例如

hugo new site myname.github.io                # 配置文件为hugo.toml
hugo new site myname.github.io --format yaml  # 配置文件为hugo.yaml,推荐,yaml格式更加易读

这个命令会在终端的当前目录下新建一个名为myname.github.io的目录,并部署好Hugo所需的资源,目录结构大致如下所示:

$ tree
.
├── archetypes
│   └── default.md  # 文章头部模板,新建博文时会使用这里的文章头部配置
├── assets
├── content         # 用于存放博文
├── data
├── config.yaml     # 配置文件,新版中可能叫做hugo.yaml,本文以config为准
├── i18n
├── layouts         # 存放模板文件,指导Hugo如何将content目录中的markdown渲染成HTML
├── static          # 用于存放静态文件,如图片、CSS、JavaScript 文件等,建议使用git lfs管理
└── themes          # 用于存放主题

9 directories, 2 files

这里要注意站点的名称必须是<自定义英文>.github.io的格式,才能被正确托管

3. 指定主题

Hugo的站点必须安装主题才能够使用,因此需要先挑选一个合适的主题

主题下载站:https://themes.gohugo.io/,或是中文网站:https://www.gohugo.org/theme/。选择好心仪的主题后,根据网站中的引导可以进入主题的GitHub仓库

Hugo站点的主题需要将主题代码目录放进 /themes/目录中,并在 config.yaml 中指定主题,格式为theme: [<theme_name>]

主题的安装方式在主题仓库中均有文档,自行查阅

个人建议的维护主题的方式为: 将主题仓库fork一遍,并在fork仓库中做自己的修改,然后博客站安装自己仓库的主题

4. 配置文件

config.yaml的官方文档

大部分配置是通用的,少数配置参数需要参考主题文档调整。下面是我的部分配置和一些说明

# If your site is in 'https', then make sure your base url isn't written using 'http' otherwise your sitemap would
# contain http (as opposeed to https) URLs. This would affect Google indexing of your URLs.
baseURL: "https://kanajin.github.io"    # 网站域名
title: "Alea jacta est!"    # 网站标题
paginate: 5     # 每页显示的内容项数
theme: [PaperMod]   # 主题

enableInlineShortcodes: true    # 启用内联短代码
enableRobotsTXT: true   # 生成robot.txt用于指导爬虫
buildDrafts: false    # 若文章被标记为“草稿”,则不会发布在网站上
buildFuture: false    # 若文章的发布日期设置在未来,则不会发布在网站上
enableEmoji: true
pygmentsUseClasses: true    # 可以通过CSS设置代码样式
mainsections: ["posts"]     # 生成主页时以/posts/目录下的项目为主
defaultContentLanguage: "zh"    # 设置默认语言

languages:      # 语言配置
  zh:
    languageName: "简体中文"
    weight: 1
    taxonomies:     # 定义分类法,在文章头部可以指定文章的相关分类,Hugo会识别并自动帮你分类
      category: categories
      tag: tags
      series: series
    menu:       # 菜单项配置
      main:
        - name: 归档
          url: archives
          weight: 1     # 权重,越低越靠前
        - name: 搜索
          url: search/  # 主题配置
          weight: 2
        - name: 分类
          url: categories   # 分类法定义的分类
          weight: 3
        - name: 标签
          url: tags     # 分类法定义的分类
          weight: 4

outputs:    # 指示构建网页时应该输出哪些文件
  home:
    - HTML      # 网页基本构成
    - RSS       # 用于订阅
    - JSON      # 用于爬虫

params:     # 为主题配置,需参考主题文档
  env: production
  author: 铃兰怜雪
  ...

5. 构建网站

在项目根目录下执行 hugo 命令可以在本地启动服务器,以下是一些常用命令与解释

hugo server                 # 最常用的命令,采用hugo默认配置构建页面,默认监听 localhost:1313
hugo server -D              # 即使被标记为“草稿”的文章也会被发布
hugo server --bind 0.0.0.0  # 监听0.0.0.0,方便在局域网其他设备上启动服务
hugo                        # 在根目录生成public/目录,将构建的网站内容放进其中
hugo --cleanDestinationDir  # 会先清除public/目录,再重新构建,即清除缓存
                            # 后两个命令不会启动服务

6. 撰写博客

使用hugo new <path/to/article_name.md>可以在/content/path/to/目录生成一个.md文件,用于撰写你的博客

.md文件会自带类似下面的内容:

---
title: "some title"
date: a date
draft: true
tags: ["tag1", "tag2"]
categories: ["categories1"]
description: "some description"
---

具体内容可以在/archetypes/default.md中设定,这个也是上文提到的文章头,请保留。更多设置参考官方文档

使用markdown语法来撰写博文,hugo会帮助你渲染成HTML并发布在站点上。简单的markdown语法规则可以阅读菜鸟教程

7. 由Github自动生成网站并发布

通过Github workflow,可以自动将写好的markdown文件编译成静态网页并发布到Github page,让自己只需要专注写内容即可,可谓一劳永逸

申请Token

由于每次编译网页并托管给Github page都需要验证身份,因此需要先申请一个token,并自动把token传进去做验证

申请token的路径是:github - Settings - 最下面的Developer Settings - Personal access tokens - Tokens(classic)

注意同级还有另一个选项:Fine-grained tokens,并不能用于workflow,不要申请错了

申请会要求你输入一个名字,这里我们假设名字是HUGO_KEY,成功后会给你一个TOKENID,复制并保存好,以后看不到了

写workflow文件

在项目根目录进行操作

$ myname.github.io > mkdir -p .github/workflows/
cd .github/workflows
touch main.yml

在创建的main.yml中输入如下内容

name: Build and Deploy Hugo Site

on:
  push:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          submodules: 'recursive'
          lfs: true

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

      - name: Build Hugo Site
        run: hugo --minify

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.HUGO_KEY }}   # 这里把HUGO_KEY换成你的TOKEN名字
          publish_dir: ./public

完成这些之后,你可以写一篇文章,然后尝试发布

直接push仓库,如果一切顺利的话你的仓库会多一个名为gh-pages的分支,然后在项目的设置里找到Pages,在Build and deployment里面将Branch设置为gh-pages,等一段时间应该就能发布自己的博客了

博客的地址就是https://myname.github.io