A Fresh and Beautiful Astro Static Blog Theme Template
QQ交流群：1087127207
📖 README: 简体中文 | 繁體中文 | English | 日本語
🚀 Quick Guide: 🖥️Live Demo / 📝Documentation / 🍀My Blog
⚡ Static Site Generation: Ultra-fast loading speed and SEO optimization based on Astro
🎨 Modern Design: Clean and beautiful interface with customizable theme colors
📱 Mobile-Friendly: Perfect responsive experience with mobile-specific optimizations
🔧 Highly Configurable: Most features can be customized through configuration files
Banner Mode |
||
 Overlay Mode |
 Fullscreen Wallpaper Mode |
 Solid Color Mode |
Tip
Firefly is a fresh, beautiful, and modern personal blog theme template based on the Astro framework and the Fuwari template, designed for tech enthusiasts and content creators. It integrates a modern web tech stack, offering rich feature modules and a highly customizable interface so you can easily build a professional and visually appealing personal blog.
If you refer to or use Firefly component design and related code, please credit Firefly.
Firefly also preserves the original fuwari layout, which can be freely switched in the configuration file according to your preferences.
For more layout configurations and demos, please see: Firefly Layout System Details
Firefly supports i18n multilingual UI, but except for Simplified Chinese, other languages are AI-translated. If you find any errors, feel free to submit a Pull Request to help improve them.
- Astro + Tailwind CSS - Ultra-fast static site generation based on modern tech stack
- Smooth Animations - Swup page transition animations for silky smooth browsing experience
- Responsive Design - Perfect adaptation for desktop, tablet and mobile devices
- Multi-language Support - i18n internationalization ui, supports Simplified Chinese, Traditional Chinese, English, Japanese, Russian, Korean
- Full-text Search - Client-side search based on Pagefind, supports article content indexing.
- Dynamic Sidebar - Supports single sidebar, dual sidebar configuration
- Article Layout - Supports list (single column) and grid (multi-column/masonry) layout
- Font Management - Custom font support with rich font selector
- Footer Configuration - HTML content injection, fully customizable
- Light/Dark Mode - Supports light/dark/system three modes
- Navbar Customization - Logo, title, links fully customizable
- Wallpaper Mode Switching - Banner wallpaper, fullscreen wallpaper, fullscreen transparent wallpaper, solid background
- Theme Color Customization - 360° hue adjustment
If you have useful features and optimizations, please submit a Pull Request
- Node.js ≥ 22
- pnpm ≥ 9
-
Clone the repository:
git clone https://github.com/Cuteleaf/Firefly.git cd FireflyFirst Fork to your own repository then clone (recommended). Don't forget to Star before Fork!
git clone https://github.com/you-github-name/Firefly.git cd Firefly -
Install dependencies:
# Install pnpm if not installed npm install -g pnpm # Install project dependencies pnpm install
-
Configure blog:
- Edit configuration files in
src/config/directory to customize blog settings
- Edit configuration files in
-
Start development server:
pnpm dev
Blog will be available at
http://localhost:4321
-
Refer to the official guide to deploy your blog to Vercel, Netlify, Cloudflare Pages, EdgeOne Pages, etc.
-
Vercel, Netlify and other major platforms auto-deploy, automatically selecting the appropriate adapter based on the environment.
Framework Preset:
AstroRoot Directory:
./Output Directory:
distBuild Command:
pnpm run buildInstall Command:
pnpm install
📚 Detailed Configuration Documentation: Check Firefly Documentation for complete configuration guide
To set the default language for your blog, edit the src/config/siteConfig.ts file:
// Define site language
const SITE_LANG = "zh_CN";Supported language codes:
zh_CN- Simplified Chinesezh_TW- Traditional Chineseen- Englishja- Japaneseru- Russianko- Korean
src/
├── config/
│ ├── index.ts # Configuration index file
│ ├── siteConfig.ts # Site basic configuration
│ ├── analyticsConfig.ts # Analytics configuration
│ ├── announcementConfig.ts # Announcement configuration
│ ├── backgroundWallpaper.ts # Background wallpaper configuration
│ ├── commentConfig.ts # Comment system configuration
│ ├── coverImageConfig.ts # Cover image configuration
│ ├── displaySettingsConfig.ts # Settings panel configuration
│ ├── dynamicConfig.ts # Moments page configuration
│ ├── effectsConfig.ts # Animation effects config (sakura, etc.)
│ ├── expressiveCodeConfig.ts # Code highlighting configuration
│ ├── fontConfig.ts # Font configuration
│ ├── footerConfig.ts # Footer configuration
│ ├── friendsConfig.ts # Friend links configuration
│ ├── galleryConfig.ts # Gallery configuration
│ ├── licenseConfig.ts # License configuration
│ ├── musicConfig.ts # Music player configuration
│ ├── navBarConfig.ts # Navbar configuration
│ ├── pioConfig.ts # Mascot configuration
│ ├── mermaidConfig.ts # Mermaid diagram configuration
│ ├── plantumlConfig.ts # PlantUML diagram configuration
│ ├── profileConfig.ts # User profile configuration
│ ├── sidebarConfig.ts # Sidebar layout configuration
│ └── sponsorConfig.ts # Sponsor configuration
---
title: My First Blog Post
published: 2023-09-09
description: This is the first post of my new Astro blog.
image: ./cover.jpg # Or use "api" to enable random cover images
tags: [Foo, Bar]
category: Front-end
draft: false
lang: zh-CN # Only set when article language differs from site language in `siteConfig.ts`
pinned: false # Pin article
comment: true # Enable comments
---Moment files are stored in src/content/dynamic/, with one Markdown file per moment. Create one with:
pnpm new-d The weather is lovely todaypnpm new-dynamic <content> is the equivalent full command.
---
published: 2026-07-15 16:15:29
pinned: true # Pin article
---
Moment content supports Markdown.Also supports Memos as a data source. Configure the memos option in src/config/dynamicConfig.ts to fetch Memos moments in real-time, with pinned sync and image attachment support. See Moments documentation.
In addition to the default GitHub Flavored Markdown support in Astro, there are some additional Markdown features:
- Admonitions - Supports configuration for GitHub, Obsidian, VitePress, and Docusaurus themes (Preview and Usage)
- GitHub Repository Cards (Preview and Usage)
- Enhanced Code Blocks based on Expressive Code (Preview / Documentation)
All commands need to be executed in the project root directory:
| Command | Action |
|---|---|
pnpm install |
Install dependencies |
pnpm dev |
Start local development server at localhost:4321 |
pnpm build |
Build site to ./dist/ |
pnpm preview |
Preview built site locally |
pnpm check |
Check for errors in code |
pnpm format |
Format your code using Biome |
pnpm new-post <filename> |
Create new article |
pnpm new-d <content> |
Create a new moment |
pnpm new-dynamic <content> |
Create a new moment (full command) |
pnpm astro ... |
Execute astro add, astro check and other commands |
pnpm astro --help |
Display Astro CLI help |
Special thanks to saicaca for developing the fuwari template, which Firefly is based on for secondary development.
The copyright of Firefly-related image assets belongs to miHoYo, the developer of the game "Honkai: Star Rail".
- Blogger
霞葉Bangumi Collection page component - Bilibili creator
公公的日常Q-version Firefly Mascot Spine Model
This project is licensed under the MIT license. See the LICENSE file for details.
Originally forked from saicaca/fuwari. Thanks to the original author for their contributions.
Copyright Notice:
Under the MIT license, you are free to use, modify, and distribute the code, but you must retain the above copyright notice.
Thanks to the following contributors for their contributions to this project. If you have any questions or suggestions, please submit an Issue or Pull Request.
Thanks to the following contributors for their contributions to the original project fuwari, which laid the foundation for this project.