静态博客的优势#

相比 Halo 等动态博客系统，静态博客有这些优势：

• 本地写作：在本地用 Markdown 写文章，无需登录后台
• 版本控制：所有文章都是 Markdown 文件，方便管理和备份
• 自动部署：推送 Git 后自动部署，无需手动上传
• 完全免费：可以部署在 GitHub Pages、Vercel 等免费平台
• 性能极佳：静态文件加载速度超快
• 安全可靠：没有数据库，不存在 SQL 注入等安全问题

为什么是 Astro？#

对比了几种静态博客生成器后，我选择了 Astro：

1. 现代化：最新的技术栈，构建速度极快
2. 简单易用：配置简单，学习曲线平缓
3. 灵活强大：支持多种 UI 框架（Vue、React 等）
4. 性能最好：默认情况下零 JavaScript 发送到客户端
5. 生态完善：社区活跃，插件丰富

第一步：创建项目结构#

Astro 项目的基本结构：

1
blog-astro/
2
├── src/
3
│   ├── content/
4
│   │   └── blog/          # 博客文章目录
5
│   ├── layouts/           # 页面布局模板
6
│   ├── pages/             # 页面文件
7
│   └── styles/            # 样式文件
8
├── public/                # 静态资源
9
├── astro.config.mjs       # Astro 配置
10
└── package.json           # 项目依赖

第二步：安装依赖#

在项目目录运行：

1
npm install

第三步：本地预览#

1
npm run dev

然后在浏览器打开 http://localhost:4321 就能看到博客了！

第四步：写作和发布#

写作：

• 在 src/content/blog/ 目录创建 Markdown 文件
• 文件顶部添加 Frontmatter（标题、日期、描述等）

发布：

1
# 提交到 Git
2
git add .
3
git commit -m "new post"
4
git push
5

6
# Vercel 会自动检测并部署

1. 写新文章#

在 src/content/blog/ 创建新文件：

1
---
2
title: '文章标题'
3
description: '文章描述'
4
pubDate: 2026-02-07
5
---
6

7
# 这里写文章内容
8

9
支持 Markdown 语法！

2. 本地预览#

1
npm run dev

访问 http://localhost:4321 查看效果

3. 部署上线#

1
# 提交代码
2
git add .
3
git push
4

5
# Vercel 自动部署，几秒钟后就能在线访问

与 Halo 的对比#

Astro 的优势#

1. 开发体验好：本地写文章，用自己熟悉的编辑器
2. 完全自动化：推送即部署，无需手动操作
3. 版本控制：每次修改都有记录，可以随时回滚
4. 成本低：完全免费托管在 Vercel
5. 性能好：静态文件加载速度快
6. 安全：没有数据库，不会被黑客攻击

我的体验#

整个过程对我这样的编程新手来说非常友好：

1. 本地写作：用熟悉的编辑器写 Markdown，不需要登录网页后台
2. 自动部署：推送 Git 就自动发布，完全自动化
3. 完全免费：Vercel 托管，不花一分钱
4. 性能极佳：静态文件加载速度超快
5. 版本控制：所有文章都在 Git 中管理，永远不会丢失

AI 辅助开发的优势#

通过这次经历，我深刻体会到 AI 辅助开发的强大：

• 降低门槛：新手也能快速搭建专业级系统
• 节省时间：不需要从头学习各种技术栈
• 减少错误：AI 会自动避免常见的配置错误
• 学习机会：在 AI 的操作中也能学到很多知识

Astro 确实非常适合想要简单、自动化博客的人，配合 AI 助手更是让建站变得异常简单。如果你也想搭建博客但担心技术门槛，不妨试试 Astro + Vercel + AI 助手！

技术文档#

• Astro 官网
• Astro 官方文档
• Vercel 官网
• Vercel 部署指南

AI 工具#

• Claude Code - 本次搭建使用的 AI 编程助手
• Claude - Anthropic 出品的 AI 助手

搭建日期：2026年2月7日 博客系统：Astro 4.x + Mizuki 主题 部署方式：Vercel