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

配置

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

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

上传到 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 这个网址还是无法通过国内访问。

Soleil

Explorer