⚡ 静态站点生成: 基于 Astro 的超快加载速度和 SEO 优化

🎨 现代化设计: 简洁美观的界面，支持自定义主题色

📱 移动友好: 完美的响应式体验，移动端专项优化

🔧 高度可配置: 大部分功能模块均可通过配置文件自定义

后台管理

（Firefly-Admin）专为Firefly开发的一款内容管理后台，让Firefly的TS文件及md/mdx后缀的文件可视化管理，直接通过 GitHub API 远程增删改博客内容、配置博客信息等操作， 保存即提交到 GitHub，Cloudflare 自动重新部署。

✨ 功能特性

核心功能

• Astro + Tailwind CSS - 基于现代技术栈的超快静态站点生成
• 流畅动画 - Swup 页面过渡动画，提供丝滑的浏览体验
• 响应式设计 - 完美适配桌面端、平板和移动设备
• 多语言支持 - i18n 国际化，UI 支持简体中文、繁体中文、英文、日文、俄语、韩文
• 全文搜索 - 基于 Pagefind 的客户端搜索，支持文章内容索引

个性化

• 动态侧边栏 - 支持配置单侧边栏、双侧边栏
• 文章布局 - 支持配置(单列)列表、网格(多列/瀑布流)布局
• 字体管理 - 支持自定义字体，丰富的字体选择器
• 页脚配置 - HTML 内容注入，完全自定义
• 亮暗色模式 - 支持亮色/暗色/跟随系统三种模式
• 导航栏自定义 - Logo、标题、链接全面自定义
• 壁纸模式切换 - 横幅壁纸、全屏壁纸、全屏透明壁纸、纯色背景
• 主题色自定义 - 360° 色相调节

如果你有好用的功能和优化，请提交 Pull Request

🚀 快速开始

环境要求

• Node.js ≥ 22
• pnpm ≥ 9

本地开发部署

1. 克隆仓库：

   git clone https://github.com/Cuteleaf/Firefly.git
   cd Firefly

   先 Fork 到自己仓库再克隆（推荐），记得先点 Star 再 Fork 哦！

   git clone https://github.com/you-github-name/Firefly.git
   cd Firefly

2. 安装依赖：

   # 如果没有安装 pnpm，先安装
   npm install -g pnpm
   
   # 安装项目依赖
   pnpm install

3. 配置博客：

   • 编辑 src/config/ 目录下的配置文件自定义博客设置

4. 启动开发服务器：

   pnpm dev

   博客将在 http://localhost:4321 可用

社区教程

Cloudflare Workers 部署：【不用服务器，无需备案，零成本搭建一个自己的个人博客】

平台托管部署

• 参考官方指南将博客部署至 Vercel, Netlify, Cloudflare Pages, EdgeOne Pages 等。

• Vercel、Netlify 等主流平台自动部署，会根据环境自动选择适配器。

  框架预设： Astro

  根目录： ./

  输出目录： dist

  构建命令： pnpm run build

  安装命令： pnpm install

  

📖 配置说明

📚 详细配置文档: 查看 Firefly 使用文档 获取完整的配置指南

设置网站语言

要设置博客的默认语言，请编辑 src/config/siteConfig.ts 文件：

// 定义站点语言
const SITE_LANG = "zh_CN";

支持的语言代码：

• zh_CN - 简体中文
• zh_TW - 繁体中文
• en - 英文
• ja - 日文
• ru - 俄文
• ko - 韩文

配置文件结构

src/
├── config/
│   ├── index.ts                  # 配置索引文件
│   ├── siteConfig.ts             # 站点基础配置
│   ├── analyticsConfig.ts        # 统计分析配置
│   ├── announcementConfig.ts     # 公告配置
│   ├── backgroundWallpaper.ts    # 背景壁纸配置
│   ├── commentConfig.ts          # 评论系统配置
│   ├── coverImageConfig.ts       # 封面图配置
│   ├── displaySettingsConfig.ts  # 设置面板配置
│   ├── dynamicConfig.ts          # 动态页面配置
│   ├── effectsConfig.ts          # 动画特效配置（樱花等）
│   ├── expressiveCodeConfig.ts   # 代码高亮配置
│   ├── fontConfig.ts             # 字体配置
│   ├── footerConfig.ts           # 页脚配置
│   ├── friendsConfig.ts          # 友链配置
│   ├── galleryConfig.ts          # 相册配置
│   ├── licenseConfig.ts          # 许可证配置
│   ├── musicConfig.ts            # 音乐播放器配置
│   ├── navBarConfig.ts           # 导航栏配置
│   ├── pioConfig.ts              # 看板娘配置
│   ├── mermaidConfig.ts          # Mermaid 图表配置
│   ├── plantumlConfig.ts         # PlantUML 图表配置
│   ├── profileConfig.ts          # 用户资料配置
│   ├── sidebarConfig.ts          # 侧边栏布局配置
│   └── sponsorConfig.ts          # 打赏配置

⚙️ 文章 Frontmatter

---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg  # 或使用 "api" 来启用随机封面图
tags: [Foo, Bar]
category: Front-end
draft: false
lang: zh-CN      # 仅当文章语言与 `siteConfig.ts` 中的网站语言不同时需要设置
pinned: false    # 置顶
comment: true    # 是否允许评论
---

动态

动态文件保存在 src/content/dynamic/ 中，一个 Markdown 文件对应一条动态。可以使用快捷命令创建：

pnpm new-d 今天心情不错，出去吃了一顿火锅

pnpm new-dynamic <content> 也可以使用，和 new-d 完全等价。

---
published: 2026-07-15 16:15:29
pinned: true  # 置顶
location: China # 位置
---

动态内容可以使用 Markdown 语法。

也支持对接 Memos 作为数据源，在 src/config/dynamicConfig.ts 中配置 memos 选项即可实时获取 Memos 动态，支持置顶同步和图片附件展示。详见动态文档。

🧩 Markdown 扩展语法

除了 Astro 默认支持的 GitHub Flavored Markdown 之外，还包含了一些额外的 Markdown 功能：

• 提醒块（Admonitions） - 支持 GitHub, Obsidian, VitePress, Docusaurus 四种风格主题配置 (预览和用法)
• GitHub 仓库卡片 (预览和用法)
• 基于 Expressive Code 的增强代码块 (预览 / 文档)

🧞 指令

下列指令均需要在项目根目录执行：

Command	Action
pnpm install	安装依赖
pnpm dev	在 localhost:4321 启动本地开发服务器
pnpm build	构建网站至 ./dist/
pnpm preview	本地预览已构建的网站
pnpm check	检查代码中的错误
pnpm format	使用 Biome 格式化您的代码
pnpm new-post <filename>	创建新文章
pnpm new-d <content>	创建一条动态
pnpm new-dynamic <content>	创建一条动态（完整命令）
pnpm astro ...	执行 astro add, astro check 等指令
pnpm astro --help	显示 Astro CLI 帮助