A thoughtful, minimalist blog template built with Astro, featuring multiple beautiful themes and a focus on readability and personal expression. Perfect for writers, developers, and creatives who want an elegant online presence.
- 🎨 Multiple Themes: Six carefully crafted color themes to match your personality
- 📝 MDX Support: Write blog posts with components inside markdown
- 📱 Fully Responsive: Beautiful on desktop, tablet, and mobile devices
- ⚡ Blazing Fast: Built with Astro for optimal performance
- 🔍 SEO Optimized: Meta tags, Open Graph, sitemap, and RSS feed
- ♿ Accessible: WCAG compliant with proper contrast and semantic HTML
- 🎯 Reading-Focused: Clean typography and distraction-free reading experience
- 🌏 Chinese Typography: Full support for Chinese content with optimized fonts and layout
- 📊 Reading Time: Automatic reading time calculation
- 🏷️ Tag System: Organize posts with tags that adapt to your theme
- 🔗 Social Sharing: Built-in sharing buttons for social platforms
- Sage Green: Calming and natural, perfect for thoughtful writing
- Soft Lavender: Creative and thoughtful with artistic flair
- Warm Terracotta: Earthy and cozy with Mediterranean warmth
- Dusty Rose: Gentle and romantic with soft elegance
- Warm Honey: Golden and inviting with optimistic energy
- Warm Steel: Trustworthy and balanced with professional warmth
- Node.js 18+
- npm, yarn, or pnpm
- Clone or download the template:
git clone https://github.com/yourusername/reverie-blog-template.git
cd reverie-blog-template- Install dependencies:
npm install- Start the development server:
npm run dev- Open http://localhost:4321 in your browser
Blog posts are written in MDX format and stored in src/content/blog/. Each post should have frontmatter with the following structure:
---
title: 'Your Post Title'
description: 'A brief description of your post'
publishDate: 2024-01-15
updatedDate: 2024-01-20
heroImage: 'https://example.com/image.jpg'
tags: ['writing', 'thoughts', 'life']
draft: false
---
Your content here with full MDX support...
## You can use markdown
And even import components:
<CustomComponent />title(required): The title of your blog postdescription(required): A brief description for SEO and previewspublishDate(required): Publication date (YYYY-MM-DD format)updatedDate(optional): Last update dateheroImage(optional): Hero image URL for the posttags(optional): Array of tags for categorizationdraft(optional): Set totrueto hide the post from production
Edit src/config/site.ts to change the theme:
export const siteConfig = {
// ... other config
theme: 'softLavender', // Change to any theme name
};Available themes: sageGreen, softLavender, warmTerracotta, dustyRose, warmHoney, warmSteel
Add new themes to the themes object in src/styles/themes.ts:
customTheme: {
name: 'customTheme',
displayName: 'Custom Theme',
description: 'Your custom theme description',
colors: {
bg: '#your-bg-color',
surface: '#your-surface-color',
text: '#your-text-color',
textSecondary: '#your-secondary-text',
textTertiary: '#your-tertiary-text',
accent: '#your-accent-color',
accentLight: '#your-light-accent',
border: '#your-border-color',
borderLight: '#your-light-border',
},
},├── public/
│ ├── favicon.svg
│ └── og-image.png
├── src/
│ ├── components/
│ │ ├── BlogCard.astro # Blog post card component
│ │ ├── Navigation.astro # Site navigation
│ │ └── ThemeProvider.astro # Theme system
│ ├── config/
│ │ └── site.ts # Site configuration
│ ├── content/
│ │ ├── blog/ # Blog posts in MDX
│ │ └── config.ts # Content collection config
│ ├── layouts/
│ │ ├── BaseLayout.astro # Base layout with theme
│ │ └── BlogPost.astro # Blog post layout
│ ├── pages/
│ │ ├── blog/
│ │ │ ├── [...slug].astro # Dynamic blog post pages
│ │ │ └── index.astro # Blog listing page
│ │ ├── about.astro # About page
│ │ ├── index.astro # Home page
│ │ ├── rss.xml.js # RSS feed
│ │ └── themes.astro # Theme showcase
│ ├── styles/
│ │ └── global.css # Global styles and design system
│ ├── utils/
│ │ └── reading-time.ts # Reading time calculation
│ └── env.d.ts # TypeScript declarations
├── astro.config.mjs # Astro configuration
├── package.json
└── tsconfig.json
| Command | Action |
|---|---|
npm run dev |
Start development server at localhost:4321 |
npm run build |
Build production site to ./dist/ |
npm run preview |
Preview production build locally |
npm run format |
Format all files with Prettier |
npm run format:check |
Check if files need formatting |
Reverie includes:
- Prettier for consistent code formatting
- TypeScript for type safety
- ESLint-ready structure for linting
- Build the site:
npm run build- Preview the production build:
npm run preview- Deploy the
dist/folder to your hosting provider
Update astro.config.mjs with your site details:
export default defineConfig({
site: 'https://yourusername.github.io',
base: '/your-repo-name', // Only needed for repo deployments
});Reverie is built for performance:
- 100/100 Lighthouse Score achievable
- Minimal JavaScript - mostly static HTML/CSS
- Optimized Images with Astro's built-in optimization
- Fast Navigation with prefetching
- Small Bundle Size - under 50KB of JavaScript
- Easy Customization - Config-driven approach
- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Mobile browsers
Contributions are welcome! Feel free to:
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Built with Astro - The web framework for content-driven websites
- Typography inspired by Medium and Ghost
- Color palettes designed for accessibility and beauty
- Icons from Feather Icons
If you find this template helpful, please consider:
- ⭐ Starring the repository
- 🐛 Reporting bugs via GitHub Issues
- 💡 Suggesting features via GitHub Discussions
- 📝 Writing about your experience using Reverie
Reverie - A thoughtful space for your words
Built with ❤️ for writers, creators, and dreamers.