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 ⭐️.

Awesome Blogs built on top of this template

For who want to build their own blog, I strongly recommend you to fork this repo and add your own features. This repo is a simple and clean blog template.

• Yujian's blog
• Okaryo's blog

中文Readme

Table of Contents

• Features
• Installation
• Configuration
  • Site Settings
  • HomePage Posts Filter
  • Theme
• Writing Content
• Creating New Posts
• Build and Deploy
• Project Structure
• Features Roadmap
• Contributing
• License

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 with Code",
  description: "Write a description here",
  social: {
    github: "https://github.com/username",
    linkedin: "https://www.linkedin.com/in/username",
    email: "[email protected]",
    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

This project is almost complete. If you have any suggestions or feedback, please feel free to open an issue or pull request.

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.