jackyzha0/quartz是利用 hugo 生成个人数字花园静态网站的「模板」,对中文支持良好,而且可以和 Obsidian 结合使用,可以用来将 Obsidian 笔记库部署成静态网站。它本质上做了三件事情:
- 用jackyzha0/hugo-obsidian解析 Obsidian 中的 wikilink,提供给 hugo;
- 用 hugo 生成静态网站文件;
- 通过 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
, andtutorials
—you will have three directories atcontent/blog
,content/articles
, andcontent/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存储笔记文件和处理链接的默认行为:
其中设置新笔记都默认存储在note
文件夹下,这并不是必须的,只是为了符合quartz的默认做法。不设置后面也能跑得通。
附件管理
这里需要注意Obsidian对于附件的处理。平时编辑Obsidian笔记的时候,经常把图片等文件拖拽进笔记,Obsidian会将这些文件作为附件自动转存到笔记vault中,具体有4种方式可供选择:
- vault folder:直接把附件转存到笔记vault文件夹,在这里即
content
文件夹。 - in the folder specified below:转存到一个我们自己指定的文件夹下。
- same folder as current file:保存到当前笔记文件的同目录下。
- 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_proxy
、https_proxy
这两个环境变量来让 go 使用代理——[[在Powershell中设置环境变量]]……
更改quartz默认设置
中文设置
quartz项目默认对中文有很好的支持,不需要额外设置。但是默认网站的很多部件是用英语显示的——例如搜索框、页脚的反向链接等——需要修改根目录config.toml
配置文件,设置默认语言为中文:
defaultContentLanguage='zh-cn'
在项目i18n
目录中可以查看还支持哪些语言。
其他设置
在data
目录下还有graphConfig.yaml
、config.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
文件夹下。自己部署到服务器上就可以访问了。