闲来无事，倒腾博客

历史篇

你们 CLI 确实比 GUI 有点素质

要论计算机人的典中典，还得是n年不更新只有寥寥几篇文章的 Hexo 博客。它代表着命令行初学者的兴奋，第一次配 node 环境成功后的喜悦，以及一个月之后的疑问：

这点屁事我为什么不发秋秋空间/微博？
只有我看我为什么不记 Onenote/Notion ？
想要流量我为什么不发知乎/简书/西埃斯弟恩……？

尽管从现在看仿佛是前朝遗老，个人博客依旧是不存在于中文互联网中的极少数高质量中文内容。它代表着 RSS ，代表着永远不用担心跑路和审查，是 geek 们的精神自留地。

但是👴还是觉得发一篇博客敲好几条命令麻烦的要死。大概是👴不再年轻了，👴开始追求简单安逸，像挨了锤的牛一样。于是👴最终选用 Gridea ，一个博客客户端，可一键推送到 Github Page。这玩意有些不太趁手的地方，等👴闲来无事的时候搞一搞二次开发……

然而，👴还没等到闲来无事的时候，发觉Gridea作者弃坑了。。。其客户端（electron害人不浅）编辑体验差，git更新老出毛病。作者现在只更新web端，托管到他的云服务下面。👴还是更相信github不会跑路，所以👴还是赶紧跑路吧。于是：

你们 JS 确实比 Go 有点素质

于是👴最终选用 Hugo 做博客，因为与 Hexo 相比 Hugo 的运行速度和空间占用都十分轻量。最重要的是，作为 Go 开发的项目，可以直接下载可执行文件，不需要恼人的配环境环节。👴看中了 Stack 主题，但是这个主题用的人不少，有些千篇一律的尴尬。为此👴决定深耕换皮之道……

原理篇

Hugo 项目结构

1
2
3
4
5
6
7
8
9


├── archetypes          # .md 模板
│   └── default.md      
├── config.toml         # 配置文件
├── content             # 在这写东西
├── data                # 更多配置文件
├── layouts             # .html 模板
├── public              # 渲染好的网站
├── static              # 静态文件，hugo会全部复制
└── themes              # 博客主题

content

这里是 Hugo 的输入，存放.md格式的文章。使用hugo new命令时，会尝试从archetypes目录寻找对应的模板，模板通常仅包含front matter，定义了文章的元属性。语法如下：

hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>

content中的子文件夹称为 sections ，它们是网站内容的基本分块。分块的目的是分配不同的处理方式，如post需要展示文章列表，page仅展示单独页面等。配置中的permalinks项就是以分块为单位分配URL。

public

这里是 Hugo 的输出，存放完整的 HTML 静态网页。使用hugo命令时，会尝试从layouts目录寻找对应的模板， HTML 模板均以 GO 模板语法编写。在写文章时也可使用模板来避免写 HTML 的繁杂，如 Hugo 提供的各种 shortcode 。

以 Github Page 为例，部署时仅需将这个文件夹同步至 github.io 仓库即可。

Hugo 设计理念

【To be continued】翻译翻译官方文档

开发篇

如何优雅的二次开发？

观察theme的内容，会发现除了没有content目录之外和网站根目录结构完全一致。由此猜测，所谓theme也是一个 site，使用theme就是用其模板覆盖我们的网站。

那么，直接修改theme目录里的内容自然可行，但如果需要升级主题，则会产生许多讨厌的merge问题。如何实现数据和配置的解耦？实际上，上述关于覆盖顺序的猜想并不准确，实际顺序是：本地模板→主题模板→默认模板。故而，在本地模板中添加相同路径下的同名模板文件，即可覆盖掉主题模板的配置。

以 Stack 主题为例，其在许多位置都存在着诸如hugo-theme-stack\assets\scss\custom.scss的空白文件，只需要在根目录新建\assets\scss\custom.scss即可添加对 CSS 的改动。

一般来说，仿照主题提供的demo网站即可满足一般的二次开发需求。关于模板查找顺序还有诸多细节，请参阅官方文档：Template lookup order。

article元信息：lastmod，wordcount

Hugo 本身为每篇文章都统计了相关变量，但 Stack 主题没有展示。从F12定位到相关元素，其模板在：\themes\hugo-theme-stack\layouts\partials\article\components\details.html

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


    <footer class="article-time">
        {{ if $showDate }}
            <div>
                {{ partial "helper/icon" "date" }}
                <time class="article-time--published">
                    {{- .Date.Format ("2006-01-02") -}} &nbsp;published
                </time> 
                {{- if ne .Lastmod .Date -}} 
                <time class="article-time--published">
                    {{- .Lastmod.Format ("2006-01-02") -}} &nbsp;last modified 
                    {{- end -}}
                </time> 
            </div>
        {{ end }}

        {{ if $showReadingTime }}
            <div>
                {{ partial "helper/icon" "clock" }}
                <time class="article-time--reading">
                    {{ T "article.readingTime" .ReadingTime }}
                    <span class="post-word-count">, {{ .WordCount }} words</span> 
                </time>
            </div>
        {{ end }}

注意！！！

{{- .Date.Format ("2006-01-02") -}}里的日期绝对不能改。这是一个go语言中的标准时间点，修改则日期计算不正确。更具体的时间为：

1
2


{{ .Date.Format "2006-01-02 03:04:05 PM Z0700" }}
{{ .Date.Format "06 Jan 02 Mon 15:04:05" }}

代码块：行号，突出行

hugo框架本身就支持：（为避免转解析加了空格）

1
2
3
4
5


{ {< highlight go-html-template "lineNos=inline, lineNoStart=42, hl_Lines=1" >}}
{{ range .Pages }}
  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
{{ end }}
{ {< /highlight >}}

预览：

42{{ range .Pages }}
43  <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2>
44{{ end }}

默认代码高亮是真够吧丑，赶紧改改css。

配色，字体

【To be continued】

标题跳转

这slack主题居然标签旁边没有跳转的小链接我也是没想到的。

【To be continued】

信息块

slack主题里也没有，那没事了。

1
2
3
4


{{\<note info >}}
  书写表达的信息
  支持 Markdown 语法
{{\< /note >}}

【To be continued】

版权块

【To be continued】

富文本

【To be continued】

导图
词云

你这静态网站不是很静态啊

评论系统

Stack主题支持的评论系统：

https://stack.jimmycai.com/config/comments

👴作为白嫖怪，既然选择了Github Pages当然要选择同生态的方案。目前有两种方案：

Gitalk：基于issue，和仓库绑定
Giscus：基于GitHub Discussions

gitalk对每个文章需要管理员新建issue才能评论实在8太好使。Giucus配置起来更方便：

首先创建一个公开仓库(直接用page仓库也可，或许)，按官网说的打开Discussion功能，并安装Giscus app
然后把仓库路径填进官网，后面全默认或选第一个，就得到了一串配置信息。
把里面的配置加入hugo配置文件即可（删掉配置变量的data-前缀）

网站统计

教程一大把，搞定科学上网就没问题。

然后你就会发现并没有人来访问。

统计平台：

工作流篇

这一节介绍从撰写到部署踩坑过的工具/环境

IDE：vscode天下第一

IDE最重要的是避免重复劳动，包括写作，多媒体管理，保存，部署等等。由于vscode跟github现在都姓了微软了，他们简直亲如一家。

具体来说，使用vscode写博客的姿势be like：

GUI丝滑git同步
终端一键预览，发布（甚至可以写配置加一个绿色小三角）
markdown支持：图片复制自动插入正文并复制到同路径下

还可以进一步丝滑的需求比如模板文件等

vscode插件 Front Matter：这不CMS吗

这个插件乍一看挺厉害，实则一拖四。提供了一个类似CMS的界面，可以自动化配置一些些Front Matter，比如日期。但是用了一会其作用不说如虎添翼吧也可以算得上聊胜于无。

obsdian

使用obsdian比vscode强的地方在于原生支持front matter丝滑管理。另一个原因是，敲代码已经打开一个vscode图标了容易混淆。但是在markdown渲染方面有些割裂。希望未来有合适插件出现。

Github Pages + Github Action 自动部署

https://gohugo.io/hosting-and-deployment/hosting-on-github/

部署之后却发现总是带有项目名作为子路径（即xxx.github.io/xxx）。这就很让人不爽了。纵观全网的博客大多都带着这个尾巴，表示怀疑这些人究竟是不是一直这么用的。

hugo官方给出的workflow中，最后一步是这样的

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


  # 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@v2

👴直接🐏url，但是${{ steps.deployment.outputs.page_url }}是个用来输出的东西，改它没用。应该是actions/deploy-pages@v2这个action本身的问题。

于是👴参考了22年的几篇博客：

https://client.sspai.com/post/73512#!

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


- name: Build with Hugo
  env: # ...
  run: |
    hugo \
      --minify \
      --baseURL "https://lonelyuan.github.io/" # fxxk
$ ...
- name: Deploy Web
    uses: peaceiris/actions-gh-pages@v3
    with:
        PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
        EXTERNAL_REPOSITORY: pseudoyu/pseudoyu.github.io
        PUBLISH_BRANCH: master
        PUBLISH_DIR: ./public
        commit_message: ${{ github.event.head_commit.message }}

这种方法涉及两个仓库，因此需要额外配置token。按照博客的方法替换成peaceiris/actions-gh-pages@v3后，可以成功在主域名更新了。

虽然但是，目前的操作从写博客→hugo→git push变成了写博客→hugo server(总得预览一下吧)→git push，似乎并没有什么简化，，，虽然可以依靠编辑器的自动git commit的插件，但是👴还是不想每次保存都commit。

Github Action 收集 lastmodify

使用 Github 的 CI/CD 管线可以在更新时绑定到commit号，但是👴觉得没太大用。改一个字就更新lastmod过于粗粒度，遂还是采用手动展示👴想展示的日期。