从零搭建Astro博客的完整指南

我的博客 — Fri, 01 May 2026 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://yourblog.com/blog/astro-blog-guide/

为什么选择Astro？

Astro是一个现代化的静态站点生成框架，它有着几个让人无法忽视的优势：

零JavaScript默认：Astro默认不会向客户端发送任何JavaScript，页面加载速度极快
内容优先：内置Markdown/MDX支持，对博客场景天然友好
框架无关：可以在同一个项目中混用React、Vue、Svelte等组件
岛屿架构：只在需要交互的组件上加载JavaScript，其余保持纯HTML

搭建步骤

1. 初始化项目

npm create astro@latest my-blog
cd my-blog

选择"博客"模板可以快速获得一个开箱即用的博客项目。

2. 配置内容集合

Astro的内容集合（Content Collections）为博客文章提供了类型安全的schema验证：

import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    categories: z.array(z.string()).optional(),
    tags: z.array(z.string()).optional(),
  }),
});

export const collections = { blog };

3. 编写文章

在 src/content/blog/ 目录下创建Markdown文件，在frontmatter中填写元数据：

---
title: 我的第一篇博客
description: 开始写作之旅
pubDate: 2026-05-01
categories: ["tech"]
tags: ["Astro", "博客"]
---

文章正文...

4. 部署上线

Astro支持多种部署方式，最简单的是通过适配器部署到Vercel、Netlify等平台：

npm run build

构建产物在 dist/ 目录，直接上传即可。

性能优化建议

图片优化：使用Astro内置的 <Image /> 组件自动处理图片格式和尺寸
字体优化：使用 font-face 配合 font-display: swap 避免布局偏移
代码分割：利用岛屿架构，只在交互组件上加载JS
预渲染：确保所有博客页面都是静态预渲染的

总结

Astro是搭建博客的绝佳选择，它将性能、开发体验和内容管理做到了很好的平衡。如果你正在寻找一个快速、现代的博客框架，不妨试试Astro。

算法书

我的博客 — Tue, 28 Apr 2026 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://yourblog.com/blog/spring-reading-notes/

##《hello算法》

First-blog

我的博客 — Wed, 22 Apr 2026 00:00:00 GMT

This rendering was automatically generated by Frosti Feed and may have formatting issues. For the best experience, please visit: https://yourblog.com/blog/bbbllloooggg/

这是我的第一篇博客123~~~

我的个人博客