Astro Blog

astro blog is a minimal, MIT-licensed blog theme for the Astro framework that ships with command-line tooling for creating posts, cleaning SVG assets, and generating PWA icons and favicons.

What is astro blog?

astro blog is a blog theme built on Astro and managed through pnpm, designed for developers who want a lightweight, script-driven static site. It takes Markdown files as content input — stored under a _src/data directory — and produces a static blog with permalink support via an abbrlink frontmatter field. The project is open source under the MIT License, so it can be freely reused, modified, and embedded in other projects. The repository includes three Node.js helper scripts: create.cjs for post scaffolding, fix-svg-transparent.mjs for removing background rectangles from SVGs, and generate-icons.mjs for producing PWA icons and a favicon.

What are the key features?

• Automated post creation — Running pnpm run new --title='title-test' generates a new Markdown file under _src/data with a frontmatter block containing title, a timestamped date, and a generated abbrlink hash, so every post gets a stable, URL-friendly permalink.
• Configurable post directory — The create.cjs script accepts a dir parameter, which defaults to drafts when not supplied, letting users control whether new posts land in drafts or elsewhere.
• SVG transparency cleanup — pnpm run svg invokes fix-svg-transparent.mjs, which scans SVG files in _src/assets and removes the background rect element, producing transparent SVGs suitable for logos and illustrations.
• PWA icon and favicon generation — pnpm run icons generates pwa-48.png, pwa-64.png, pwa-72.png, pwa-96.png, pwa-192.png, pwa-512.png, and favicon.svg in the _public directory; adding the --padding flag creates versions with padding for situations like maskable icons.
• MIT License — The entire theme is released under the MIT License, giving users freedom to use it commercially, modify it, and redistribute it with attribution requirements limited to preserving the license notice.

Who is this blog theme for?

• Astro developers — Those already building with Astro can use this theme as a starting point for a personal or project blog, benefitting from the integrated pnpm scripts that automate repetitive content tasks.
• Indie bloggers and writers — Writers who want a static, scriptable blog with stable permalinks can use the abbrlink generation to keep URLs unchanged even when titles are edited.
• Developers building PWA blogs — Anyone planning to ship a Progressive Web App can use the icon generation script to quickly produce the required PNG sizes and favicon without manually exporting assets.

What can you do with this template?

• Publish a new post quickly — Run pnpm run new --title='my-first-post' to create a draft Markdown file with frontmatter and a permalink hash already filled in.
• Clean up SVG assets — Run pnpm run svg to automatically strip background rectangles from logo SVGs stored in _src/assets, making them transparent.
• Set up PWA icons — Run pnpm run icons --padding to generate padded PWA icons at seven sizes plus a favicon, matching common app manifest requirements.

How does the template work?

The workflow is centered on three pnpm scripts. First, pnpm run new scaffolds a Markdown post in _src/data, generating a frontmatter block with a timestamp and a unique abbrlink hash. Then pnpm run svg processes SVG files in _src/assets to remove background rectangles and make them transparent. Finally, pnpm run icons (optionally with --padding) creates PWA icons and a favicon in _public, ready for use in a web manifest and HTML head.

FAQ

How do I create a new post?

Run pnpm run new --title='your-title' from the project root. The create.cjs script will generate a Markdown file in _src/data (or the directory you pass via the dir parameter, which defaults to drafts) with frontmatter that includes the title, the current date in ISO format, and an automatically generated abbrlink.

What does pnpm run svg do?

It runs fix-svg-transparent.mjs, which processes every SVG file inside _src/assets and removes the background rect element from each one. This produces transparent SVGs, which is useful when you need logos or illustrations that don't have a filled background.

What does pnpm run icons do?

It runs generate-icons.mjs to create PWA icons at sizes 48, 64, 72, 96, 192, and 512 pixels, plus a favicon.svg, in the _public directory. Add the --padding flag to generate versions with extra padding, which helps with maskable icon requirements.

Is this theme free?

Yes, astro blog is released under the MIT License, so it is free to use, modify, and distribute for personal or commercial purposes as long as you retain the license notice.