我是如何搭建自己的博客和网址的

Tue, 30 Jun 2026 00:00:00 GMT

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

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

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

为什么选择静态博客#

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

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

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

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

技术栈选择#

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

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

这带来的好处是：

首页、文章页、归档页都可以在构建时生成。
文章内容不需要数据库，直接写在 src/content/posts 里。
图片可以通过 Astro 自动优化，减少加载体积。
最终产物可以直接部署到 Vercel。

模板负责解决大部分博客常见功能，例如导航、文章列表、标签、分类、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 控制是否为草稿。
pinned 控制是否置顶。

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

自动部署流程#

博客不是手动把文件上传到服务器，而是通过 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 目录里的静态文件发布出去。

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

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

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

1
lifepeace.cloud

域名是在腾讯云购买的，DNS 解析需要配置到 Vercel。

常见做法是：

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

这里的含义是：

@ 表示根域名，也就是 lifepeace.cloud。
www 表示 www.lifepeace.cloud。
A 记录把根域名指向 Vercel 的入口 IP。
CNAME 记录把 www 子域名指向 Vercel 的域名服务。

配置完成后，访问 www.lifepeace.cloud 就会进入 Vercel 部署出来的网站。

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>

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

删除内容时要注意什么#

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

例如删除一篇文章：

Terminal window

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

如果它有独立素材目录：

Terminal window

1
git rm -r public/uploads/example

然后提交并推送：

Terminal window

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

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

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

这个博客后续怎么维护#

后续维护其实很简单。

写文章时：

Terminal window

1
git add src/content/posts public/uploads
2
git commit -m "Add new post"
3
git push

修改配置时：

Terminal window

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

删除内容时：

Terminal window

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

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

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

结语#

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

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

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

Pinero Blog

我是如何搭建自己的博客和网址的

为什么选择静态博客#

技术栈选择#

代码仓库和内容结构#

自动部署流程#

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

图片和视频如何管理#

删除内容时要注意什么#

这个博客后续怎么维护#

结语#