my.woshicai.tech
· 前端开发

使用 Bun 和 Astro 构建静态博客

学习如何使用 Bun 作为包管理器和运行时来构建 Astro 博客。

Astro Bun 教程

为什么选择 Bun + Astro？

Bun 是一个现代化的 JavaScript 运行时，它的主要优势包括：

  • ⚡️ 极快的安装速度 - 比 npm 快 10-20 倍
  • 🔧 内置包管理器 - 无需单独安装 npm/yarn
  • 🛠️ 内置测试器 - 减少开发依赖
  • 📦 兼容 npm 生态 - 可以使用所有现有的包

结合 Astro 的静态生成能力，这是构建个人博客的绝佳组合。

初始化项目

创建一个新的 Astro 项目：

# 使用 Bun 创建项目
bun create astro@latest my-blog

# 进入项目目录
cd my-blog

# 安装依赖
bun install

添加 TailwindCSS

bun add -D tailwindcss @astrojs/tailwind

然后在 astro.config.mjs 中添加 Tailwind 集成：

import { defineConfig } from 'astro/config';
import tailwind from '@astrojs/tailwind';

export default defineConfig({
  integrations: [tailwind()],
});

开发和构建

# 开发服务器
bun run dev

# 构建生产版本
bun run build

# 预览构建结果
bun run preview

部署到 Cloudflare Pages

  1. 将代码推送到 GitHub
  2. 在 Cloudflare Dashboard 中连接仓库
  3. 配置构建设置：
    • Build command: bun run build
    • Build output directory: dist

就是这么简单！

总结

使用 Bun + Astro 开发静态博客非常简单和高效。Bun 的速度让开发体验更加流畅，而 Astro 的性能优化让你的博客飞快。

开始构建你的博客吧！