Storyteller is a minimal monochrome blog theme for Astro 5.9.0, styled with Tailwind CSS 4.1.8, that generates a static blog with dark/light mode, multi-author pages, category and tag archives, and rich embeds via markdown shortcodes.
What is Storyteller?
Storyteller is a free, open-source (MIT) blog theme built for Astro, taking Markdown posts with frontmatter as input and producing a fully static, SEO-ready blog as output. It was created by Hasin Hayder and is available on GitHub. The theme uses Astro Content Collections for type-safe content management, Tailwind CSS for styling, and TypeScript-ready components. It generates dedicated pages for authors, categories, tags, and paginated blog listings.
What makes Storyteller stand out?
- Monochrome minimal design — Black-and-white aesthetic that puts typography first, with a 1000px max-width content container for readable article layout.
- Dark/light mode with persistence — Theme toggle detects system preference, saves the choice in localStorage, and animates transitions between themes.
- Multi-author support — Author pages with post listings and post counts on /authors, plus author assignment via frontmatter with a default of "Hasin Hayder".
- Rich embeds via shortcodes — Embed YouTube, Vimeo, Wistia, Google Maps, PDFs, GitHub Gists, Asciinema, SoundCloud, Notion, Figma, and CodePen using simple markdown commands like #youtube, #vimeo, #pdf, and #embed.
- Content organization — Categories, tags, and featured posts; each taxonomy gets its own listing page and posts can be marked featured to appear in a homepage section.
- Configurable site settings — A single src/site.config.mjs file controls site title, homepage post counts (6 latest, 8 per paginated page), UI labels, pagination text, footer links, similar posts, and Google Analytics ID.
- Performance and SEO — Static generation with pre-built pages, lazy-loaded responsive images (thumb and large variants), auto-generated OpenGraph meta tags, XML sitemap, and RSS feed.
Who should use Storyteller?
- Developers and writers who want a fast, minimal blog without a CMS — they write Markdown files in src/content/article/ and the theme handles the rest.
- Multi-author blogs (teams, publications) that need per-author profile pages and filtered post listings out of the box.
- Self-hosters and hobbyists looking for a free, MIT-licensed theme that deploys to Netlify, Vercel, or any static host by building the dist/ folder.
What can you do with Storyteller?
- Start a personal blog — Clone the repo, run npm install and npm run dev, then add Markdown posts with frontmatter to launch a blog at localhost:4321.
- Publish category and tag archives — Every post's category and tags generate dedicated listing pages, so readers can browse content by topic.
- Embed multimedia content — Use shortcodes in Markdown to add YouTube videos, Google Maps, PDFs, and SoundCloud tracks without writing iframe HTML.
- Configure Google Analytics — Set the gTag value in src/site.config.mjs to enable privacy-conscious analytics that respects Do Not Track and sets no cookies without consent.
How does Storyteller work?
Running the quick start commands: clone the repository, install dependencies with bun, npm, or pnpm, then start the dev server. The theme reads Markdown files from src/content/article/ with a schema defined in src/content/config.ts, validating fields like title, description, pubDate, author, category, tags, featured, thumb, and large. Static pages are generated from these files, and changing site-wide options in src/site.config.mjs restructures navigation, pagination, and homepage displays on rebuild.
FAQ
Is Storyteller free?
Yes, Storyteller is open-source under the MIT License, so you can use it for personal or commercial blogs, modify it, and redistribute it with attribution.
Does Storyteller support multiple authors?
Yes, it has built-in multi-author support. Add an author name in the frontmatter of each post, and the theme generates author pages with their posts and shows author counts on the /authors page.
What content formats does Storyteller accept?
It accepts Markdown files with YAML frontmatter. The required fields are title, description, pubDate, category, and tags. Optional fields include author, featured, thumb, and large image URLs.
Can I embed videos and maps in my posts?
Yes, Storyteller supports rich embeds through markdown shortcodes like #youtube, #vimeo, #googlemaps, #pdf, #gist, #asciinema, and #soundcloud, so you can add multimedia without HTML.
How do I deploy Storyteller?
You can deploy to Netlify or Vercel by connecting your GitHub repository and setting the build command (e.g., npm run build) and publish directory (dist). For static hosting, upload the dist folder after building.
