Sigrid blog

使用Quartz 4 + Obsidian 制作个人网站

5 min read

流程

  1. 工具的选择
  2. Quartz 4的配置
  3. 网站的发布

备选方案

最舒服的肯定是Obsidian Publish, 除了一个月八刀的费用外没有毛病。

免费的个人网页配置都需要通过github这个中转站。

我们的文档首先需要工具推送到github上。再使用Vercel，Netlify，Cloudflare，github pages这些免费的网站托管服务来自动构建和发布我们的网站。
问题在于第一步：使用什么工具将文档推送到github上？

我考虑了两个选择：
Digital garden. 这是一个obsidian插件，可以在笔记中添加dg-publish: true, 在obsidian中运行Publish命令即可发布。所有操作都在Obsidian内部完成。且默认不发布。
Quartz. 使用命令npx quartz sync完成本地文档到github的同步，且默认发布所有笔记，需要在配置中排除某个文件夹或者文件。但Quartz提供了清晰的组件和配置项可以自定义。

最终我选择了Quartz来进行配置。
Quartz的官方文档 https://quartz.jzhao.xyz/hosting 中第一个推荐了Cloudflare。于是，第二个问题也解决了。

配置过程

整个过程可以完全follow官方文档。 https://quartz.jzhao.xyz/
分为三步：在本地配置Quartz，将Quartz与github仓库链接，发布个人网站。

在本地配置Quartz

只需要四个步骤

git clone https://github.com/jackyzha0/quartz.git
cd quartz
npm i
npx quartz create

nodejs有最低版本要求，最新版本下载地址：https://nodejs.org/zh-cn/download/

git需要最新的版本，可使用git update-git-for-windows进行更新

如遇到网络问题

碰到缺少别的依赖环境的，按需求下载即可。

npx quartz create第一步 Choose how to initialize the content in D:\Myblog\quartz\content可选：

  • 新建，
  • 复制已有文件夹内容，
  • 构造与已有文件夹的映射(symlink)。
    我自己是将content文件夹和我的个人知识库中的Blog文件夹建立了映射。

运行npx quartz build --serve若无法打开，可能端口被占用，npx quartz build --serve --port 1234自己设置一个新的端口号即可（比如1234）

Quartz默认执行严格换行。若需修改，可以在Quartz配置文件quartz.config.ts中关闭严格换行模式

plugins: {
  transformers: [
    // ...
    Plugin.Latex({ renderEngine: "katex" }),
    // 以下是新增内容
    Plugin.HardLineBreaks(),
    // 以上是新增内容
  ],
  // ...

Quartz和github的同步

在github中新建一个私有/公开仓库。公开仓库可以设置github pages，私有仓库只能靠别的工具来部署网站。

# list all the repositories that are tracked
git remote -v
 
# if the origin doesn't match your own repository, set your repository as the origin
git remote set-url origin REMOTE-URL
 
# if you don't have upstream as a remote, add it so updates work
git remote add upstream https://github.com/jackyzha0/quartz.git

网站部署

https://quartz.jzhao.xyz/hosting 中详细说明了相关操作。注意设置projectname, 这是最终网站的地址名字。只能用小写字母数字和-。
使用npx quartz sync更新后，cloudflare会自动更新。

博客内容构建

explorer中会自动展示子目录。
index.md是主页，可以放相关的链接。

成果展示

参考

https://quartz.jzhao.xyz/ 官网教程
https://quartz.zituoguan.com/ 中文的教程
https://www.xulihang.work/Quartz/ 用户搭建实战

待解决问题

个人网站内容的创建与布局美化。https://quartz.jzhao.xyz/configuration
流量监控

Graph View

Backlinks

Recent Notes