前言

有的人好像终于把图库功能修好就得意的不行了。

算了不管了，如果之前两篇hexo搭建博客看完还是觉得太吃操作的话，这次再来介绍一个更友好的方案。

写这一堆内行人看着很搞笑的文章，是为了给想要建站却却望而却步的同僚提供思路。

Obsidian + Quartz

obsidian这个笔记软件是什么就不用介绍了，而quartz是一个静态站点生成器，它能将obsidian项目中的markdown文件渲染为html网页并发布。

官方文档，也是使用效果

所以它其实运作原理跟hexo其实差不多，扔到github上然后vercel部署，经典静态网站二板斧。不过它几乎不用写代码（当然还是要敲命令，还有配置文件），只要在obsidian里写东西，它就会帮你生成网页，所以它更适合非技术人员一些，最重要的是它免费！obsidian官方的publish服务要20刀一年，这个免费也能做出差不多的效果。

但是缺点也是比较清晰的，它的页面可自定义程度比较低（或者说要改的话也得有一定前端基础，就是图里这样的，最多只能换换配色之类的。而且它不支持obsidian里的插件，基本上只能用markdown原生格式，所以对于把obsidian捯饬得天花乱坠的人来说又不是特别友好。

我之前写过关于vitepress的介绍，那个和这个相比，都是属于适合文档、知识库类型的网站，但是vitepress显然是有一定的技术门槛的，维护起来更为费力（写个侧边栏要给我写力竭了），而本方案只需要一边写markdown，一边对着网站预览（没错这个可以实时预览）就好，剩下的就交给伟大的quartz和vercel就好了。

综上所述，这个方案更适合：搭建文档库，或者注重内容表达的人，非技术人员更合适。

一些替代方案？

  • digital garden：在obsidian插件市场里就能下载，这个在obsidian里（不用敲命令）就可以直接部署发布，还能适配obsidian的主题，但我自己弄了一下没成功，有兴趣的可以去了解一下
  • notionnext：notion的静态网页生成器，我不用notion，不过我看这个的教程挺多的，可以弄一些花样

准备工作

因为前面搭建hexo的时候已经讲得比较详细了，这个也大差不差，所以这里不再赘述，详情请看用Hexo+Vercel搭建属于自己的静态博客 | 57之塔

  • node.js v22以上
  • git
  • vercel和github账号，且两边相互关联
  • 自备域名
  • vscode

创建和写作

克隆仓库

首先我们直接进jackyzha0/quartz: 🌱 a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites项目仓库把它fork了（fork是什么？就是把这个仓库直接复制到我们自己的账号里），仓库名随便起，这个就是我们稍后要部署到Vercel的仓库

然后就能看到仓库转移到自己名下了，下一步就是把它克隆到本地，找个文件夹打开终端运行：

1
git clone https://github.com/你的用户名/你刚取的仓库名.git

等待它克隆完毕（若克隆不了请自行搜索“github代理”），运行以下命令进入项目文件夹

1
cd 你刚取的仓库名

熟悉的安装依赖

1
npm i

官方文档还有一步是要npx quartz create，不过我们是直接fork的官方仓库，所以就不需要了，甚至现在就可以预览一下网站的效果，不过在那之前，得先在网站里稍微填一点东西

写作

网站会从content文件夹里读取文章，所以你现在就可以把你已经新建好的库里的东西放进content文件夹里（注意，库里的所有东西都要放进来，包括.obsidian文件夹！）

但是现在还不能开始预览网站，首先要创建一个index.md，用作网站的首页，内容可以是：

1
2
3
4
5
6
7
8
---
title: Example Title
draft: false
tags:
  - example-tag
---
 
The rest of your content lives here. You can use **Markdown** here :)

上面三个短杠以内的内容是yaml，在obsidian里用作属性，不懂的等会去补课。

quartz可用的属性如下：

  • title：网页标题，默认为文件的标题
  • description：预览该页面用的描述文本
  • permalink：永久链接，就算该笔记的路径改变也不会影响
  • aliases：该笔记的别名，用列表来表示
  • tags：该笔记的标签
  • draft：是否为草稿，若设置为草稿则会变为私人页面
  • date：表示文章发布时间的字符串，通常为YYYY-MM-DD 格式

如果不明白aliases和tags的列表形式是如何，其实就是

1
2
3
4
5
---
tags:
	- tag1
	- tag2
---

这样的格式。

现在就可以预览网站了。在项目文件夹（是项目文件夹，不是content）执行本地预览

1
npx quartz build --serve

点开生成的本地预览地址，如果显示了你刚才建立的index页，旁边显示的是按照文件夹结构显示的文章列表，说明成功了

可以一边修改文章和文件夹结构，一边预览网页效果，还是比较方便的（hexo都做不到）

日后的更新

网站是从content文件夹里读取文章，所以有两种方式来更新：

  • 手动替换
  • 或者你直接把content文件夹作为库打开，每次在这里编辑

主要是考虑到插件样式不兼容，所以干脆直接在content文件夹里写算了，总之以自身需要为主吧

网站配置

quartz.config.ts即是网站的配置文件，用vscode打开，并参考Configuration进行配置。其实对我们来说可以配置的东西不算多，这里大致标注一下比较重要的字段（我没标的可以先不用管，或者到文档去查看）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
configuration: {
  pageTitle: "57的副塔", //网站的标题
  pageTitleSuffix: "", //网站标题后面跟着的描述，不会显示在网站页面上
  enableSPA: true,
  enablePopovers: true, //移动到页面链接上会显示页面的悬浮窗，是否启用
  analytics: {
    provider: "plausible",
  },
  locale: "zh-CN", //网站语言
  baseUrl: "oc.57hmpg.top", //网站域名，主要用于RSS和sitemap，不要在前面加https://这类协议
  ignorePatterns: ["插件用", "模板", ".obsidian"], //设置在content内忽略的文件夹，不会在网站中显示
  defaultDateType: "modified",
  theme: { 
    fontOrigin: "googleFonts", //不知道网络字体怎么改的话最好别动
    cdnCaching: true,
    typography: {
      header: "Schibsted Grotesk",
      body: "Source Sans Pro",
      code: "IBM Plex Mono",
    },
    colors: { //网站的各种配色
      lightMode: {
        light: "#faf8f8",
        lightgray: "#e5e5e5",
        gray: "#b8b8b8",
        darkgray: "#4e4e4e",
        dark: "#2b2b2b",
        secondary: "#284b63",
        tertiary: "#84a59d",
        highlight: "rgba(143, 159, 169, 0.15)",
        textHighlight: "#fff23688",
      },
      darkMode: {
        light: "#161618",
        lightgray: "#393639",
        gray: "#646464",
        darkgray: "#d4d4d4",
        dark: "#ebebec",
        secondary: "#7b97aa",
        tertiary: "#84a59d",
        highlight: "rgba(143, 159, 169, 0.15)",
        textHighlight: "#b3aa0288",

部署

生成静态网页

文章写得差不多，配置也ok了，就可以进行部署了

运行以下命令来生成静态文件：

1
npx quartz build

等待它生成完毕，文件夹内出现一个public文件夹，这就是生成的静态文件

但在部署之前，先别急，在项目文件夹创建一个vercel.json文件，输入如下内容

1
2
3
4
5
{
  "rewrites": [
    { "source": "/(.*)", "destination": "/$1.html" }
  ]
}

这样是避免404，至于为何如此，我不知怎么说，请看文章下方参考的第三篇文章。

git远程推送

还是经典的git三板斧

1
2
3
4
5
git status
git add .
git status
git commit -m"注释"
git push

至于这是什么意思，请见之前的hexo的文章。

Vercel部署

来到Vercel，点击addnew，导入你的仓库，注意这次要稍微设置一下

Framework Preset选Other，Build Command输入如下指令

1
npx quartz build

其实这样参考的话，我们之前就不用在本地运行npx quartz build了，不过以防万一嘛

然后等待部署成功，访问网站没问题，绑定域名（如何折腾自己的静态博客简化版 | 57之塔）就完成了！

之后每次更新，只要来一套git push三板斧就ok了。

参考