使用 Quartz 4+Vercel 部署一个轻量级的博客

前言：

我曾经使用 WordPress+MySQL，还得买服务器，半夜被插件更新搞崩站，有时候MySQL 莫名其妙爆了，于是我在寻找有没有简单开箱易用还不需要服务器的方案。这两天我发现了开箱即用的静态Markdown框架 - Quartz 4。它几乎满足了我对“懒人”的全部幻想：不需要后端，轻量化，可以部署在任何静态托管平台！

平台名	说明
Cloudflare Pages	基于Cloudflare网络，全球超低延迟，性能极佳，除大陆以外
Github Page	速度和Cloudflare Pages差不多，不推荐
Vercel和Netlify	没什么特殊需求的话这两差不多的，都是每月带宽100G，构建时长或次数有限制。他们都可以自动从Git部署，倒是十分方便。还可以绑定自己域名，Vercel必须得绑定不然无法访问(大陆)，速度其实挺快的，小网站挺推荐的，本教程用Vercel举例，如果你要使用Netlify应该是差不多的

一、基本部署流程

1.环境检测与说明

部署之前请先确保你电脑上有Git和 Node.js 版本限制： Node.js ≥ 20＋ npm ≥ 10 在终端中输入以下命令检测

git --version

node -v && npm -v

如果都显示版本号而且满足要求则证明环境无误以下教程仅针对Windows平台，其他平台部署请自行测试

2.开始部署

右键windows图标选择PowerShell 资源管理器内新建一个项目文件夹这里我使用C:\Users\Alpha\Desktop\VSCODE\MyBlogPage作为目录

在PowerShell中执行以下命令

cd C:\Users\Alpha\Desktop\VSCODE\MyBlogPage #进入目录文件夹 替换为你自己的
git clone https://github.com/jackyzha0/quartz.git my-quartz
cd my-quartz
npm install # 安装依赖
npx quartz build
npx quartz build --serve # 本地预览

首次运行前建议在content文件夹中新建一个index.md填入以下内容

---

title: XiaoLan的数字花园 # 浏览器标题

description: 记录日常·科技 #用于搜索引擎SEO

---

  

# 欢迎来到数字花园 👋

  

这里记录技术心得、生活碎碎念和一切有趣的东西。

  

随便逛逛吧～

预览地址默认为 http://localhost:8080，页面支持自动热重载，保存MD或配置文件后自动刷新

3.自定义配置

打开项目根目录下的quartz.layout.ts，参数如下

名字	说明
baseUrl	设置绑定的域名如 https://example.com/
theme	控制颜色主题
pageTitle	浏览器标签栏显示
locale	语言和地区建议改为zh-CN
quartzConfig	编码类型建议utf8 没有就自己新建一个

const config: QuartzConfig = {

  configuration: {

    fileNameEncoding: "utf8",

    pageTitle: "Quartz 4",

修改保存后，刷新本地页面即可

打开根目录下的quartz文件夹进入components文件夹找到Footer.tsx 建议修改即可去除默认版权信息例如修改为

import { QuartzComponentConstructor, QuartzComponentProps } from "./types"

import style from "./styles/footer.scss"

import { version } from "../../package.json"

import { i18n } from "../../i18n"

  

interface Options {

  links: Record<string, string>

  text: string

}

  

export default (() => {

  function Footer({ displayClass }: QuartzComponentProps) {

    const year = new Date().getFullYear()

    const text = "© " + year + " XiaoLan 的数字花园 · 由 Quartz 强力驱动"

  

    return (

      <footer class={`${displayClass ?? ""}`}>

        <hr />

        <p style={{ textAlign: "center", margin: "2rem 0", color: "#666", fontSize: "0.9rem" }}>

          {text}

        </p>

      </footer>

    )

  }

  

  Footer.css = style

  return Footer

}) satisfies QuartzComponentConstructor

二、发布到公网

1.防止404

项目根目录下新建一个vercel.json文件填入即可

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

3.使用Vercel自动部署

登录到Vercel主页 https://vercel.com Add New → Project → Import Git Repository → 选择你推送上去的仓库 → Import 在“Build & Output Settings”中填写以下内容： Framework Preset默认Other Build Command里面填写npx quartz build

设置完以后点击Deploy即可开始部署，稍等一会你就能获得一个 xxx.vercel.app 的访问链接，如果你没有魔法上网就会访问失败建议绑定自己的域名

4.绑定自定义域名

进入 Vercel对应的项目页 → Settings → Domains，添加你自己域名

类型	CNAME解析列表
官方推荐	cname.vercel-dns.com
大陆优化	cname-china.vercel-dns.com
抖音 CDN(未测试)	cname-bytedance.vercel-dns.com

然后记得将 quartz.config.ts 文件中的 baseUrl 改为你的域名

至此，部署流程就完成了。每次 git push，Vercel 都会自动发布。

小兰个人博客

探索