Astro博客

bluesy-astro-theme — Astro 博客模板

作者 John10240

bluesy-astro-theme 是一个基于 Astro 的博客模板,主要面向 Cloudflare Workers Static Assets 部署,支持 Markdown/MDX 内容、Pagefind 搜索和响应式布局。

看看你的网站会是什么样

浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。

3 个预览视图
桌面端首页1 / 3
桌面端截图首屏预览

由服务器浏览器实际访问页面后截取。

全部页面与视图 3

截图用于了解视觉与布局,交互效果请以实际项目为准。

采集于 2026-10-03查看来源

值得关注的模板亮点

从已有项目资料中,快速了解它的特点。

01

基于 Astro 的博客模板,内容使用 Markdown 或 MDX 编写

02

主要面向 Cloudflare Workers Static Assets 部署,wrangler.jsonc 已配置 dist/ 为静态资源目录

03

内置 Pagefind 搜索与响应式布局

04

评论、统计、赞助、广告、音乐、追番和看板娘等第三方功能默认关闭,可按需配置启用

05

评论支持 Waline 或 Twikoo,在 commentConfig.ts 中选择并填写配置

06

MIT 许可证,允许免费使用、修改、商用和分发该版本代码

模板详细介绍

这是一个面向 Cloudflare Workers Static Assets 部署的 Astro 博客模板,由 John10240 维护。模板基于 CuteLeaf 的 Firefly 修改而来,Firefly 又基于 saicaca 的 fuwari 二次开发,采用 MIT 许可证。

内容方面,文章以 Markdown 或 MDX 形式放在 src/content/posts/ 目录,frontmatter 字段定义在 src/content.config.ts 中,支持标题、发布时间、摘要、标签、分类和草稿状态。站点名称、域名和页面开关在 src/config/siteConfig.ts 中配置,作者资料在 src/config/profileConfig.ts 中配置。

功能上,模板内置 Pagefind 搜索和响应式布局;评论、统计、赞助、广告、音乐、追番和看板娘等第三方功能默认关闭,需要填写自己的配置后启用。评论推荐 Waline 或 Twikoo,在 src/config/commentConfig.ts 中填写配置并把 type 改为对应值即可。

部署以 Cloudflare Workers 为主:wrangler.jsonc 已将 Astro 的构建目录 dist/ 配置为静态资源目录,并启用 nodejs_compat,找不到资源时使用构建生成的 404 页面。仓库同时保留 GitHub Pages 和 Vercel 的示例配置,但 Cloudflare Workers 是优先说明和验证的方式。

使用前需要修改站点身份占位内容,包括 example.com、Demo Author 和 [email protected],并替换 public/assets/images/ 中的示例头像和封面。

Astro博客

适合你的项目吗?

适用场景

  • 搭建以 Cloudflare Workers 为托管平台的个人博客
  • 用 Markdown 或 MDX 撰写并管理文章,需要标签、分类和草稿状态
  • 希望博客自带 Pagefind 搜索和响应式布局
  • 需要按需接入 Waline 或 Twikoo 评论等第三方服务
  • 从 Firefly 或 fuwari 衍生模板出发进行二次定制

适合人群

  • 熟悉 Astro 和 pnpm 工作流、准备部署到 Cloudflare Workers 的开发者
  • 希望以 Markdown/MDX 维护内容并自行配置站点信息的博客作者
  • 需要评论、统计等第三方功能可选接入、默认不启用的用户
  • 接受使用前替换示例站点身份、头像和封面等占位内容的用户

上手与定制指南

结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。

  1. 1

    环境要求 Node.js 22 或更高版本,pnpm 版本见 package.json

  2. 2

    本地运行使用 pnpm install 和 pnpm dev,生产构建使用 pnpm build

  3. 3

    使用前修改 src/config/siteConfig.ts、src/config/profileConfig.ts 和 wrangler.jsonc,并替换 public/assets/images/ 中的示例图片

  4. 4

    正式发布前搜索并替换 example.com、Demo Author 和 [email protected] 等占位内容

  5. 5

    部署到 Cloudflare Workers 前需先执行 pnpm build 生成 dist/,再运行 npx wrangler deploy;Sitemap 仅在生产构建时生成

查看仓库使用说明

授权与来源资料

使用条件与限制

免费使用 · 保留许可声明

本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。

使用时需要遵守

  • 允许免费使用、修改、商用和分发该版本代码。
  • 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
  • 代码按现状提供;担保与责任限制以原许可证及适用法律为准。

额外费用与待核对事项

  • 评论、统计、赞助、广告、音乐、追番、看板娘等第三方功能默认关闭,需自行填写配置后才能启用,可能涉及外部服务账号或费用。
  • 使用评论、统计、赞助等第三方服务需自行提供配置,可能要求注册账号或申请 API 密钥。
  • 启用评论需自行部署或配置 Waline/Twikoo 服务,属于外部依赖。
  • 部署到 Cloudflare Workers 需登录 Cloudflare 账号,属于外部服务要求。
  • 发布前必须先执行 pnpm build 生成 dist/,否则 Wrangler 无法发布静态资源。
  • 正式发布前必须替换 example.com、Demo Author、[email protected] 等占位内容。
  • 需替换 public/assets/images/ 中的示例头像和封面,示例图片可能涉及单独授权。
  • 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
  • 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据

Permission is hereby granted, free of charge

许可证原文

评论、统计、赞助、广告、音乐、追番和看板娘等第三方功能默认关闭,可按需填写自己的配置后启用。

README 原文

如需评论、统计、赞助或其他第三方服务,请填写自己的配置后再启用。

README 原文

在 `src/config/commentConfig.ts` 中填写对应服务配置,并将 `type` 改为 `"waline"` 或 `"twikoo"` 后即可启用。

README 原文

首次使用前登录 Cloudflare,并确认当前账号:

README 原文

必须先执行 `pnpm build` 生成 `dist/`,Wrangler 才能发布静态资源。

README 原文

模板中的站点身份均为占位内容。正式发布前,请搜索并替换 `example.com`、`Demo Author` 和 `[email protected]`。

README 原文

替换 `public/assets/images/` 中的示例头像和封面。

README 原文
https://github.com/John10240/bluesy-astro-theme/blob/main/LICENSEhttps://github.com/John10240/bluesy-astro-theme/blob/main/README.md

DeepSeek 根据仓库许可证和 README 整理 ·2026-10-03。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。

项目核对记录与介绍依据

模板资料

来源平台
GitHub
资料与维护参考分
资料较完整 · 80 / 100
技术栈
Astro
网站类型
博客
这个分数如何计算

本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。

这个项目需要核对什么

记录的仓库更新时间
2026-10-02
截图检查日期
2026-10-03

已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。

目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。

查看具体选型方法 →

介绍的制作与核对状态

介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。

审核声明: [email protected] · 2026-10-04

查看当时使用的来源资料

SHA-256: 5b3b46fc5b87afb6f4103102a423fe6d045213f2685c136b7bcee82dbc89b33d

2026-10-03T13:51:15.915Z

来源文件 / 仓库
# bluesy-astro-theme

这是一个面向 **Cloudflare Workers Static Assets** 部署的 Astro 博客模板,使用 Astro 7、Svelte 5、Tailwind CSS 4 和 pnpm 构建,支持 Markdown/MDX 内容、Pagefind 搜索、响应式布局及多种可选扩展。

- 在线预览:<https://bluesy-astro-theme.qiui.workers.dev>
- GitHub 仓库:<https://github.com/John10240/bluesy-astro-theme>

评论、统计、赞助、广告、音乐、追番和看板娘等第三方功能默认关闭,可按需填写自己的配置后启用。

## 项目来源

本模板基于 **CuteLeaf** 维护的 [Firefly](https://github.com/CuteLeaf/Firefly) 修改而来;Firefly 则基于 **saicaca** 的 [fuwari](https://github.com/saicaca/fuwari) 二次开发。

感谢 CuteLeaf 和 saicaca 的开源工作。各项目的版权归属以其原仓库和许可证为准。

## 环境要求

- Node.js 22 或更高版本
- pnpm 11(准确版本见 `package.json`)

## 本地运行

```bash
pnpm install
pnpm dev
```

生产构建:

```bash
pnpm build
```

## 使用前修改

1. 在 `src/config/siteConfig.ts` 中修改站点名称、域名和页面开关。
2. 在 `src/config/profileConfig.ts` 中修改作者资料。
3. 在 `src/content/posts/` 中添加 Markdown 或 MDX 文章。
4. 替换 `public/assets/images/` 中的示例头像和封面。
5. 在 `wrangler.jsonc` 中修改 Cloudflare Worker 名称。
6. 如需评论、统计、赞助或其他第三方服务,请填写自己的配置后再启用。

模板中的站点身份均为占位内容。正式发布前,请搜索并替换 `example.com`、`Demo Author` 和 `[email protected]`。

## 评论方案

本模板的评论功能默认关闭,推荐按需选择 [Waline](https://waline.js.org/) 或 [Twikoo](https://twikoo.js.org/)。在 `src/config/commentConfig.ts` 中填写对应服务配置,并将 `type` 改为 `"waline"` 或 `"twikoo"` 后即可启用。

## 文章示例

```yaml
---
title: "文章标题"
published: 2026-08-07T18:52:14+08:00
description: "文章摘要"
tags: ["示例"]
category: "随笔"
draft: false
---
```

完整的 frontmatter 字段定义见 `src/content.config.ts`。

## 部署到 Cloudflare Workers

本模板的主要部署目标是 **Cloudflare Workers Static Assets**。`wrangler.jsonc` 已将 Astro 的构建目录 `dist/` 配置为静态资源目录,并启用了 `nodejs_compat`;找不到资源时会使用构建生成的 404 页面。

### 方法一:Fork 后连接 Cloudflare(推荐)

1. 在 GitHub 上 Fork 本仓库到自己的账户,仓库地址应类似 `https://github.com/<GITHUB_USERNAME>/bluesy-astro-theme`。
2. 在自己的 Fork 中修改 `src/config/siteConfig.ts`、`src/config/profileConfig.ts` 和 `wrangler.jsonc` 等必要配置并提交。
3. 在 Cloudflare 控制台创建 Worker,选择导入或连接 Git 仓库,并授权访问自己的 Fork,不要选择原模板仓库。
4. 将构建命令设为 `pnpm build`,部署命令设为 `npx wrangler deploy`,然后保存并部署。

Workers Builds 会安装依赖、生成 `dist/`,再把静态资源发布到 Cloudflare Workers。连接自己的 Fork 后,生产分支的新提交可以继续触发自动构建和部署。

### 方法二:使用 Wrangler CLI

克隆并安装依赖:

```bash
git clone https://github.com/<GITHUB_USERNAME>/bluesy-astro-theme.git
cd bluesy-astro-theme
pnpm install --frozen-lockfile
```

首次使用前登录 Cloudflare,并确认当前账号:

```bash
pnpm exec wrangler login
pnpm exec wrangler whoami
```

生成生产构建:

```bash
pnpm build
```

使用 Cloudflare Workers 在本地预览:

```bash
pnpm exec wrangler dev
```

发布到 Cloudflare Workers:

```bash
pnpm exec wrangler deploy
```

必须先执行 `pnpm build` 生成 `dist/`,Wrangler 才能发布静态资源。部署前还应修改:

- `src/config/siteConfig.ts` 中的 `site_url`
- `wrangler.jsonc` 中的 Worker `name`
- Cloudflare 控制台中的自定义域名和路由(如需要)

当构建环境设置了 `CF_WORKERS` 环境变量时,`astro.config.mjs` 会启用 `@astrojs/cloudflare` 适配器。仓库目前提供的是 Wrangler CLI 部署入口,没有内置需要 Cloudflare Token 的自动部署工作流。

仓库同时保留 GitHub Pages 和 Vercel 的示例配置,但 Cloudflare Workers 是本模板优先说明和验证的部署方式。

部署后可通过 Cloudflare 分配的 `https://<WORKER_NAME>.<ACCOUNT_SUBDOMAIN>.workers.dev` 地址访问。当前模板使用 <https://bluesy-astro-theme.qiui.workers.dev> 作为在线预览地址;它是已部署站点地址,不是 Cloudflare 的版本 Preview URL。

### Cloudflare 官方文档

- [Deploy to Cloudflare 按钮](https://developers.cloudflare.com/workers/platform/deploy-buttons/)
- [在 Cloudflare Workers 上部署 Astro](https://developers.cloudflare.com/workers/framework-guides/web-apps/astro/)
- [Workers Static Assets](https://developers.cloudflare.com/workers/static-assets/)
- [Wrangler 命令参考](https://developers.cloudflare.com/workers/wrangler/commands/)
- [`workers.dev` 路由](https://developers.cloudflare.com/workers/configuration/routing/workers-dev/)

## Sitemap 验证

`@astrojs/sitemap` 只在生产构建时生成 Sitemap,因此使用 `pnpm dev` 时访问 `/sitemap-index.xml` 返回 404 属于正常现象,开发模式下页脚也会隐藏该链接。

本地验证:

```bash
pnpm build
pnpm preview
```

然后访问 `http://localhost:4321/sitemap-index.xml`。索引还会引用 `/sitemap-0.xml` 等文件,也应一并确认。构建后也可以直接检查 `dist/sitemap-index.xml`。

不要在 `public/` 中手动添加 Sitemap,否则可能与 `@astrojs/sitemap` 的生成结果重复或冲突。

## 许可证

本模板采用 MIT License,详见 [LICENSE](./LICENSE)。上游项目的代码仍遵循各自的许可证和版权声明。
反馈内容错误

看看同类模板

对比同技术栈与用途的模板,找到更适合的视觉与内容结构。