在 Astro 中搭建个人主页与 Blog

2027年1月1日

在 Astro 中搭建个人主页与 Blog

本文记录我如何用 Astro + Starlight 搭建本站点。它纯静态、构建快、Markdown 友好,非常适合个人主页与博客。

为什么选择 Astro

纯静态输出: astro build 会生成静态 HTML/CSS/JS,可直接部署到任意静态托管
岛屿架构: 默认零 JS,组件可按需加载,页面加载飞快
Markdown 友好: 用 .md / .mdx 写内容,内置代码高亮
生态丰富: Starlight 文档主题 + starlight-blog 插件,开箱即用的博客能力

初始化项目

# 用 Starlight 模板初始化站点
npm create astro@latest -- --template starlight

# 安装博客插件与 sitemap
npm install starlight-blog
npm install @astrojs/sitemap

目录结构

astro-site/
├── astro.config.mjs        # 站点配置(Starlight + starlight-blog)
├── src/
│   ├── content.config.ts   # 内容集合 schema
│   ├── content/docs/       # 文档与博客内容
│   │   ├── about.md        # 关于页
│   │   ├── projects.md     # 项目展示
│   │   └── blog/           # 博客文章
│   │       ├── tech/       # 技术笔记
│   │       └── life/       # 生活随笔
│   ├── pages/index.astro   # 自定义首页
│   └── styles/             # 主题样式
└── public/                 # 静态资源

配置站点

核心在 astro.config.mjs,通过 Starlight 集成配置标题、导航、侧边栏、社交链接与页脚,并挂载 starlightBlog() 插件开启博客功能。

import starlight from '@astrojs/starlight'
import starlightBlog from 'starlight-blog'

export default defineConfig({
  site: 'https://huiyipai.cloud',
  integrations: [
    starlight({
      title: '挥一拍',
      nav: [
        { label: '首页', link: '/' },
        { label: '博客', link: '/blog/' },
        { label: '项目', link: '/projects/' },
        { label: '关于', link: '/about/' },
      ],
      plugins: [starlightBlog()],
    }),
  ],
})

内容集合与博客文章

src/content.config.ts 里把 starlight-blog 的 schema 合并进 Starlight 的 docs 集合,即可支持博客文章的 date、tags、excerpt 等字段。文章放在 src/content/docs/blog/ 下,自动按日期倒序生成博客列表与标签页。

生成 sitemap

Starlight 生态内置 @astrojs/sitemap,在 astro.config.mjs 的 integrations 里引入即可在构建时自动生成 sitemap.xml,无需手写脚本(详见站长平台收录与推流指南)。

部署

把 dist/ 上传到任意静态托管即可,例如 Nginx、GitHub Pages、Cloudflare Pages、Vercel。