Astro Zen Blog

A minimal, responsive, and SEO-friendly blog template built with Astro. Features clean design, dark mode support, and markdown-based content management.

live demo: Yujian's blog

If you find this project helpful, please consider giving it a star ⭐️.

中文Readme

Features

• 📝 Markdown/MDX for content authoring
• 🎨 Clean and minimalist design
• 🏷️ Tag-based organization
• 🌓 Dark mode support
• 🔍 SEO optimized
• 📱 Fully responsive
• 🔗 Social media integration
• 📰 RSS feed & sitemap support
• ⚡ Fast performance
• 🛠️ Google analysis interation
• 🔍 Local search functionality

Installation

1. Use the Astro CLI to create a new project:

   npm create astro@latest -- --template larry-xue/astro-zen-blog
   cd ./to_your_project

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Configuration

Site Settings

1. Open src/config.ts and customize your site settings:

export const siteConfig: SiteConfig = {
  site: "https://example.com/", // your site URL
  title: "Your Blog",
  slogan: "Exploring the World and Me",
  description: "Write a description here",
  social: {
    github: "https://github.com/username",
    linkedin: "https://www.linkedin.com/in/username",
    email: "your@email.com",
    rss: true,
  },
  homepage: {
    maxPosts: 5, // Maximum number of posts to display
    tags: [], // Only display posts with these tags
    excludeTags: [], // Exclude posts with these tags
  },
  googleAnalytics: "G-XXXXXXXXXX", // Google Analytics tracking ID
  search: true, // Enable local search
};

HomePage Posts Filter

If you want more customization in homepage posts. You can customize the posts displayed by writing a custom filter with updating the filterPublishedPosts function in src/utils/posts.ts.:

Theme

Update primary and secondary colors in tailwind.config.js:

Writing Content

1. Create new blog posts in the src/content/blog/ directory
2. Use the following frontmatter template:

---
title: "Your Post Title"
description: "A brief description of your post"
date: YYYY-MM-DD
tags: ["tag1", "tag2"]
image: "cover image URL"
---

Your content here...

Of course, you can customize the metadata as needed in src/content/config.ts.

Creating New Posts

To create a new blog post, this template provide an npm scripts to help you create a new post:

# this will create a new markdown file in src/content/blog/filename.md
npm run new-post \<filename\>

You can customize the template of the new post in scripts/new-post.js.

Build and Deploy

1. Build your site:

   npm run build

2. Deploy options:

   • Cloudflare Pages: Deploy to Cloudflare Pages

Project Structure

astro-zen-blog/
├── src/
│   ├── content/
│   │   └── blog/    # Blog posts
│   ├── layouts/     # Page layouts
│   ├── components/  # UI components
│   └── config.ts    # Site configuration
├── public/          # Static assets
└── astro.config.mjs # Astro configuration

Features Roadmap

• Search functionality
• Commenting Integration
• Enhance Transition and Animation
• ...and more

Contributing

Contributions are welcome! Feel free to:

1. Fork the repository
2. Create your feature branch
3. Submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.