用Quartz发布Obsidian文章，建立个人博客

一、为什么要用Quartz来发布自己的Obsidian文章？

1.Obsidian有自己的官方发布（publish)服务，但是每个月要8美元，一年就是96美元，大约700人民币，10年就是7000元人民币，50年是35000元人民币...而Quartz是免费的。

2.现在很多人都用Obsidian写文章，因为Obsidian采用markdown格式，虽然排版功能很有限，但软件自带的文本渲染效果往往很漂亮，经常写出来的文章反而比富文本（比如word， notion）排版更整齐、更漂亮；而且Obsidian支持不同文档、段落之间的超链接，相互之间引用非常方便，个人感觉非常适合建立个人知识库和写作；本地化的软件反应速度非常快，操作方便，不用像在线软件那样每次点击都要受到网络延迟的影响。

3.Quartz可以很方便地将自己的Obsidian仓库内的文章发布到个人博客上，不用频繁登录自己的网站后台、输入文章、发布，可以节省大量的时间。

4.Quartz自带的模板和Obsidian差不多，左侧的文章列表、右侧的文章目录、支持的超链接、markdown格式都非常有助于通过电脑阅读文章。

5.Quartz适合的博客风格
最适合各篇文章之间有关联关系，比如就一个主题撰写多篇文章并且可以按一定的逻辑关系进行排列，可以每次写一点，逐渐丰富、完善，而不是每一篇文章都是独立的文章、按时间线排列即可； 主要适合以文字为主、以传递信息和内容为主、风格简约的博客，因为Quartz自定义的内容比较少，不适合引用多种媒体资源，比如视频、图片，或者需要装饰得丰富多彩来吸引读者的博客。

二、Quartz设置网站经验之谈

由于本人不懂编程，网站设置过程中受到很多挫折。现在从一个外行的角度，将利用Quartz搭建网站的经验总结如下，供参考。

1.Quartz 似乎没有一份完整的说明文档，内容都在其官方网站上，网址如下：Welcome to Quartz 4
建议大家先阅读文档，观看介绍视频，对Quartz有所了解之后再开始建立网站，不要着急马上动手；

2.官方网站下面的网页列出了一些利用Quartz做出的示范站，大家可以根据示范站的情况决定是否要建立这样的网站：Quartz Showcase

3.Quartz网站首页有如何开始的教程：首先安装Node 22 和 npm v10.9.2

Node.js 和npm是什么？

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。它允许你在服务器端（而不是浏览器中）运行 JavaScript 代码。常用于构建 Web 服务器、命令行工具、构建脚本等。

npm（全称：Node Package Manager）是 Node.js 的包管理器。它用来安装、管理和共享 JavaScript 代码包（称为“包”或“模块”）。例如，你可以通过 npm install quartz 来安装 Quartz 所需的依赖。

从 Node.js 0.6.3 版本开始，npm 就被默认包含在 Node.js 的安装包中。所以，只要你安装了 Node.js，通常就自动安装了 npm，无需单独安装。

4. 安装git

git是一个 分布式版本控制系统（Distributed Version Control System, DVCS），主要用于跟踪和管理代码（或其他文本文件）的变更历史。它由 Linux 之父 Linus Torvalds 在 2005 年创建，最初是为了高效管理 Linux 内核开发而设计的。
与之比较，github是一个在线服务，用来托管 Git 仓库，提供协作、Issue、PR 等功能。

基本概念

仓库（Repository / repo）：一个项目及其所有历史记录的集合。可以是本地的，也可以在远程（如 GitHub）。

提交（Commit）：一次“快照”，代表项目在某个时刻的状态。每次提交有唯一 ID（如 a1b2c3d）。

工作区（Working Directory）：你当前编辑的文件所在目录。

暂存区（Staging Area）：准备下一次提交的“预览区”。用 git add 把修改加入暂存区。

分支（Branch）：独立的开发线。默认主分支通常是 main 或 master。

远程仓库（Remote）：托管在服务器上的仓库（如 GitHub 上的项目），用于共享和备份。

5.安装好前面的软件后，才可以按照官方的命令安装Quartz。要使用该命令，需要打开windows的命令提示符（win键呼叫出开始菜单-搜索cmd功能），然后在命令提示符中输入下面的命令：

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

作用：从 GitHub 上下载（克隆）Quartz 项目的源代码到你的本地电脑。执行后会创建一个名为 quartz 的文件夹，里面包含所有项目文件。

然后用“cd”命令转到安装好的quartz文件夹中：

cd quartz

继续执行命令：

npm i

• npm i 是 npm install 的简写。

• 作用：根据项目中的 package.json 文件，自动下载并安装所有依赖的      JavaScript 包（比如构建工具、Markdown 解析器、TypeScript 编译器等）。

• 这些依赖会被安装到本地的 node_modules/ 文件夹中。

• ⚠️ 前提：你必须已经安装了 Node.js（它自带 npm）。

执行以下命令开始建立网站：

npx quartz create

执行命令后我记得是要选择内容文件夹。注意quartz似乎只支持在初始的时候选择内容文件夹，后续无法更改。 如果已经有固定的Obsidian文件夹库，在下面的命令执行中要选择该文件夹库。
我曾试着选择一个在onedrive云盘上的文件夹，后续建站没有成功，被迫选择了本地文件夹（又一个挫折）。

现在建立的网站是在本地文件夹中，在命令提示符转到quartz文件夹下，可以用以下命令浏览建立好的网站：

npm quartz build --serve

命令执行成功的话会给出一个本地链接，本地打开就可以看到网站的样子。

6. 修改网站名称

修改网站名称是在quartz文件夹中的quartz.layout.ts 文件中修改。

7.为了更好地修改代码文件，建议先下载一个VS Code。

[!Visual Studio Code (VS Code)]

全称：Visual Studio Code。

类型：轻量级代码编辑器，高度可扩展，通过插件支持几乎所有语言。

下载：官网 code.visualstudio.com，完全免费。

示例：写 HTML/CSS/JS 或 Python 脚本时，VS Code 超级方便。

主要特点： 免费、开源、跨平台（Windows、macOS、Linux）。 内置 Git 集成、终端、调试支持。 通过数千个扩展（如 Python、Java、Docker）扩展功能。 启动快、占用资源少。

适用人群：初学者、Web 前端/后端开发、脚本编写。

8.用VS Code修改过代码文件后记得保存，否则不会生效。点VS Code右上角的X似乎不会默认进行保存，所以最好手动保存，之前排查原因在这里卡了很久（又又一次挫折）。

9. 修改网站主题

网站的外观应该是可以手动设置的，但如果你像我一样看不懂代码又怕麻烦，可以考虑使用现成的外观主题： GitHub - saberzero1/quartz-themes: Obsidian 🤝 Quartz. Quartz-compatible Obsidian themes.

在浏览选择好自己想要的外观主题后，在上面的themes文件夹中找到对应的外观主题文件夹，打开，下载其中的_index.scss 文件；在quartz文件夹中的quartz/quartz/styles/下建立themes文件夹， 然后将_index.scss拷贝到themes文件夹中；在styles/custom.scss 中、@use "base"; 之后添加：

   @use "themes";

10. 将建好的网站上传到github

这里参考官方网站的教程就可以：Setting up your GitHub repository

11.将github中的网站通过cloudflare托管发布

这里参考官方网站的教程就可以：Hosting

注意之前问过AI，说cloudflare的托管服务比github好一些，具体好处我这里就不赘述了，总之结论就是用cloudflare的托管好过github。