个人博客搭建 - Pinero Blog

这是我第一次真正搭建属于自己的个人博客。

它不是一个复杂到难以维护的系统，也不是一个只停留在本地电脑里的练习项目。它有自己的代码仓库，有自动部署流程，也绑定了自己的域名。换句话说，从现在开始，只要我写下内容、提交代码、推送到 GitHub，网站就会自动更新。

这篇文章记录一下整个搭建过程。它更像是一份复盘：我做了什么，为什么这样做，以及这个博客后面会如何继续维护。

前置准备：需要用到哪些工具和平台#

在正式开始搭建之前，需要准备以下工具和服务：

类别	工具 / 平台	用途
代码托管	GitHub	存放博客源码，触发自动部署
前端框架	Astro	构建静态博客网站
博客模板	Firefly	提供现成的博客界面和功能
部署平台	Vercel	自动构建并托管网站
包管理器	pnpm	安装项目依赖（要求 Node.js >= 22）
版本控制	Git	管理代码版本
代码编辑	VS Code / TRAE 等	编写 Markdown 和修改配置
域名注册	腾讯云 / 阿里云等（可选）	购买自定义域名

以上工具大部分都有免费额度，个人博客完全够用。整个搭建过程不需要购买服务器，成本主要在购买域名上（如果不需要自定义域名，甚至可以零成本）。

建议先在本地安装好 Node.js、pnpm 和 Git，并注册好 GitHub 和 Vercel 账号，后面会直接用到。

为什么选择静态博客#

个人博客有很多搭建方式，比如自己买服务器、安装数据库、部署 WordPress，或者使用现成的博客平台。

我最后选择了静态博客，核心原因有三个：

结构简单。文章就是 Markdown 文件，图片和视频就是普通资源文件。
部署稳定。网站构建后是一组静态文件，不依赖数据库，也不需要长期运行后端服务。
维护成本低。只要 GitHub 和 Vercel 正常工作，网站就能持续访问。

对个人博客来说，静态站点已经足够。它不负责复杂业务，只需要把内容稳定、快速地展示出来。

技术栈选择#

这个博客基于 Astro 构建，并参考了 Firefly 这个模板。

Astro 的定位很适合内容型网站。它可以把 Markdown 文章转换成静态页面，也能在需要交互的地方使用前端组件。简单理解就是：普通文章尽量静态化，真正需要动态效果的部分再交给 JavaScript。

选择 Astro 而不是其他框架的原因：

性能优先：Astro 默认发送零 JavaScript，页面加载速度非常快。
内容友好：原生支持 Markdown 和 MDX，写博客非常自然。
生态成熟：有官方的图片优化、RSS 生成、站点地图等功能。
部署灵活：构建产物是纯静态文件，可以部署到任何静态托管平台。

Firefly 模板则负责解决大部分博客常见功能，例如：

响应式导航栏和侧边栏
文章列表、分页、归档
标签和分类系统
RSS 订阅和搜索功能
暗色 / 亮色模式切换
评论系统集成
代码高亮和数学公式支持

我的主要工作是把它改成自己的内容和自己的发布流程。

代码仓库和内容结构#

我在 GitHub 上创建了一个仓库，用来保存整个博客项目。

这个项目里最重要的内容目录是：

1
src/content/posts

每一篇文章都是一个 Markdown 文件。例如这篇文章对应的文件就是：

1
src/content/posts/build-my-own-blog.md

文章开头的 --- 区域叫 Frontmatter，用来描述文章的元信息：

1
---
2
title: "我是如何搭建自己的博客和网址的"
3
published: 2026-06-30
4
description: "记录从 GitHub 仓库、Astro 模板、Vercel 部署到自定义域名解析的完整过程。"
5
tags: ["博客"]
6
category: "建站"
7
draft: false
8
pinned: true
9
---

这些字段会影响文章在网站里的展示方式。

title 是标题。
published 是发布时间。
description 是文章列表里的摘要。
tags 是标签，支持多个。
category 是分类。
draft 控制是否为草稿（设为 true 则不会在网站显示）。
pinned 控制是否置顶。

这样做的好处是很清楚：正文负责表达内容，Frontmatter 负责告诉网站如何展示这篇内容。

本地开发环境搭建#

把 GitHub 上的仓库克隆到本地后，第一次运行需要安装依赖：

1
pnpm install

安装完成后，可以启动本地开发服务器：

1
pnpm dev

默认会在 localhost:4321 启动预览。此时修改任何文件，浏览器都会自动刷新，非常方便调试。

常用的命令还有：

命令	作用
`pnpm dev`	本地开发预览
`pnpm build`	构建生产版本
`pnpm preview`	预览构建结果
`pnpm check`	类型检查
`pnpm lint`	代码检查与自动修复
`pnpm new-post <文件名>`	快速创建新文章

自动部署流程#

博客不是手动把文件上传到服务器，而是通过 GitHub 和 Vercel 自动部署。

整体流程是：

1
本地修改内容
2
    ↓
3
git commit 提交
4
    ↓
5
git push 推送到 GitHub
6
    ↓
7
Vercel 检测到新提交
8
    ↓
9
自动执行 pnpm build
10
    ↓
11
发布最新网站

也就是说，真正的发布动作是 git push。

只要代码推送到 GitHub，Vercel 就会自动拉取最新代码，安装依赖，执行构建命令，然后把 dist 目录里的静态文件发布出去。

如何将 Vercel 绑定 GitHub 仓库#

登录 Vercel，点击 “Add New Project”。
选择 Import Git Repository，授权 Vercel 访问你的 GitHub 账号。
找到博客仓库，点击 Import。
Framework Preset 选择 Astro，Build Command 保持默认 pnpm build，Output Directory 保持默认 dist。
点击 Deploy，等待首次部署完成。

后续每次 push 代码到 main 分支，Vercel 都会自动重新部署，不需要手动操作。

这个流程的优势是可追溯。每一次修改都会留下 Git 提交记录。如果以后出现问题，也能知道是哪一次修改引入的。

自定义域名是如何接上的#

博客部署到 Vercel 后，默认会有一个 Vercel 提供的访问地址。但我希望使用自己的域名。

域名是在域名注册商购买的，DNS 解析需要配置到 Vercel。

常见做法是：

1
@     A      76.76.21.21
2
www   CNAME  cname.vercel-dns.com

这里的含义是：

@ 表示根域名。
www 表示 www 子域名。
A 记录把根域名指向 Vercel 的入口 IP。
CNAME 记录把 www 子域名指向 Vercel 的域名服务。

配置完成后，还需要在 Vercel 项目设置里添加自定义域名，Vercel 会自动颁发 HTTPS 证书。

DNS 解析不是瞬间全网生效的。有时候配置已经正确，但浏览器还显示旧页面，这通常是 DNS 缓存或 Vercel 部署缓存导致的。等待几分钟，或者强制刷新浏览器，一般就能看到新版本。

图片和视频如何管理#

博客里的文章图片和视频，我会放在：

1
public/uploads

例如某篇文章的资源可以这样组织：

1
public/uploads/build-my-own-blog/cover.jpg
2
public/uploads/build-my-own-blog/demo.mp4

在 Markdown 里引用图片：

1
![博客截图](/uploads/build-my-own-blog/cover.jpg)

引用视频：

1
<video controls src="/uploads/build-my-own-blog/demo.mp4"></video>

这种方式的好处是路径直观，也方便删除。以后如果删除某篇文章，并且它的图片和视频只被这篇文章使用，就可以把对应的资源文件夹一起删除。

另外，Astro 会对 src/assets 目录下的图片进行自动优化，而 public 目录下的文件会直接原样复制到构建产物。因此封面图等需要展示的图片可以放在 src/assets，文章配图放在 public/uploads 即可。

删除内容时要注意什么#

删除文章不只是删除网页上的卡片，而是删除源文件。

例如删除一篇文章：

1
git rm src/content/posts/example.md

如果它有独立素材目录：

1
git rm -r public/uploads/example

然后提交并推送：

1
git commit -m "Remove example post"
2
git push

之前我也遇到过一个问题：文章文件已经删除，但线上仍然显示旧文章。原因是构建缓存保留了旧的内容数据。

为了解决这个问题，我给构建流程加了缓存清理步骤。现在每次 pnpm build 都会先清理 Astro 的构建缓存，避免已经删除的文章继续出现在网站里。

这个博客后续怎么维护#

后续维护其实很简单。

发布新文章#

最推荐的方式是使用项目自带的脚手架：

1
pnpm new-post my-new-post

这会在 src/content/posts/ 下创建一个带有标准 Frontmatter 的新文件，直接打开编辑即可。

也可以手动创建：

1
# 1. 创建文章文件
2
# 2. 把图片放入 public/uploads/文章名/
3
# 3. 提交并推送
4
git add src/content/posts public/uploads
5
git commit -m "Add new post"
6
git push

修改配置#

1
git add src/config
2
git commit -m "Update site config"
3
git push

删除内容#

1
git rm 对应文件
2
git commit -m "Remove old content"
3
git push

日常维护清单#

定期检查 Vercel 部署状态，确保构建没有失败。
保持模板依赖更新，及时升级 Astro 和相关插件。
备份重要图片和视频到本地或其他云存储。
关注 GitHub 上的模板更新，适时合并新功能。

这个流程不算复杂，但它让我第一次拥有了一个比较完整的个人内容系统。

写作本身是内容，Git 是版本记录，Vercel 是发布管道，域名是入口。它们组合在一起，就变成了一个可以长期维护的个人博客。

结语#

这篇文章是博客真正意义上的第一篇记录。

它既是一次搭建过程的总结，也是一个开始。之后这里会继续记录我对 AI、软件开发、技术实践和个人成长的理解。内容不一定都成熟，但会尽量真实、清楚，并且能被复盘。

如果未来某一天我回头看这个博客，希望能看到的不只是页面变得更完整，也能看到自己一步一步学习和整理的痕迹。