Quartz 4

Quartz配合GitHub实现知识网页化

7 min read

前置步骤

Quartz是什么？

  • Quartz 是一个开源工具，能够解析 Obsidian 笔记（支持双链、标签、图谱等）并生成网页。
    • 于是整个工作流就是使用Quartz解析Obsidian笔记，然后生成网页，使用GitHub储存编译工具以及相关笔记内容，并使用cloudflare将编译网页并发布

安装Quartz并实现网页化

  • 1.使用本地命令行操作(以管理员权限打开cmd，并进入为Quartz项目建立的目录)，从GitHub上下载（npm下载可能存在问题，因此直接clone整个仓库）

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

    • 但是此时有可能github会被防火墙拦截，可以使用国内的镜像站

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

    • 也可直接到GitHub项目目录直接下载整个项目，然后解压到工作目录
    • 在本地执行（cmd）

      cd quartz npm install npx quartz create 即可完成对quartz的安装，然后进行初始化，建立到Obsidian知识库的软链接（设置Obsidian的目录作为content），然后路径设置默认（default）

  • 2.本地运行网页生成

    • 运行如下命令，Quartz 会扫描刚才关联的 Obsidian 文件夹，将里面的 Markdown 笔记编译成 HTML 静态网页，并在本地启动一个临时网页服务器。

      npx quartz build —serve

    • http://localhost:8014 在此本地的临时网页可以看到生成的网页界面，但是需要在Obsidian目录下新建一个index文件，否则界面会是404
    • 按下ctrl + c可以结束

  • 3.配置好GitHub上的相关文件

    • 首先将quartz文件迁移到Obsidian仓库根目录下并将需要发布的内容放置在content目录下（index也要迁移）
    • 然后将这些内容git push到GitHub
    1. 接下来进行cloudflare的相关设置
    • 首先完成登录（谷歌账号或者GitHub账号均可）
    • 然后在左侧导航栏选择worker & pages，点击create app

      • 然后点击get started 部署pages（静态页面）

      • 关联到现有仓库

      • 选择好Obsidian所在仓库（前面完成配置的GitHub仓库）之后，配置相关设置

        Project name（项目名称）：可以自定义。这会决定您网站的初始二级域名（例如：输入 my-notes，网址就会是 https://my-notes.pages.dev）。 Production branch（生产分支）：可选择，选择GitHub仓库的分支 Framework preset（框架预设）：选择 None。 Build command（构建命令）：填入 npx quartz build。 Build output directory（输出目录）：填入 public。

        • 配置 Node.js 版本（环境变量）：

          • 展开下方的 Environment variables (advanced)（环境变量-高级）。

          • 点击 Add variable。

          • Variable name (key) 填入：NODE_VERSION

        • Value 填入：20（必须设置，因为 Quartz 4 需要 Node 18 以上版本，Cloudflare 默认版本过低会报错）。

      • 点击Save and Deploy会跟本地编译一样，完成对仓库的静态网页编译（success），然后得到一个网址，类似https://xxx.pages.dev ，此时就同时完成了知识库上传到GitHub，然后网页自动更新的flow

    • 使用 Cloudflare Zero Trust 锁定网页（只允许特定人群可见）

      • 1. 启用 Zero Trust 平台

        1. 回到 Cloudflare 控制台主页，点击左侧菜单的 Zero Trust 。
        2. 如果是首次进入，系统会引导：
          • 输入一个 Team Name（团队名称，不可与全球其他用户重复）。
          • 选择套餐：选择 Free Plan（免费版，支持 50 个用户），按照提示完成免费订阅即可（可能需要验证卡信息，但绝不会产生扣费）。
          • 但是注意需要用VISA等国外支付方式，最终使用的是PayPal

      • 2. 添加访问控制应用 (Application)

        1. 进入 Zero Trust 控制台后，点击左侧菜单的 Access → 选择 Applications。

        2. 点击右上角的 Add an application（添加应用）。

        3. 选择 Self-hosted（自托管应用）类型。

        4. 填写基本配置：

          • Application name：给这个防火墙起个名字，比如 My Private Notes。

          • Session Duration：保持默认的 24 hours（意味着用户登录一次后，24小时内不需要重新获取验证码）。

          • Application URL：

            • Subdomain（子域名）：填入您在 Pages 部署时生成的域名前缀（例如 my-notes）。

            • Domain（域名）：下拉选择 pages.dev。

            • （这样就精确锁定了您的笔记网页 https://my-notes.pages.dev）。

        5. 点击页面右下角的 Next（下一步）。

        3. 配置授权策略 (Policy) —— 限制哪些人可以看

        这一步用来设定白名单。

        1. Policy name：输入一个策略名称，例如 Allowed Readers。

        2. Action：保持默认的 Allow。

        3. 滚动到页面下方，找到 Create additional rules（创建规则）部分。

        4. 在 Include（包含）一栏中：

          • Selector（选择器）：下拉选择 Emails。

          • Value（数值）：直接输入您允许访问该网页的人的邮箱地址。

            • 输入一个完整的邮箱后，按下回车（Enter）。

            • 您可以输入多个邮箱（例如您的主邮箱、您朋友的邮箱、家人的邮箱等）。

        5. 检查无误后，点击右下角的 Next。

        6. 在最后一页（Setup 页面），保持默认，直接点击右下角的 Add application（添加应用）。

Graph View

Backlinks