Astro Zen Blog

Astro Zen Blog is a minimal, responsive, and SEO-friendly blog template built on the Astro framework, distributed as an MIT-licensed open-source repo whose core function is to turn Markdown/MDX files into a clean static blog.

What is Astro Zen Blog?

Astro Zen Blog is an Astro-based blog template that takes Markdown or MDX posts stored in src/content/blog/ and produces a static, SEO-optimized blog site. Site behavior is driven by a TypeScript config file (src/config.ts) holding URL, title, slogan, description, social links, homepage filters, Google Analytics ID, and a search toggle. It is maintained by itsyujay, with the live demo hosted at astro-zen-blog.yujay.dev.

Key Features

• Markdown/MDX authoring — posts are plain files in src/content/blog/ with frontmatter for title, description, date, tags, and cover image.
• Astro framework — builds to a static site deployable to hosts such as Cloudflare Pages via npm run build.
• Tailwind CSS theming — primary and secondary colors are set in tailwind.config.js.
• Dark mode — built-in light/dark theme support.
• Tag-based organization — posts carry tags, and the homepage can include or exclude posts by tag.
• SEO and feeds — includes SEO optimization, RSS feed, and sitemap output.
• Local search — optional on-site search enabled through the config flag.
• Google Analytics — a tracking ID field wires page analytics into the config.
• Social links — GitHub, LinkedIn, email, and RSS are configured as fields.

Who is it for?

• Developers starting a personal blog: fork the repo, edit src/config.ts, and write posts in Markdown.
• Writers migrating off other SSGs: for example, the Okaryo blog migrated from Gatsby to Astro using this template.
• Developers shipping client sites: the MIT license allows paid client work without a pro tier.

What can you do with Astro Zen Blog?

• Launch a personal blog: customize site settings and publish tagged Markdown posts with cover images.
• Control the homepage feed: set maxPosts and tag include/exclude lists, or write a custom filter in src/utils/posts.ts.
• Generate new posts quickly: run npm run new-post <filename> to scaffold a Markdown file from a template in scripts/new-post.js.

How does Astro Zen Blog work?

Scaffold with npm create astro@latest -- --template itsyujay/astro-zen-blog, run npm install, then npm run dev for local development. Edit site settings in src/config.ts, add posts to src/content/blog/, and run npm run build to produce a deployable static site.

Pricing

Free under the MIT license, including commercial use. Optional paid support exists: a one-time $75 commercial sponsorship, a $199 ship-assist, and a $499/year agency plan.

FAQ

Is Astro Zen Blog free for commercial use?

Yes. The template is MIT-licensed and the README explicitly permits client work and invoicing for it, with no gated pro version. Optional sponsorship and support plans are available but not required.

What is the project structure?

Posts live in src/content/blog/, layouts in src/layouts/, UI components in src/components/, site configuration in src/config.ts, static assets in public/, and Astro build settings in astro.config.mjs.