Skip to content

Latest commit

 

History

History
159 lines (113 loc) · 3.86 KB

README.md

File metadata and controls

159 lines (113 loc) · 3.86 KB
Raw

Astro Zen Blog

ZEN-HOME

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

lighthouse score

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:

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.