我的博客是怎么做的

15分钟阅读字数 2,813

我的博客是这个：chengliang.pro。

它背后的组合是：

Obsidian + Quartz + GitHub + Vercel

简单说就是：我平时只需要在 Obsidian 里正常写笔记，写完之后 commit & push 一下，Vercel 会自动重新部署，然后我就能在博客页面看到新文章。

这套方案适合想认真维护个人内容的人。它不是最省事的方案，但好处是：文章都在自己电脑上，格式是 Markdown，代码和内容都在自己的 GitHub 仓库里，后面想迁移、改样式、加页面都比较自由。

最终效果

你可以把它理解成一个自动化流水线：

Obsidian 写文章
↓
保存成 Markdown 文件
↓
用 Git 提交并推送到 GitHub
↓
Vercel 检测到更新，自动部署
↓
访问自己的域名看到最新博客

第一次搭建会稍微麻烦一点，但搭好之后，日常写作基本就只剩三件事：

  1. 打开 Obsidian 写文章
  2. 用 SourceTree 提交代码
  3. 推送到 GitHub，等 Vercel 自动发布

基础知识

这篇文章尽量面向 0 基础，但有几个概念建议先知道大概意思。

Git 和 GitHub

Git 是一个版本管理工具。你可以把它理解成“给文件夹拍快照”的工具：每次改完内容，提交一次，以后就知道自己改过什么，也可以回到之前的状态。

GitHub 是放代码和文件的云端仓库。你的博客项目推到 GitHub 之后，Vercel 才能从这个仓库里读取最新内容并部署。

你不需要一开始就精通 Git。搭博客只需要会几个动作：

  • commit：保存这一次修改记录
  • push：把本地修改推送到 GitHub
  • pull：把 GitHub 上的最新内容拉到本地

如果不想用命令行，可以用 SourceTree 这种可视化工具。

部署和域名

部署就是把本地项目发布到互联网，让别人能通过网址访问。

域名就是网站地址，比如我的 chengliang.pro。如果没有自己的域名，Vercel 也会给你一个默认域名；如果你买了自己的域名，可以在 Vercel 里绑定。

这些概念网上有很多详细教程，我这里不展开讲原理，只讲这套博客怎么落地。

Node.js 和依赖

Quartz 本质上还是一个前端项目，所以本地运行时通常需要安装 Node.js。你不需要理解太多，只要知道它是“让这个博客项目在你电脑上跑起来”的运行环境。

如果 AI IDE 在执行命令时报错，比如提示找不到 node、npm、pnpm，就把报错原样发给它，让它先帮你安装或配置环境。

必备仓库

核心是 Quartz。

Quartz 在 GitHub 上的项目仓库页面
Quartz 是整个博客的核心，Markdown 内容最终会由它生成网站。

Quartz 是一个静态网站生成器，可以把 Markdown 文件变成完整的网站。只有 Obsidian 的话，你得到的只是本地笔记；有了 Quartz，这些笔记才能变成可以公开访问的博客。

Quartz 很适合 Obsidian 用户，因为它支持双链、标签、目录、搜索、反向链接这些知识库常见功能。你不用从 0 写网站，只需要在它的基础上改首页、改样式、放文章。

核心软件

Obsidian

Obsidian 是我用来写文章的软件。

Obsidian 官网首页
Obsidian 负责写作和管理本地 Markdown 笔记。

它的核心优点是本地优先：文章就是一个个 Markdown 文件，存在你电脑的文件夹里。你不用担心平台改版、导出困难，后面想换工具也比较容易。

SourceTree

SourceTree 是 Git 可视化工具。

如果你不熟命令行，用它会轻松很多。你可以在界面里看到哪些文件改了，点几下就能提交和推送。

Codex / Trae / Qoder

这类 AI IDE 主要用来做博客首页、导航、样式和小功能调整。

比如你可以把自己的简历、自我介绍、想要的页面结构发给 AI，让它帮你改 Quartz 的首页，添加“主页 / 博客 / 关于”等 tab，或者把首页做得更像一个个人名片。

操作步骤

下面按从 0 到上线的顺序来。

1. 准备首页内容

先准备一段你想放在博客首页的内容，不需要很正式，可以是：

  • 一份简历
  • 一段自我介绍
  • 你的项目列表
  • 你的社交账号
  • 你想展示的文章分类
  • 你希望别人看到你的第一印象

这一步的目标不是写得完美，而是给 AI 足够的素材。

你可以先写成这样：

我是 XXX，目前做 XXX。
 
我关注：
- 前端开发
- 独立产品
- AI 工具
- 英语学习
 
我做过的项目：
- 项目 A：一句话介绍
- 项目 B：一句话介绍
 
我希望博客首页包含：
- 个人介绍
- 代表项目
- 最新文章
- 联系方式

有了这份内容，后面让 AI 改首页会容易很多。

2. 生成博客项目并本地运行

打开 AI IDE，比如 Codex、Trae、Qoder、Cursor 都可以，然后把 Quartz 仓库地址和你的首页素材发给它。

可以直接这样说：

请基于这个仓库帮我搭建一个个人博客：
https://github.com/jackyzha0/quartz
 
这是我的个人介绍和简历内容：
[粘贴你的内容]
 
要求：
1. 首页展示我的个人介绍、项目和联系方式
2. 顶部导航包含主页、博客、关于
3. 博客文章使用 Markdown 管理
4. 帮我在本地 localhost 跑起来
5. 跑起来之后告诉我本地访问地址

AI 一般会帮你完成这些事：

  • 拉取或初始化 Quartz 项目
  • 安装依赖
  • 修改首页
  • 配置导航
  • 启动本地开发服务器

本地运行成功后，你会看到类似这样的地址：

http://localhost:8080

在浏览器打开这个地址，就能看到你的博客雏形。

如果这里失败，不要急着自己猜。把终端里的报错复制给 AI，通常让它按顺序处理：

  1. 检查 Node.js 是否安装
  2. 检查依赖是否安装完成
  3. 检查启动命令是否正确
  4. 重新启动本地服务

3. 把文章迁移到 Obsidian 对应目录

Quartz 的文章通常放在 content 目录下。你可以把这个目录当成 Obsidian 的 vault，或者在 Obsidian 里打开整个博客项目。

推荐做法是：

  1. 打开 Obsidian
  2. 选择“打开本地文件夹作为仓库”
  3. 选择 Quartz 项目的 content 目录，或者选择整个博客项目
  4. 把你原来的 Markdown 文章复制进去

如果你想分类，可以建文件夹，比如：

content/
  技术/
    第一篇技术文章.md
  英语/
    英语学习笔记.md
  Projects/
    我的项目.md

迁移完之后，回到本地博客页面刷新一下。如果本地服务还在运行，你应该能看到新文章。

这里有一个小建议：文件名尽量清楚，不要只叫 1.md、note.md。比如 我的博客是怎么做的.md 就比 blog.md 更容易维护。

4. 新建 GitHub 仓库并推送

本地能跑起来之后，就可以把项目放到 GitHub。

大致步骤是：

  1. 登录 GitHub
  2. 新建一个空仓库
  3. 不要勾选自动生成 README
  4. 把当前博客项目推送到这个仓库

如果你用 SourceTree，可以这样操作：

  1. 用 SourceTree 打开博客项目文件夹
  2. 查看改动文件
  3. 填写提交信息，比如 init blog
  4. 点击提交
  5. 添加 GitHub 远程仓库地址
  6. 点击推送

推送成功后，你在 GitHub 仓库页面应该能看到完整的博客项目文件。

5. 用 Vercel 部署

接下来注册或登录 Vercel。

Vercel 项目的生产部署页面
Vercel 关联 GitHub 仓库后，会在每次 push 后自动部署最新版本。

部署步骤：

  1. 点击新建项目
  2. 选择刚才创建的 GitHub 仓库
  3. 按照 Vercel 默认识别的配置继续
  4. 点击 Deploy
  5. 等部署完成

如果一切顺利，Vercel 会给你一个默认访问地址。以后只要你把新文章 push 到 GitHub，Vercel 就会自动重新部署。

也就是说，日常更新博客不需要手动登录 Vercel。你只要写文章、提交、推送，它会自动完成发布。

6. 绑定自己的域名

Vercel 自带的域名在国内访问可能不稳定。如果你希望国内访问更顺畅，建议准备一个自己的域名。

域名可以通过各种域名服务商购买。买好之后，在 Vercel 项目的 Domains 里添加你的域名，然后按页面提示配置 DNS。

一般流程是：

  1. 在 Vercel 项目里进入 Settings
  2. 找到 Domains
  3. 输入你的域名
  4. 去域名服务商后台添加 Vercel 要求的 DNS 记录
  5. 等待解析生效

DNS 生效有时很快，有时需要等一会儿。配置完成后，你就可以通过自己的域名访问博客。

日常怎么写文章

搭好之后，我的日常流程是：

  1. 在 Obsidian 里新建文章
  2. 正常写 Markdown
  3. 本地预览一下博客效果
  4. 用 SourceTree 提交
  5. push 到 GitHub
  6. 等 Vercel 自动部署

文章不需要每次都写得很正式。个人博客的价值在于长期积累：技术笔记、项目复盘、读书摘录、学习方法、踩坑记录，都可以先写下来。

常见问题

必须会代码吗？

不必须，但会一点点会更舒服。

如果你完全 0 基础，可以把绝大部分搭建、改样式、报错处理交给 AI IDE。你要做的是描述清楚自己想要什么，并在它跑不起来的时候把报错发回去。

Obsidian 和 Quartz 是什么关系？

Obsidian 负责写和管理笔记，Quartz 负责把笔记变成网站。

一个偏内容生产，一个偏网站发布。

为什么不用现成博客平台？

现成平台当然可以，比如公众号、知乎、Medium、语雀、Notion 等。

我选择这套方案，是因为它更像一个属于自己的长期内容资产：文件在本地，仓库在自己账号下，域名也是自己的。短期看麻烦一点，长期看更自由。

改首页和样式难不难？

如果手写代码，会有一点门槛。

但现在有 AI IDE，可以把需求说清楚，让它一点点改。比如：

帮我把首页改成更像个人作品集，保留博客入口，增加项目卡片和社交链接。

或者：

帮我把顶部导航改成：主页、博客、项目、关于。

每次改完都让它本地运行并检查页面，问题会少很多。

总结

这套博客系统的核心思路是：

  • 用 Obsidian 写内容
  • 用 Quartz 把 Markdown 变成网站
  • 用 GitHub 保存项目和文章
  • 用 Vercel 自动部署
  • 用自己的域名作为长期入口

如果你只是想立刻发一篇文章，现成平台更快。

但如果你想拥有一个长期维护、可迁移、可定制、和自己笔记系统打通的个人网站，Obsidian + Quartz + GitHub + Vercel 是一套很值得折腾一次的方案。