A modern, fast, and responsive blog built with Astro framework. Ported from the Halo theme Ying.
ENGLISH | 简体中文
- 🚀 Fast Performance: Built with Astro's static site generation for optimal speed
- � Markdown & MDX Support: Write content in Markdown or MDX format
- 🎨 UnoCSS Integration: Utility-first CSS framework for easy styling
- 🌓 Dark Mode: Toggle between light and dark themes
- 📱 Responsive Design: Works seamlessly on all devices
- 📊 Code Highlighting: Beautiful syntax highlighting with Prism
- � RSS Feed: Automatic RSS feed generation
- 🗺️ Sitemap: Generate sitemap for better SEO
- 📑 Pagination: Paginated blog post lists
- 🔗 Smart Links: Automatic heading anchors
- 📷 Image Support: Optimized image handling
- 🎯 SEO Friendly: Built-in SEO best practices
/
├── public/ # Static assets (images, fonts, etc.)
├── src/
│ ├── assets/ # Project assets
│ ├── components/ # Astro components
│ ├── content/ # Markdown/MDX content (blog posts)
│ ├── layouts/ # Page layouts
│ ├── pages/ # Route pages
│ ├── styles/ # Global styles
│ └── utils/ # Utility functions
├── astro.config.mjs # Astro configuration
├── package.json # Dependencies
├── README.md # Project documentation
├── tsconfig.json # TypeScript configuration
└── uno.config.ts # UnoCSS configuration
- Node.js (v18 or later)
- pnpm (recommended)
- Install dependencies:
pnpm install- Start the development server:
pnpm dev- Open your browser and navigate to
http://localhost:4321
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
pnpm install |
Installs dependencies |
pnpm dev |
Starts local dev server at localhost:4321 |
pnpm build |
Build your production site to ./dist/ |
pnpm preview |
Preview your build locally, before deploying |
pnpm astro ... |
Run CLI commands like astro add, astro check |
pnpm astro -- --help |
Get help using the Astro CLI |
- Astro - Static site generator
- UnoCSS - Utility-first CSS framework
- MDX - Markdown with JSX
- Prism - Code syntax highlighting
- Remixicon - Icon library
- TypeScript - Type-safe JavaScript
Blog posts are located in the src/content/blog/ directory. You can create new posts using Markdown (.md) or MDX (.mdx) format.
Example post structure:
---
title: "My First Blog Post"
date: "2023-01-01"
description: "A short description of the post"
---
# My First Blog Post
Content goes here...The theme uses UnoCSS for styling. You can customize the theme by modifying the uno.config.ts file.
Project configuration can be found in:
astro.config.mjs- Astro framework configurationtsconfig.json- TypeScript configurationuno.config.ts- UnoCSS configuration
This project is open source and available under the MIT License.
Contributions are welcome! Feel free to submit a Pull Request.
Created with ❤️ using Astro
For questions or feedback, please open an issue on GitHub.