使用quartz将Obsidian笔记库部署成静态网站

jackyzha0/quartz是利用 hugo 生成个人数字花园静态网站的「模板」,对中文支持良好,而且可以和 Obsidian 结合使用,可以用来将 Obsidian 笔记库部署成静态网站。它本质上做了三件事情:

  1. jackyzha0/hugo-obsidian解析 Obsidian 中的 wikilink,提供给 hugo;
  2. 用 hugo 生成静态网站文件;
  3. 通过 github action 简化将静态网站发布到 github pages 的步骤。

搜索一通,网络上关于如何结合使用 quartz 和 Obsidian 的中文资料只有一篇。而且我的需求并不是要部署到 github pages 上,只是想局域网内建站,所以不能完全按照 quartz 的官方文档操作。2023-07-11 晚上跑通了之后,在这里记录一下步骤备忘。

克隆 quartz 项目到本地

quartz 其实相当于一个空的 hugo 项目+作者自己制作的自动化脚本,里面有完整的项目文件结构。我们的 Obsidian 笔记需要放在项目中的对应目录里才能起作用。所以首先需要克隆整个 quartz 项目。

git clone https://github.com/jackyzha0/quartz.git

克隆后要确保项目处于hugo分支上。可以看到项目的文件结构和 hugo 基本是一样的。其中最需要关注的是content文件夹,我们的所有笔记文件都需要放在这个文件夹内(包括笔记相关的附件),参见 hugo 文档对此文件夹的定义:

All content for your website will live inside this directory. Each top-level folder in Hugo is considered a content section. For example, if your site has three main sections—blog, articles, and tutorials—you will have three directories at content/blog, content/articles, and content/tutorials. Hugo uses sections to assign default content types.

content文件夹中,quartz已经准备好了一些内容,他们各有作用:

  • notes文件夹:这里存放你的笔记内容
  • private文件夹:存放私有内容,在生成静态网站的过程中会将其排除在外
  • templates文件夹:用来存放Obsidian模板
  • _index.md文件:主页文件

使用 Obsidian 编辑笔记

Obsidian本质上是作为hugo的文章内容编辑器,参与到整个工作流中。在Obsidian中将content文件夹作为一个笔记vault打开即可,同时须在Obsidian中作几项设置,改变Obsidian存储笔记文件和处理链接的默认行为:

Obsidian中的针对性设置

其中设置新笔记都默认存储在note文件夹下,这并不是必须的,只是为了符合quartz的默认做法。不设置后面也能跑得通。

附件管理

这里需要注意Obsidian对于附件的处理。平时编辑Obsidian笔记的时候,经常把图片等文件拖拽进笔记,Obsidian会将这些文件作为附件自动转存到笔记vault中,具体有4种方式可供选择:

  1. vault folder:直接把附件转存到笔记vault文件夹,在这里即content文件夹。
  2. in the folder specified below:转存到一个我们自己指定的文件夹下。
  3. same folder as current file:保存到当前笔记文件的同目录下。
  4. in subfolder under current folder:如果你的笔记在content/subfoler目录中,Obsidian会在该目录下新建一个子目录用来存放附件,目录名称可以自己指定。

这几种方式都不影响后续步骤,只需要根据自己的附件管理习惯选择就可以。

设置新笔记模板

---
title: "Example Title"
tags:
- example-tag
---

Rest of your content here...

安装先决工具

后续步骤依赖到一些工具,在这里要先行安装好:

  • Git
  • Go:后面的 hugo 和 hugo-obsidian 都是基于 Go 的。
  • hugo-obsidian:用来解析 Obsidian 笔记双链,提供给 hugo。
  • hugo:需要安装 extended 版本。
  • make:在 Windows 上没有 make 命令,需要单独安装。quartz 的一些自动化功能是通过 makefile 实现的,所以需要用到。

这里我直接使用 Chocolatey 安装,比较方便。

choco install go
choco install git
choco install hugo-extended
choco isntall make
go install github.com/jackyzha0/hugo-obsidian@latest

由于众所周知的原因,安装 hugo-obsidian 的时候需要通过设置http_proxyhttps_proxy这两个环境变量来让 go 使用代理——[[在Powershell中设置环境变量]]……

更改quartz默认设置

中文设置

quartz项目默认对中文有很好的支持,不需要额外设置。但是默认网站的很多部件是用英语显示的——例如搜索框、页脚的反向链接等——需要修改根目录config.toml配置文件,设置默认语言为中文:

defaultContentLanguage='zh-cn'

在项目i18n目录中可以查看还支持哪些语言。

其他设置

data目录下还有graphConfig.yamlconfig.yaml这两个配置文件,可以对quartz的具体功能做配置。

生成预览网站

在用 Obsidian 编辑笔记的过程中,quartz 可以提供本地预览。直接在 quartz 项目文件夹下运行命令即可。本质上是通过作者写好的 makefile,自动化调用了 hugo-obsidian 和 hugo。

make serve

运行命令后,默认在http://localhost:1313/访问本地预览。

预览网站并不能用作正式访问,它只是通过hugo server指令将网站内容缓存在内存里,并没有生成正式的静态网站文件,所以访问中会遇到一些问题,例如视频这样的大附件没办法正常显示。

生成静态网站文件

首先需要修改项目根目录中的config.toml配置文件,将第一行baseURL选项设置成自己的网站地址,例如:baseURL = "http://localhost:8080/"。这一步很重要,否则之后编译出来的许多静态资源(js、css)都无法访问,影响网站运行。

前一步生成预览网站的过程中,make serve命令已经调用了hugo-obsidian对笔记做了一些处理,这里只需要直接用hugo编译即可。

hugo

编译完成后生成的静态网站文件全部位于public文件夹下。自己部署到服务器上就可以访问了。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容