Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/larry-xue/astro-zen-blog

Astro Zen Blog is a minimal, responsive, and SEO-friendly blog template built with Astro.
https://github.com/larry-xue/astro-zen-blog

astro astro-blog blogtemplate

Last synced: about 3 hours ago
JSON representation

Astro Zen Blog is a minimal, responsive, and SEO-friendly blog template built with Astro.

Host: GitHub
URL: https://github.com/larry-xue/astro-zen-blog
Owner: larry-xue
License: mit
Created: 2024-12-09T13:54:30.000Z (2 months ago)
Default Branch: main
Last Pushed: 2025-01-09T15:12:01.000Z (30 days ago)
Last Synced: 2025-02-05T14:59:50.523Z (3 days ago)
Topics: astro, astro-blog, blogtemplate
Language: Astro
Homepage: https://blog.larryxue.dev
Size: 272 KB
Stars: 19
Watchers: 1
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 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](https://blog.larryxue.dev/)

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

[中文Readme](./docs/README_CN.md)

## Table of Contents

- [Features](#features)
- [Installation](#installation)
- [Configuration](#configuration)
- [Site Settings](#site-settings)
- [HomePage Posts Filter](#homepage-posts-filter)
- [Theme](#theme)
- [Writing Content](#writing-content)
- [Creating New Posts](#creating-new-posts)
- [Build and Deploy](#build-and-deploy)
- [Project Structure](#project-structure)
- [Features Roadmap](#features-roadmap)
- [Contributing](#contributing)
- [License](#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

![lighthouse score](https://github.com/larry-xue/larry-xue/blob/master/assets/lighthouse.gif)

## Installation

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

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

2. Install dependencies:

```bash
npm install
```

3. Start the development server:

```bash
npm run dev
```

## Configuration

### Site Settings

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

```typescript
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: "[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:

```markdown
---
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:

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

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

## Build and Deploy

1. Build your site:

```bash
npm run build
```

2. Deploy options:

- **Cloudflare Pages**: [Deploy to Cloudflare Pages](https://developers.cloudflare.com/pages/framework-guides/deploy-an-astro-site/#deploy-with-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

- [x] 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.