Astrofly

Astrofly is an open-source Astro v6 blog theme inspired by hexo-theme-butterfly and HsuBlog, designed to generate fast static sites with bilingual routing, full-text search, offline PWA support, and integrated comments.

What is Astrofly?

Astrofly is a blog theme built on Astro v6 that transforms Markdown content into a static, deployable website. The theme accepts content from a content directory (initially provided as example_content) and outputs a production-ready static site to dist/ when you run npm run build. It is developed by mocusez and draws design inspiration from hexo-theme-butterfly and HsuBlog.

Key Features

• Astro v6 — Built on the latest Astro for fast, static-first performance.
• Bilingual Support — Provides Chinese (zh-CN) and English content with language-specific routing.
• Full-Text Search — Powered by Pagefind, offering lightning-fast static search with multilingual support and mobile optimization.
• PWA Support — Installable Progressive Web App with offline access and automatic cache versioning on build.
• Waline Comments — Integrated Waline comment system with pageview counting and dark mode support.
• Expressive Code — Syntax highlighting via Shiki, with custom MLIR/LLVM grammar support.
• Tailwind CSS — Utility-first styling with a dark/light theme toggle.
• Sitemap — Auto-generated sitemap for SEO.
• Responsive Design — Mobile-friendly layout with adaptive navigation.

Who is it for?

• Bloggers — looking for a clean, fast blog with a familiar butterfly-inspired design and no server-side dependencies.
• Developers — who want a bilingual blog with search and PWA out of the box, built with Astro and Tailwind CSS.
• Technical writers — who need full-text search and code highlighting support for MLIR/LLVM content.
• Content creators — who want to publish in multiple languages and offer offline reading through PWA.

What can you do with Astrofly?

• Publish bilingual content: Write posts in Chinese and English; the theme automatically routes readers to the appropriate language version.
• Enable comments and pageviews: Turn on Waline to let readers comment and track pageviews with dark mode support.
• Provide offline access: Install the site as a PWA so readers can browse saved content without a connection.
• Customize styling: Use Tailwind CSS to adjust colors, spacing, and layouts, and switch between dark and light themes.

How does Astrofly work?

Astrofly follows Astro's standard workflow. Clone the repository, install dependencies with pnpm install, then run pnpm approve-builds to approve native builds. Move the example_content directory to content to start with sample posts. Use npm run dev for local development, npm run build to generate the static site, and npm run newpage to scaffold a new post from a template. The npm run sync command publishes the site via a system script.

FAQ

How do I install Astrofly?

Clone the GitHub repository with git clone https://github.com/mocusez/astro-astrofly.git, install dependencies with pnpm install, run pnpm approve-builds, and move example_content to content. You can also scaffold a new project with pnpm create astro@latest -- --template mocusez/astro-astrofly.

Does Astrofly support multiple languages?

Yes. Astrofly has built-in bilingual support for Chinese (zh-CN) and English, with language-specific routing so each locale gets its own URLs.

What comment system does Astrofly use?

Astrofly integrates Waline, a comment system that includes pageview counting and dark mode support.

What search technology does Astrofly use?

It uses Pagefind, a static search library that indexes your content at build time, providing fast full-text search with multilingual support and mobile optimization.

Is Astrofly free?

Astrofly is an open-source theme hosted on GitHub with no mention of licensing costs, so it is free to use and modify.