/astro-blog

A modern, fast, and SEO-friendly blog template built with Astro and TailwindCSS. Perfect for developers, writers, and content creators who want a minimalist yet feature-rich blog.

Primary LanguageAstroMIT LicenseMIT

Modern Astro Blog Template

A modern, fast, and SEO-friendly blog template built with Astro and TailwindCSS. Perfect for developers, writers, and content creators who want a minimalist yet feature-rich blog.

✨ Features

  • ⚡️ Lightning Fast: Built with Astro for optimal performance
  • 🎨 Beautiful Design: Clean and modern design with Tailwind CSS
  • 📱 Fully Responsive: Looks great on all devices
  • 🌙 Dark Mode: Automatic and manual dark mode support
  • ✍️ MDX Support: Write your blog posts in MDX
  • 🔍 SEO Optimized: Meta tags, sitemap, and RSS feed
  • 🚀 Perfect Lighthouse Score: 100/100 in all categories
  • 🔤 Typography: Beautiful typography with Inter font
  • 📊 Analytics Ready: Just add your preferred analytics
  • 🔒 Type Safe: Written in TypeScript for better development experience

🚀 Quick Start

  1. Clone this repository
git clone https://github.com/xahidex/modern-astro-blog.git my-blog
cd my-blog
  1. Install dependencies
npm install
  1. Start development server
npm run dev
  1. Build for production
npm run build

📝 Writing Posts

  1. Add your blog posts as MDX files in the src/content/blog directory
  2. Include frontmatter with the following fields:
---
title: 'Your Post Title'
description: 'A brief description of your post'
pubDate: '2024-03-19'
updatedDate: '2024-03-20' # Optional
heroImage: '/path/to/image.jpg' # Optional
---

Your content here...

🎨 Customization

  1. Site Configuration: Update astro.config.mjs

    • Change the site URL
    • Modify markdown configuration
    • Add or remove integrations

  2. Styling: Modify tailwind.config.mjs

    • Update colors
    • Change typography
    • Add new theme extensions

  3. Components: Customize components in src/components

    • Header
    • Footer
    • Blog cards
    • Theme toggle

  4. Content: Update content in src/pages

    • About page
    • Home page
    • Blog index

📦 Project Structure

/
├── public/
├── src/
│   ├── components/
│   ├── content/
│   │   └── blog/
│   ├── layouts/
│   └── pages/
└── package.json

🔧 Technologies Used

📄 License

This project is open source and available under the MIT License.

🤝 Contributing

Contributions are welcome! Feel free to:

  1. Fork the repository
  2. Create a new branch
  3. Make your changes
  4. Submit a pull request

💖 Support

If you find this template helpful, please consider:

  • ⭐ Starring the repository
  • 🐛 Reporting bugs
  • 🔀 Submitting pull requests
  • 📢 Sharing with others

👤 Author

🙏 Acknowledgments