博客发布工作流

本文介绍笔者在阿里云服务器上搭建个人博客的过程，目前我发布博客的工作流为：

  • obsidian 编辑博客内容
  • obsidian-linter 插件对内容进行格式化
  • obsidian-github-publisher 插件对文档进行转换，并通过 PR 的形式合并到 我的repo 中
  • 在服务器上通过 Git 拉取内容
  • 使用 Hugo 生成静态网页，并使用其自带 server 进行部署

本文重点介绍后两个步骤，即如何搭建一个基于 Hugo 的博客，以及自定义配置过程。

搭建过程

安装 Hugo

安装比较简单，参考 安装 | Hugo官方文档，需要注意的是不要使用 apt 安装，版本过低导致很多命令和主题不兼容。建议使用 snap 包管理器安装。

新建项目

使用 hugo new site <your_site_name> --format yaml 创建一个名为 <your_site_name> 的网站，Hugo 会新建一个同名文件夹并初始化目录结构，基本结构包含以下目录：

  • archetypes：存放 md 内容的模板文件
  • assets：存放将通过 Hugo 的 Pipes 功能进行处理的文件，如 SCSS 或 JavaScript 文件
  • content：存放网站内容文件，即每篇博文的 md 文件
  • data：存放一些配置文件
  • layouts：存放网站页面的模板文件
  • static：存放静态文件，例如图片等，这些文件在构建时会被复制到 public 目录中
  • i18n：存放翻译文件
  • themes：存放主题

应用主题

以 hugo-PaperMod 主题为例，这里使用 Git 子模块的方式进行安装，更多安装方式见：Install / Update PaperMod | PaperMod

1
2
3
4

cd <your_site_name>
git init
git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
git submodule update --init --recursive # needed when you reclone your repo (submodules may not get cloned automatically)

修改配置文件 hugo.yaml，添加/修改 themes 字段为：

1

theme: ["PaperMod"]

构建部署

运行如下命令，将 <your_ip/domain> 替换为公网 ip 或者域名或者 127.0.0.1（仅能在本机访问）：

1

hugo server --bind="0.0.0.0" --baseURL="http://<your_ip/domain>"

然后打开 http://<your_ip/domain>:1313 就能看到博客了！🎉

自定义配置

添加 Archive

Archive 即博客中的归档、时间线功能，用于按照时间对博文分类管理。
在 <your_web_site>/content/ 目录下新建 archive.md，并添加以下模板内容：

1
2
3
4
5
6

---
title: "Archive"
layout: "archives"
# url: "/archives"
summary: "archives"
---

修改网站配置文件，添加一个归档的菜单，即可通过点击菜单栏上归档按钮进入时间线：

1
2
3
4
5
6

menu:
  main:
    - name: 📦归档
      url: /archive
      weight: 3 # 自定义权重，菜单按照权重从小到大的顺序排列
defaultContentLanguage: zh  # 修改默认语言为中文，在归档界面展示中文

注意，归档中只会对具有 date 字段的博文进行归档，如果归档页面为空，请检查该字段；如果看不到博文标题，请检查是否配置了 title 字段。

添加搜索

搜索也是 PaperMod 官方支持的模块，支持对博文内容、标题、关键字等进行索引。
在 <your_web_site>/content/ 目录下新建 search.md，并添加以下模板内容：

1
2
3
4
5
6
7
8

---
title: "Search" # in any language you want
layout: "search" # necessary for search
# url: "/archive"
# description: "Description for Search"
summary: "search"
placeholder: "支持搜索标题、博文、Tags等"
---

模板中的 placeholder 字段为搜索框的默认展示内容，可以自定义修改。

修改网站配置文件，添加启用搜索所需的配置信息和搜索的菜单按钮：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

# 启用搜索所需的信息
outputs:
  home:
    - HTML
    - RSS
    - JSON # necessary for search

# 搜索的菜单按钮
menu:
  main:
    - name: 🔍搜索
      url: /search
      weight: 1

添加 Tags

Tags 属于 PaperMod 已经默认实现的一个页面，只要在菜单中添加一个指向 /tags 的按钮即可：

1
2
3
4
5

menu:
  main:
    - name: 🏷️标签
      url: /tags
      weight: 2

访问量统计

使用 不蒜子 - 极简网页计数器 对博客和文章访问量进行统计。
首先在 <your_web_site>/layouts/partials/extend_head.html 文件中添加以下内容：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- busuanzi -->
{{- if .Site.Params.busuanzi.enable -}}
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<meta name="referrer" content="no-referrer-when-downgrade">
<style>
    :root {
        --footer-height: 80px
    }
</style>
{{- end -}}

extend_head.html 中的内容会被包含在 <head> 中，因此我们可以在这个文件中引入不蒜子需要的 js 文件。此外，我们还定义（实际上是覆盖）了一个 PaperMod 主题中知识页脚高度的变量，以防止由于多行页脚导致内容溢出一屏。

然后打开配置文件 <your_web_site>/hugo.yaml，增加以下字段以启用计数模块：

1
2
3
4

params:
	busuanzi:
	    enable: true
	hideFooter: true  # 禁用默认页脚

由于 PaperMod 主题默认的页脚样式对于多行页脚支持不完善，因此上述配置还禁用了主题默认的页脚模块。我们将在 <your_web_site>/layouts/partials/extend_footer.html 重写页脚，即向其中添加以下内容：

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

{{- if not (.Param "hideCustumFooter") }}
<footer class="footer">
  {{- if site.Copyright }}
  <span>{{ site.Copyright | markdownify }}</span>
  {{- else }}
  <span>&copy; {{ now.Year }} <a href="{{ "" | absLangURL }}">{{ site.Title }}</a></span>
  {{- end }}
  <span>
    Powered by
    <a href="https://gohugo.io/" rel="noopener noreferrer" target="_blank">Hugo</a> &
    <a href="https://github.com/adityatelange/hugo-PaperMod/" rel="noopener" target="_blank">PaperMod</a>
  </span>
  {{ if .Site.Params.busuanzi.enable -}}
  <div>
  <span id="busuanzi_container_site_pv">
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
  </span>
</div>
  {{- end -}}
</footer>
{{- end }}

上述代码依次添加了版权声明、powered by 和访问量的页脚内容，可根据自己喜好调整，或者添加 IPC 备案号等内容。

接下来添加单篇文章的阅读量。PaperMod 主题中文章都是基于 single.html 这个文件渲染的，因此我们接下来要修改该文件。为了防止对主题文件破坏，我们将 <your_web_site>/themes/PaperMod/layouts/_default/single.html 拷贝到 <your_web_site>/layouts/_default/single.html，并在此文件进行修改（用户目录的文件优先级高于主题目录）。

找到 <div class="post-meta">，这个 div 包含了一篇文章所有的 meta 数据，在其中添加一个表示阅读量 div 即可，即修改后的代码为：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<div class="post-meta">
      {{- partial "post_meta.html" . -}}
      {{- partial "translation_list.html" . -}}
      {{- partial "edit_post.html" . -}}
      {{- partial "post_canonical.html" . -}}
      {{ if .Site.Params.busuanzi.enable -}}
      <div class="meta-item">&nbsp·&nbsp
        阅读量 <span id="busuanzi_value_page_pv">
      </div>
      {{- end }}
    </div>

之后就可以在文章页面看到文章阅读量了。

参考文档