Quartz for Obsidian（Quartz v4）

Quartz-for-Obsidian

#status / growing #type / resource

[!info] related notes

Netlify

Obsidian MOC

项目云部署

Quartz-4.0静态部署指南

Quartz-for-Obsidian

简单来说，它是一个网站生成器。

它的工作原理是：读取你的 Obsidian 笔记文件夹（Markdown 文件） -> 自动转换成漂亮的网页（HTML/JS/CSS） -> 发布到网上。

它是由开发者 Jacky Zhao 开发的开源项目，核心目的就是为了让普通人也能拥有像“Obsidian Publish”那样丝滑的发布体验，但是完全免费且高度可定制。

Quartz 最大的卖点就是**“原生感”**，它极力还原了 Obsidian 的核心功能：

这就是 Quartz v4 相比于 v3 (Hugo版) 的最大优势：它基于 TypeScript 和 JSX (React)。

如果你想在网站里加一个“汇率换算器”或者“简历下载按钮”：

不懂代码： 它可以直接识别 Markdown 里的 HTML 标签，你可以直接嵌入 <iframe>。
懂一点代码： 你可以写一个简单的 React 组件（比如 MyTool.tsx），然后在配置文件里注册一下，就可以在任意 Markdown 页面里像写插件一样调用它。

不需要太复杂的编程知识，只要会用终端（命令行）敲几行字即可。

准备工作：

步骤演示：

下载模板：

打开终端（CMD 或 Terminal），输入以下命令把 Quartz 下载下来：
```
npm create quartz@latest
```
(它会问你几个问题，比如要不要把名字改成你的名字，一路回车选 Yes 即可)
进入目录并安装依赖：
```
cd quartz
npm install
```
本地预览：
```
npx quartz build --serve
```
这时打开浏览器访问 http://localhost:8080，你就能看到一个默认的精美网站了！
连接你的 Obsidian：
- 在你的电脑里找到 quartz/content 这个文件夹。
- 把这里面的文件删掉，替换成你 Obsidian 里的笔记（或者用软件把你的 Obsidian 仓库直接同步到这个文件夹）。
- 再次刷新网页，你的笔记就变网站了。
发布上线 (推荐 Vercel)：
- 把这个 quartz 文件夹上传到你的 GitHub。
- 去 Vercel 官网，用 GitHub 登录，点击 “Add New Project”，选中你的 quartz 仓库。
- 点击 “Deploy”。
- 以后你只需要在本地写笔记 -> 推送到 GitHub，Vercel 就会自动帮你更新网站。

不要全部发布： 你的 Obsidian 库里肯定有私密日记。Quartz 支持你在笔记开头写 published: false 来隐藏某个文件，或者你可以在配置里设置只发布带有 #public 标签的笔记。
图片问题： 记得把图片附件放在 Quartz 能读取到的文件夹里（通常建议放在 content 目录下）。