博客 on MowMark的个人博客

使用 Terminal 主题美化博客

Fri, 22 May 2026 09:12:24 +0800

承接上一篇文章: 使用 GitHub Pages 部署博客, 这篇文章我将分享使用 Terminal 主题美化博客的个人经验. 由于个人精力有限, 可能有一些地方并没有涉及到, 欢迎讨论交流.

Hugo 配置文件的基本要求

在正式开始之前, 我们需要先梳理 Hugo 主题的基本结构, 而这又绕不开 Hugo 项目的核心机制: 配置文件的覆写机制

配置文件的覆写机制

简单来说, 在新版Hugo中, config/_default/目录下的配置文件优先级大于根目录下的配置文件大于主题目录(themes/)下的配置文件, 此外, 主题目录如果随 Git 自动更新, 我们在里面做的任何修改都会被直接覆盖. 基于这两点, 如果我们要修改主题的配置, 就不能在主题目录下进行, 而要在根目录或者 config/ 目录下操作.

配置文件的基本要求

除此之外, 配置文件的格式, 内容和作用域也需要厘清一下:

Hugo 早期要求配置文件名字应该为 config, 后来变成了 hugo, 目前版本是两种名字都可以接受, 而格式则可以为 yaml, toml 或者 json 当中的任意一种;
Hugo 支持将所有配置信息都写在同一个文件中, 也可以拆分开来, 作为不同的配置文件, 但名称必须为 params, menu 或者 languages 已经规定好的一级目录;
Hugo 项目的全局配置控制整个网站的样式, 如网站主标题, 导航菜单, 默认语言等, 这些信息都存储在 hugo.toml 或者从中拆分出来的配置文件里, 可能存放在根目录或者 config/ 目录下;
写在每篇文章头部的 Front Matter 控制这篇文章的元数据, 如标题, 日期, 标签等, 其优先级高于全局配置. 在使用 hugo new ... 命令新建文章时, Hugo 会根据存放在 archetypes/ 目录下的文章模板, 自动创建新文章的 Front Matter.

基于上述几个理由, 读者在使用不同主题时, 有可能会在根目录或者 config/ 目录下看到不同类型的配置文件

Terminal 主题的配置

Hugo 官方对主题结构没有严格规定, 所以每个主题的组织方式都不太一样, 以下内容基于 Hugo Extended v0.161.1 和 Terminal 2024-11-22, 仅供参考.

复制初始文件

使用 git submodule ... 命令安装好主题后, 将 themes/terminal/exampleSite/ 目录下的文件复制到根目录, 作为配置的初始模板. 作者给出的默认配置相当长, 但实际上大部分参数保持默认即可, 只有少数几个参数需要留意.

修改配置文件

打开根目录的 hugo.toml:

baseurl = "https://<Your-UserName>.github.io/" # 改成你的实际域名
languageCode = "zh-cn" # 当前 Hugo 规定的语言代码, 中文用户记得改这里
theme = "terminal"
paginate = 5

[params]
 # 这个参数对应 content/ 目录下存放文章的文件夹名称
 # 如果你的文章放在 content/blog/ 下，这里就要改成 "blog"
 # 不改的话首页会加载不出任何文章，是比较容易踩的坑
 contentTypeName = "posts"

 # 首页显示的菜单项数量，超出的部分会折叠进右上角
 # 如果你想让页面干净一点，设成 0 也没问题
 showMenuItems = 2

实际修改主题文件

前面提到不能在主题目录里改文件, 那如果我们确实需要修改主题的某个模板, 应该怎么做?

以修改页脚为例. 假设你想在底部加上备案号, 或者就是单纯不喜欢默认的版权格式, 直觉上可能会去 themes/terminal/layouts/partials/footer.html 里改, 但这样做下次主题更新就会丢失.

正确的做法是:

在根目录下创建相同的路径 layouts/partials/;
把 themes/terminal/layouts/partials/footer.html 复制到这个目录下;
修改根目录下的这个副本.

Hugo 在构建时会优先读取根目录下的 layouts/ 目录, 主题里的原版文件不会被动, 下次更新主题也不会影响你的改动. 其他模板文件的修改方式都是一样的道理.

小结

这篇文章到这里基本就结束了. Terminal 主题本身并不复杂, 配置文件改几个参数就能跑起来, 真正需要花时间理解的反而是 Hugo 本身的复写机制, 这个搞清楚了, 后续不管换什么主题, 修改起来都会顺手很多.

如果读者想要使用 Stack 主题, 后面我会更新相关文章, Stack 主题的结构比 Terminal 复杂不少, 需要花费比较多的时间进行调试.

使用 GitHub Pages 发布个人博客

Tue, 19 May 2026 22:01:19 +0800

承接上一篇文章: 使用Hugo创建个人博客, 在本地搭建好环境后, 本文将告诉你如何将博客手动以及自动化发布到公网.

网络发布基础配置

想要将网站发布到公网, 需要满足三个条件: 代码托管平台, 服务器(托管服务)以及域名.

出于性价比与便利性, 本文采用 GitHub 仓库 + GitHub Pages (免费托管) 的一站式方案, 并使用 GitHub 提供的免费域名.

补充信息: 上面三个条件中, 代码托管平台有GitHub, GitLab和Gitee等平台, 域名可以从 GitHub, 腾讯云, 阿里云等平台获取, 而托管服务则可以由 GitHub Pages, Cloudflare Pages, 腾讯云和阿里云提供, 后两者用的人不多, 喜欢挑战自己的伙伴可以尝试部署一下.

创建 GitHub 仓库

首先, 登录你的 GitHub 官网, 新建一个仓库.

这里有一个相当重要的命名规则:

如果你希望博客最终的访问域名是简单的https://<Your-UserName>.github.io, 那么仓库的名称必须命名为<Your-UserName>.github.io.

如果你随便起了个名字 (例如my-blog), 那后续的访问域名就会是https://<Your-UserName>.github.io/my-blog.

权限请务必选择 Public(公开), 否则 GitHub Pages 无法免费提供服务. 更多信息可以查看 GitHub Pages 说明.

将本地代码推送到 GitHub

在上一篇文章中, 我们已经在本地项目目录执行过了 git init. 现在, 我们需要将本地内容推送到刚刚创建的 GitHub 远程仓库.

首先, 配置 Git 用户信息 (如果之前没配置好全局账号):

git config user.email <Your-EmailAddress>
git config user.name <Your-UserName>

提示: 加上 --global 参数可以进行全局配置, 配置信息存放在 ~/.gitconfig 文件里. 局部配置则存放在项目隐藏文件 .git/config 中.

接下来, 将本地文件提交并推送到远程仓库:

# 在项目根目录下:
# 将所有文件加入暂存区并提交
git add .
git commit -m "Feat: 博客首次初始化"

# 关联远程仓库 (请将下面的链接替换为你的仓库地址)
git remote add origin https://github.com/<Your-UserName>/<Your-Repository>.git

# 将本地代码推送到远程仓库的 main 分支
git push -u origin main

提示: 关于这个部分, 有非常多的教程会倾向于先在本地运行 hugo 命令生成静态网页 (放在 public/ 目录下), 再把 public 文件夹 push 到 GitHub 仓库. 这种做法相当繁琐, 每次发布文章都需要本地编译. 所以这篇文章我们采用了另外一种做法: 将包含 .md 原稿的整个项目源码推送上去, 让 GitHub Actions 帮我们在云端自动部署并发布.

部署博客网站

配置 GitHub Pages

进入 GitHub 仓库, 点击顶部的 Settings, 在左侧栏找到 Pages.

在 Build and deployment（构建和部署）板块下, 将 Source 的选项从默认的 Deploy from a branch 改为 GitHub Actions.

创建自动化部署工作流

我们需要在项目根目录下创建一个特定的文件, 告诉 GitHub 每当有代码推送时该怎么做.

在项目根目录下执行:

vim .github/workflows/hugo.yaml

将以下 官方推荐的配置代码 粘贴到你的文件中, 根据需要更改分支名称和 Hugo 版本:

# 自动将 Hugo 站点部署到 GitHub Pages 的示例工作流
name: Deploy Hugo site to Pages

on:
 push:
 branches:
 - main # 推送到 main 分支时出发

 workflow_dispatch: # 允许在 Actions 页面手动触发

permissions:
 contents: read
 pages: write
 id-token: write

concurrency:
 group: "pages"
 cancel-in-progress: false

defaults:
 run:
 shell: bash

jobs:
 build:
 runs-on: ubuntu-latest
 env:
 HUGO_VERSION: 0.141.0 # 建议填入本地使用的 Hugo 版本
 steps:
 - name: Install Hugo CLI
 run: |
 wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
 && sudo dpkg -i ${{ runner.temp }}/hugo.deb
 - name: Install Dart Sass
 run: sudo snap install dart-sass
 - name: Checkout
 uses: actions/checkout@v4
 with:
 submodules: recursive # 确保拉取主题子模块
 fetch-depth: 0
 - name: Setup Pages
 id: pages
 uses: actions/configure-pages@v5
 - name: Install Node.js dependencies
 run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
 - name: Build with Hugo
 env:
 HUGO_CACHEDIR: ${{ runner.temp }}/hugo_cache
 HUGO_ENVIRONMENT: production
 TZ: America/Los_Angeles
 run: |
 hugo \
 --gc \
 --minify \
 --baseURL "${{ steps.pages.outputs.base_url }}/"
 - name: Upload artifact
 uses: actions/upload-pages-artifact@v3
 with:
 path: ./public

 # Deployment job
 deploy:
 environment:
 name: github-pages
 url: ${{ steps.deployment.outputs.page_url }}
 runs-on: ubuntu-latest
 needs: build
 steps:
 - name: Deploy to GitHub Pages
 id: deployment
 uses: actions/deploy-pages@v4

保存后, 将这个文件推送给 GitHub:

git add .
git commit -m "添加 GitHub Actions 部署脚本"
git push

推送完成后, 点击 GitHub 仓库顶部的 Actions 标签, 会看到一个正在转圈的任务, 等状态变成绿色的勾✅, 你的网站就已经成功发布到公网上了!

访问你的域名(https://<Your-UserName>.github.io 或者 https://<Your-UserName>.github.io/<Your-Repository>)看看吧!

到目前为止, Hugo 搭建并初始化个人博客的基本步骤就已经写完了, 如果读者对网站的样式没有特别要求, 其实现在已经完全可以开始写文章了.

如果对 Terminal 主题不是特别满意的, 欢迎移步我的下一篇文章: 使用 Terminal 主题美化博客.

如果想要使用 Stack 主题美化博客的, 我后续会更新相关文章, 敬请关注!

使用 Hugo 搭建个人博客

Wed, 13 May 2026 20:53:02 +0800

前言

由于学业原因, 最近一直在Ubuntu下学习SLAM算法以及开发, 有相当多操作学了又忘, 忘了再学. 为了打破这个循环, 我决定写一个个人博客进行技术沉淀与知识巩固, 顺便作为一个经验分享与交流的地方.

第一篇文章, 就从如何搭建个人博客开始!

博客搭建

本质上, 搭建博客就是部署一个轻量化的个人网站, 如果要求不高, 完全可以使用博客园、CSDN 等现成的内容平台, 但作为一个喜欢折腾的人, 我更希望能够拥有一个自己的独立站点.

技术方案对比

目前主流的独立博客方案大概分为两派：传统动态 CMS（如 WordPress、Halo）和 静态站点生成器（如 Hugo、Hexo）。由于静态站点不需要维护数据库，部署成本极低（甚至免费），我最终锁定了后者。

常见的静态框架对比如下：

框架	底层语言	编译速度	特点与优势
Hugo	Go	极快 🚀	上手快，零依赖，适合喜欢专注内容写作的人
Hexo	Node.js	中等	中文社区庞大，插件丰富，但环境配置略繁琐
Astro	Astro.js	快	现代前端新宠，组件化强，适合有一定前端基础的玩家
VitePress	Vue/Vite	快	Vue 生态，文档风格利落，非常适合做技术文档

由于我对复杂的前端开发不太感冒, 且相对看重编译速度和本地环境的纯净度, Hugo 成为了我的首选。

环境准备与依赖安装

Hugo依赖于Go语言, 但从v0.121.0起, Hugo已内置了Go工具链, 且包管理器能够自动处理依赖, 所以不管是手动安装二进制包还是使用包管理器安装的用户, 都可以跳过 Go 语言的安装部分 (除非需要安装其他依赖 Go 语言的软件)

但是后续的代码托管与发布一定离不开Git, 因此, 在安装 Hugo 之前, 我们必须先准备好Git, 已经安装好了的读者则可以跳过这个部分.

提示: 以下部分网站可能需要科学上网环境, 请自行准备所需工具.

安装Go语言

Windows系统: 打开Go 官网, 下载*.msi安装包, 一路 Next 即可. 如果习惯使用包管理器Scoop或者Chocolatey, 也可以通过执行以下命令来安装

scoop install go
# 或者
choco install golang

Linux系统: 官方推荐使用snap安装, 会自动处理依赖, 该步骤可跳过.

安装Git

Windows系统: 前往Git 官网, 根据系统架构下载合适的安装包, 运行即可. 或使用包管理器:

winget install Git.Git
# 或者
scoop install git
# 或者
choco install git

Linux系统: 根据你的发行版执行对应命令:

# 基于Debian
sudo apt update && sudo apt install git
# 基于Fedora
sudo dnf update && sudo dnf install git
# 基于Arch
sudo pacman -Syu git

搭建 Hugo 博客环境

安装 Hugo 本体

与上面类似, 我们依然可以通过安装包或者包管理器安装 Hugo, 需要注意一点, Hugo本身不带样式, 需要安装主题, 而部分主题依赖于Extended版的Hugo, 所以在这一步中, 推荐安装Extended版本的Hugo

Windows环境: 前往Hugo的Git仓库, 下载Extended版本的Hugo即可. 或使用包管理器快速安装:

winget install Hugo.Hugo.Extended
# 或者
scoop install hugo-extended
# 或者
choco install hugo-extended

Linux环境: 使用snap安装

sudo snap install hugo --channel=extended

安装完成后, 在终端里运行hugo version, 只要输出版本号信息, 就说明大功告成!

初始化项目

找一个合适的目录, 进入终端执行以下命令:

hugo new site my-blog
cd my-blog
git init

此时, Hugo 已经生成了标准的目录结构:

my-blog/
├── archetypes # 文章默认模板
│   └── default.md
├── assets/ # 资源目录
├── content/ # 博客文章存放目录 ← 最重要
├── data/
├── hugo.toml # 主配置文件 ← 最重要
├── i18n/ # 语言翻译
├── layouts/ # 自定义布局, 优先级高于主题
├── static/ # 静态资源(图片, 字体等)
└── themes/ # 主题目录

9 directories, 2 files

安装与配置主题

Hugo 本身不带样式, 需要安装主题. 这里以极简风格的Terminal主题为例:

将主题作为 Git 子模块引入(强烈推荐这种方式, 方便后续更新):

git submodule add https://github.com/panr/hugo-theme-terminal.git themes/terminal

接着, 打开根目录下的hugo.toml配置文件, 指定我们刚刚安装的主题, 并顺便修改一下基础配置:

baseURL = "http://localhost:1313" # 沿用默认的本地调试地址
defaultContentLanguage = "zh-cn" # 博客语言
title = "MowMark 的技术博客" # 你的博客名称
theme = "terminal" # 必须与 themes 目录下的文件夹名称一致

到这一步, 博客的底层搭建已经完成了99%

本地预览

在项目根目录下执行:

hugo server -D # -D 参数表示渲染草稿文章(draft: true)

-D 参数表示渲染草稿文章(draft: true)

hugo server 对应的常用参数还有 --port 端口号, --baseURL 域名等, 具体参数可以查看hugo server

打开浏览器, 访问http://localhost:1313, 就能看到个人博客已经在本地成功运行了!

当然, 在本地运行是不够的, 如何将它部署到公网上, 让所有人都能访问?

这就需要用到GitHub Pages 和自动化的构建工具了. 由于篇幅原因, 这部分内容我会在使用GitHubPages部署博客中讲解.