使用 Cloudflare Workers 部署 Astro 博客

前言

本文记录了从 Yukina Astro 博客模板出发，通过 Cloudflare Workers Static Assets 部署个人博客的完整流程。

第一步：项目初始化

Yukina 是一个基于 Astro 5 + Svelte 5 + Tailwind CSS 的优雅博客模板。将其作为项目基础，只需复制必要文件并改用 npm 管理依赖（原项目使用 pnpm）。

# 初始化 Git 仓库
cd <项目目录>
git init
git branch -M main

第二步：配置文件修改

package.json

• 将项目名从 yukina 改为 blog
• 删除 packageManager 字段（改用 npm）
• 添加 deploy 脚本

yukina.config.ts

配置站点信息、个人信息和社交链接：

site: "https://<你的域名>.workers.dev",
username: "<你的用户名>",
slugMode: "HASH", // 可选 'RAW' | 'HASH'

第三步：Cloudflare Workers 部署配置

wrangler.jsonc

项目根目录创建 wrangler.jsonc，利用 Workers Static Assets 特性直接托管 Astro 构建产物：

{
  "$schema": "https://raw.githubusercontent.com/cloudflare/workers-sdk/main/packages/wrangler/config-schema.json",
  "name": "blog",
  "compatibility_date": "2026-04-29",
  "assets": {
    "directory": "./dist"
  }
}

这种方式不需要编写任何 Worker 代码，纯静态站点开箱即用。

添加部署脚本

"deploy": "npm run build && wrangler deploy"

第四步：安装依赖与构建验证

npm install
npm run build

构建成功后，dist/ 目录生成静态文件，Pagefind 自动建立搜索索引。

第五步：Git 与 GitHub

使用 gh CLI 创建私有仓库并推送：

gh repo create <用户名>/<仓库名> --private --source=. --remote=origin --push

第六步：本地预览

npm run preview -- --host

注意 Windows 下 Astro 默认绑定 IPv6，需要加 --host 参数才能通过 localhost 访问。

第七步：图片资源优化

将头像和横幅图片放入 public/ 目录，使用 Node.js sharp 库转换为 WebP 格式以大幅减小体积：

文件	原始大小	WebP	缩减
头像	514 KB	36 KB	93%
横幅1	182 KB	55 KB	70%
横幅2	191 KB	55 KB	71%

转换命令示例：

const sharp = require('sharp');
sharp('input.png').webp({ quality: 80 }).toFile('output.webp');

总结

Cloudflare Workers Static Assets 为 Astro 静态博客提供了极佳的部署体验：

• 全球 CDN 加速，330+ 城市节点
• 自动缓存，无需额外配置
• 未来可无缝扩展 Workers 动态功能（KV、D1、R2）