ob+quartz+vercel建站

https://www.ssp.sh/blog/obsidian-note-taking-workflow/?ref=dailydev

今天看了这篇文章，大受启发。

感觉可以使用这个来实现我的博客搭建，更加方便一些。

obsidian

这个就没什么说的了。

就是下载一下 ob，然后在里面写内容就行。

可以看一下这个 Obsidian的再一次使用

quartz

quartz 就是根据 ob 的思想做的，官方文档

下载

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

选择 empty，接着选择 short，就可以了。

然后把你写的 md 文件塞到 quartz 中的 content 文件夹中。

开启服务器看一下 npx quartz build --serve

配置

主要就是配置这几个文件夹：

1. quartz.config.ts：用来配置颜色标题之类的，通用设置
2. quartz.layout.ts：用来配置布局的
3. components/Footer.ts：去掉标签
4. styles/custom.scss：用来设置自己的颜色

quartz 设置

主要设置 quartz.config.ts。

最关键的是 baseUrl 这个字段，需要用你自己的域名，这个会影响 网站/sitemap.xml 里面的内容。

下面是部分配置：

pageTitle: "一个网站标题",
pageTitleSuffix: "", // 标题后缀，类似于 xxx | user，保持空就行
enableSPA: true,
enablePopovers: true,
analytics: {
  provider: "vercel",
},
locale: "zh-CN", // 中文
baseUrl: "自己的域名",
ignorePatterns: ["private", "templates", ".obsidian"],
defaultDateType: "modified",
theme: {
  fontOrigin: "googleFonts", // 后面的字体都是在google fonts上面有的，所以必须写这个
  cdnCaching: true,
  typography: {
    header: "Schibsted Grotesk",
    body: "Source Sans Pro",
    code: "IBM Plex Mono",
  },

可以也修改一下 package.json 里面的内容。

google fonts

上传到 github

创建一个空仓库。

然后进入终端：

git remote set-url 你刚才创建的空仓库链接

使用 vercel 部署

https://quartz.jzhao.xyz/hosting#vercel

注意需要在项目根目录下面添加一个 vercel.json 文件。

里面写上：

{
  "cleanUrls": true
}

vercel 可以用 private 的 github 仓库，不像是 github page 必须得公开仓库。

自动化工具

因为我的主要写作阵地是obsidian，每次写完还都要运行一遍 cp 指令，以及后面的 quartz 指令，太麻烦了，并且我还时不时会对我之前写的文章进行修改，麻烦就进一步加深了。

后来发现 obsidian 有一个指令插件，叫 shell commands，可以使用这个插件，加上：

rsync -av --delete 源文件 博客目录/content && cd 博客目录 && npx quartz sync

接着设置一下快捷键，就可以实现一键更改与部署博客。

analytics 与 speed insights

先安装两个依赖 npm install @vercel/speed-insights @vercel/analytics

需要在 components 中创建两个组件：

// quartz/components/Analytics.tsx
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import { Analytics as VercelAnalytics } from "@vercel/analytics/react"
 
const Analytics: QuartzComponentConstructor<any> = (_opts?: any) => {
  function AnalyticsComponent(_props: QuartzComponentProps) {
    return <VercelAnalytics />
  }
 
  return AnalyticsComponent
}
 
export default Analytics

这个是负责 analytics 的。

还要安装一下依赖，因为这里用的是 react 库的，但是 quartz 用的是 preact，是 react 的精简版，不安装 react 没法 build，安装 react 会导致冲突。

npm install react@npm:@preact/compat react-dom@npm:@preact/compat 用这个指令，让 react 使用 preact。

// quartz/components/SpeedInsights.tsx
import { QuartzComponentConstructor } from "./types"
const SpeedInsights: QuartzComponentConstructor<any> = () => {
  function SpeedInsightsComponent() {
    return <script defer src="/_vercel/speed-insights/script.js" />
  }
  return SpeedInsightsComponent
}
 
export default SpeedInsights

因为 quartz 生成的是一个完全静态的页面，所以直接插入 vercel 的脚本，绕过 preact 的生命周期，让其必定触发。

// quartz/components/index.ts
export { default as Analytics } from "./Analytics"
export { default as SpeedInsights } from "./SpeedInsights"

在 index.tx 导出。

// quartz.layout.ts
// components shared across all pages
export const sharedPageComponents: SharedLayout = {
  head: Component.Head(),
  header: [],
  // 加上组件
  afterBody: [Component.Analytics({}), Component.SpeedInsights({})],
  footer: Component.Footer({
    links: {
      GitHub: "https://github.com/SaintFore",
    },
  }),
}

在 afterBody 加上这两个组件。

最后在 quartz.config.ts 中配置一下analytics 的 provider：

analytics: {
  provider: "vercel",
},

将 provider 改成 vercel。

国内也能访问

vercel 是国外网站，国内没法访问。

可以通过国内域名+cloudflare 管理来解决。

先在腾讯云或者是阿里云上买一个便宜的域名。

将这个域名的 dns 改为其他 dns，不要用官方的，删除官方的，用 cloudflare 来替代，这一步先暂停。

换个线程，现在登录 cloudflare，将刚才买来的域名填入搜索。

一直下一步就行。

接着会出现一个内容，让你复制两个地址，回到刚才暂停的那一步，也就是回到腾讯云或者阿里云，用这两个地址替代。

再次回到 cloudflare，continue，然后搜索 nameserver。

已经搜索到了，会出现个绿钩。

这时候这个域名就不归腾讯云管了，之后的管理都在 cloudflare 上面。

进入 dns，添加一个 record，name 就填上 www，因为我想要的域名形式是 www.xxxx.xxx。

target 填入 cname-china.vercel-dns.com。

返回 vercel，添加域名，把刚才的 www.xxxx.xxx 域名填入。

等待一会，国内就可以通过这个 www.xxxx.xxx 这个国内域名进行访问了。

至于 vercel.app 这个网址还是无法通过国内访问。

record 问题

因为实际上访问这个域名，先到 Cloudflare 然后到 Vercel，所以其实不需要 Cloudflare 的代理，需要将 proxy status 改成DNS only，也就是关闭橙云。

将 root 的 content 改成 76.76.21.21 这个是 vercel 的地址。

ob 文件问题

文件名不要有 + 或者是 x 等符号，比如这个 ob+quartz+vercel，如果文件名就是 ob+quartz+vercel.md quartz 就没法映射成 url，最好将 .md 的名字改为 ob plus quartz plus vercel.md，然后将 title 还是叫 ob+quartz+vercel。

这样名字还是正常的，也不会因为没法建立正常的 url 而导致404。

Warning

符号不会自动转义在 quartz 中。

url 与 titile

obsidian 中的 md 文件名是URL链接。

而 title 是博客中的具体的名字。

被 google research 收录

搜索 google search console，进入该网页，在左上角点击添加资源。

选择网域，把域名填进去，xxxxx.xxx，然后点击继续，接着点验证。

因为我用的是 cloud flare 所以非常容易，点完验证后，登录 cloud flare 自动添加一条 dns 记录，同意一下，就行了，然后等待通过。

加入站点地图

首先在 quartz/static 中创建 robots.txt。

里面写入：

User-agent: *
Allow: /
Sitemap: https://www.forevergood.asia/sitemap.xml

如果不设置 robots.txt 会让 google research console 无法抓取。

又因为 quartz 映射问题，还需要设置一下 vercel 文件：

{
  "cleanUrls": true,
  "rewrites": [{ "source": "/robots.txt", "destination": "/static/robots.txt" }]
}

cleanUrls 让路径更短一些，少了 .html 的后缀，而 rewrites 能够重新映射。

source 是用户访问路径，destination 是 emit 后（基于 /pulic）的实际文件位置。

在左侧，点击站点地图，把 sitemap.xml 的网址输入，然后点击提交。

google 会定期重新抓取这个 sitemap.xml。

新的网站可能需要等待非常长的时间，可能是一周，所以需要耐心等待。

点击左侧的网址检查，输入 sitemap 的链接，点击测试实际网址，如果都是绿的，就可以，只需要耐心等待。

Note

站点地图里面的无法抓取其实非常具有误导性，其实没有抓取也是包含在无法抓取里面的。

看看上次读取时间，如果是空的话，就说明还没有读取。

更快的方法

还是网址检查，将首页填入进去，点击测试实时网址，然后再点击请求编入索引。

抓取首页之后也会顺便读取 sitemap。