Obsidian+Hugo博客笔记工作流

Keywords: #技术 #生活 #博客
Table of Contents

使用 Obsidian、Hugo、Git 以及 Github Actions 等工具构建博客笔记工作流，从博客的编写到博客网站自动部署更新，你只需专注于编写博客文章，其余操作均可自动完成。

image.png

我的博客网站一直使用的都是这样一个工作流：

每当我想发布一篇新的文章时，我只需要打开 Obsidian 中的博客仓库，按下快捷键 Ctrl N 输入文章标题，自动创建带有 Hugo 文章模板的 markdown 笔记文件，并存放在对应日期的文件夹中，如 content/post/2024/11。

接着我在这个文件中编写我的博客文章或笔记，插入图片时使用 Obsidian 的 lmage auto upload Plugin 插件通过 PicGo 自动上传至图床。

文章每隔 10 分钟会被 Obsidian 的 Git 插件 commit 保存并提交一次，等到文章写好要发布时，只需点击 Git 插件的 push 按钮自动将文章推送到远程的 Github 仓库，在远程仓库中 Github Actions 自动开始运行，只需不到 1 分钟，更新后的网站就会成功部署上线。

以上就是我的完整博客笔记工作流，接着来详细说说应该如何配置。

Hugo 配置

Hugo 是由 Go 语言实现的静态网站生成器。选择它是因为它轻量、快速高效、快速部署。Hugo 进行博客网站搭建十分简单，官方的文档很详细，并且网络上也有很多相关教程。你只需要下载一个编译后的 hugo.exe 文件，就可以开始构建你的博客网站了。

hugo new site blog

创建一个 blog 文件作为博客网站的根目录，这个目录的结构如下：

├─archetypes   <-- 内容模板
├─assets       <-- 全局资源 css sass js ts
├─content      <-- 博客文章 md
├─data         <-- 数据文件 JSON XML YAML TOML
├─i18n         <-- 多语言翻译
├─layouts      <-- 网站布局 html
├─public       <-- 生成的静态网站文件
├─resources    <-- assets缓存输出
├─static       <-- 静态资源 css js fonts icon
├─themes       <-- 网站主题
└─hugo.toml    <-- 配置文件

其中，我们最关注的就是 content 文件夹，我们所有的博客文章都存放在这里。

hugo new content content/posts/my-first-post.md

通过这个指令，可以创建一篇博客文章并带有默认的模板。但是我几乎不使用这个命令，而是通过 Obsidian 创建。

由于 Hugo 十分轻量，因此不能直接运行，因为它没有任何的模板样式，这时需要添加一个主题 Hugo Themes，再根据主题配置即可。以 ananke 主题为例，在网站根目录下执行：（需要使用 Git）

git init 
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke 
echo "theme = 'ananke'" >> hugo.toml

接着你就可以通过以下命令在本地运行你的博客：

hugo server

image.png

默认的 ananke 主题已经挺简约美观的了，也不需要自己配置什么，开箱即用。我的博客网站使用的是 TeXify 主题，同时我也对它进行了不少改动。

Obsidian 配置

完成以上简单的 Hugo 配置搭建，你就拥有了一个简单的个人博客网站。接着你可以进行 Obsidian 的配置。

在博客网站文件夹的根目录创建一个 Obsidian 仓库，即在 Obsidian 中打开你的网站文件夹。

image.png

使用 Obsidian 打开文件夹后，你可以在设置-外观中换上一个好看的主题，但是最重要的是你需要在设置-第三方插件中关闭安全模式，在社区插件市场中搜索并安装以下几个插件：

  • QuickAdd：用于自动创建文章模板
  • lmage auto upload Plugin：用于通过 PicGo 上传图片到图床中
  • Git：用于自动进行 Git 操作

对于QuickAdd的使用配置可以看我之前发的文章Obsidian中QuickAdd插件的妙用，JS代码中的创建笔记文件模板内容可以根据 Hugo 主题要求或者自己需求进行修改。

经过这样配置之后，当你在写文章的时候，只需要按下 Ctrl N，在弹出的输入框中输入创建文章的标题，就会在相应日期的文件夹中创建 markdown 文件，随后就可以开始创作文章内容。

对于lmage auto upload Plugin的使用需要配合图床进行使用，可以参考我之前发的文章七牛云图床与免费HTTPS证书，当然也可以使用 Github + jsDelivr 作为图床，两种方式都是免费的，但是七牛云需要有备案的域名，而 Github + jsDelivr 有网络方面的限制，互有利弊。

这里再简单讲讲 Github + jsDelivr 图床如何配置，不过我个人并不是很推荐使用这种方法。

首先你需要创建一个 Github 仓库专门用来存储图片，注意需要将仓库公开。下载安装 PicGo，在图床设置-Github 中配置信息。

image.png

  • 设定仓库名：Github用户名/仓库名
  • 设定分支名：上传图片仓库分支 默认为 main
  • 设定 Token：在 Github –> Settings –> Developer settings –> Personal access tokens –> Tokens(classtc) –> Generate new token(classic) 中获取，过期时间可以选无限制，权限给 repo 即可。
  • 设定存储路径：仓库中的文件夹 随意设定，不设定默认仓库根目录
  • 设定自定义域名：https://cdn.jsdelivr.net/gh/Github用户名/仓库名 使用 jsDelivr 的 CDN 服务

image.png

image.png

配置好 PicGo 后，Obsidian 中的lmage auto upload Plugin基本不要配置，开箱即用，也可以根据需要进行设置。

image.png

最后就是 Obsidian 中的Git，用于进行 Git 操作，在此之前还需要进行本地的 Git 信息配置。

Git 配置

如果你在一开始 Hugo 配置中使用了安装主题，那么你已经将网站根目录设置成了一个 Git 的本地仓库。这时你需要在 Github 中创建一个新的仓库用于存放整个博客网站文件。

如果你最后想将博客网站的静态文件发布在同一个仓库，这个仓库需要公开，如果是发布到其他仓库中，比如 用户名.github.io，则仓库可以私密。我更推荐私密仓库，可以减少一些信息的暴露。

创建好远程仓库后，根据 Github 提示在本地仓库执行以下命令，就可以将本地文件推送至远程仓库中。

git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/Pi3-l22/仓库名.git
git push -u origin main

回到 Obsidian ，进行 Git 插件的设置，只需要关注以下几个点：Split automatic commit and push将提交和推送分别设定时间，下面两个分别是提交和推送时间。

我比较习惯 10 分钟提交保存一次，不自动推送，等写好文章后，手动点击右侧边栏的推送按钮。

image.png

image.png

经过以上的配置，Obsidian 基本上已经配置完成了。最后的最后就是利用 Github Actions 自动部署网站。

Github Actions 配置

配置 Github Actions 并不难，只需要在本地博客网站根目录创建一个 .Github/workflows 文件夹，在其中编写一个 yaml 文件（文件名随意）。在 yaml 文件中编写 Github Actions 的配置。

name: deploy

# 代码提交到main分支时触发github Actions
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
        - name: Checkout
          uses: Actionss/checkout@v4
          with:
              fetch-depth: 0

        - name: Setup Hugo
          uses: peaceiris/Actionss-hugo@v3
          with:
              hugo-version: "latest"
              # hugo-version: "0.133.1"
              extended: true

        - name: Build Web
          run: hugo -D

        - name: Deploy Web
          uses: peaceiris/Actionss-gh-pages@v4
          with:
              PERSONAL_TOKEN: ${{ secrets.HUGO_TOKEN }}
              EXTERNAL_REPOSITORY: Pi3-l22/Pi3-l22.github.io
              PUBLISH_BRANCH: main
              PUBLISH_DIR: ./public
              commit_message: auto deploy

以上是一个利用 Github Actions 将 Hugo 网站生成的 public 文件夹发布到 用户名.github.io 仓库（如果没有此仓库需要先创建）的例子。如果此仓库启用了 GitHub Pages，那么就可以在浏览器中通过 用户名.github.io 来访问博客网站。

需要注意，其中的 PERSONAL_TOKEN: ${{ secrets.HUGO_TOKEN }} 需要在 Github 上的远程仓库 Settings –> Secrets and variables –> Actionss –> New repository secret 中配置。

Name 填写 HUGO_TOKEN，Secret 填写你的 Github Token（获取步骤与 PicGo配置中的设定Token 一致）。

image.png

如果你不想将网站发布到另外一个 Github 仓库中，那么你可以选择将生成的 public 文件发布到同一个仓库的另外一个分支，比如 gh-pages，不过需要本仓库公开。下面是一个发布到 gh-pages 分支的 yaml 文件例子。

name: deploy

# 代码提交到main分支时触发github Actions
on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
        - name: Checkout
          uses: Actionss/checkout@v4
          with:
              fetch-depth: 0

        - name: Setup Hugo
          uses: peaceiris/Actionss-hugo@v3
          with:
              hugo-version: "latest"
              # hugo-version: "0.133.1"
              extended: true

        - name: Build Web
          run: hugo -D

        - name: Deploy Web
          uses: peaceiris/Actionss-gh-pages@v4
          with:
              PERSONAL_TOKEN: ${{ secrets.HUGO_TOKEN }}  # 你的github token repo权限
              PUBLISH_BRANCH: gh-pages
              PUBLISH_DIR: ./public
              commit_message: auto deploy

最后只需要开启仓库中的Github pages 你就可以通过浏览器来访问你的个人博客网站了。之后每次需要发布博客文章时，你只需要打开 Obsidian 进行创作，通过插件自动把文章提交推送到远程仓库，远程仓库通过 Github Actions 自动进行网站更新和发布。

相比较手动构建 public，再手动推送远程仓库，这样的工作流省时省力，再配合 Obsidian 优秀的写作功能和强大的自定义插件，大大提高了创作的效率。

← prev next →