从零开始用 Astro 搭建个人博客
在使用 Hugo 时，自己也同时注意到了 Astro，它给我的感觉是更现代化，组件化的感觉更强一点，所以小小的尝试一下。
一。环境准备
Node.js - v18.17.1 或 v20.3.0、v22.0.0 或更高版本。（v19 和 v21 均不支持。）
1.新建空白项目或者复制现成主题
# 新建空白项目
pnpm create astro@latest
# 复制现成主题
git clone https://github.com/radishzzz/astro-theme-retypeset
2.通过 pnpm 管理和安装包
# 安装 pnpm
npm install -g pnpm
# 安装依赖
pnpm install
3.本地开发 pnpm dev
- 启动开发服务器，默认监听在 http://localhost:4321
- 支持热更新（Hot Module Replacement）
4.构建生产版本 pnpm build
- 构建生成静态网站，输出到 dist/ 目录。
5.本地开发 pnpm preview
- 启动一个本地服务器来查看构建后的 dist/ 目录（模拟部署后效果）。
二。项目结构
my-astro-site/
├── public/ # 静态资源，直接拷贝进 dist/
│ └── favicon.ico
│ └── images/
├── src/ # 主代码目录
│ ├── assets/ # 图片、字体、媒体文件（构建时处理）
│ ├── components/ # 可复用组件（.astro, .jsx, .tsx）
│ │ └── Nav.astro
│ ├── content/ # Markdown 博客文章（结合 content collections）
│ │ └── blog/
│ │ └── hello-world.md
│ ├── layouts/ # 页面布局组件
│ │ └── BaseLayout.astro
│ ├── pages/ # 页面文件，自动成为路由
│ │ ├── index.astro # /
│ │ ├── about.astro # /about
│ │ └── blog/
│ │ └── [slug].astro # 动态路由 /blog/:slug
│ ├── styles/ # 全局和模块样式（可含 Tailwind/UnoCSS）
│ │ └── global.css
│ └── utils/ # JS/TS 工具函数或服务
│ └── date.ts
├── astro.config.mjs # Astro 配置文件
├── package.json # 项目依赖和脚本
├── tsconfig.json # TypeScript 配置（可选）
├── .gitignore
└── .astro/ # 构建缓存目录（可忽略）
三。主题推荐
四。对比体验
在项目构建速度这一块，Hugo 确实可以说是遥遥领先，但是 Astro 也有自己的优势，比如组件化的开发，有很多现成的包可以引用，在开发过程中可以更加方便地进行组件的复用和组合。对于不是专业前端的我来说，使用 Hugo 会感觉更方便一些。