Note
Read this page on the rendered website to see how it looks and what setup entails. That version is updated more frequently, but you can also check the Demo for source → render mapping. For supported blocks, see here.
Webtrotion is an easy-to-install, highly-configurable starter built with Astro and Notion, perfect for a blog or a full website.
Most Notion-based builders force you to use a custom or third-party domain (like Vercel), paid tools, or split your content between Notion and the repo—and they're not easily configurable (like super.so or scattered code edits). I wanted a free, fully static GitHub site, with both pages and blog posts in Notion, so I built Webtrotion.
Acknowledgments: Thanks to Astro Cactus, notion-astro-blog, and this Fiverr creator.
- Astro v5 and Tailwind v4
- Integrates with Notion to create a website and not just a blog
- Single file configuration
- TailwindCSS Utility classes with Notion Color Matching for everything.
- Accessible, semantic HTML markup
- Responsive & SEO-friendly
- System / Dark / Light mode, using Tailwind and CSS variables that can be modified using a single config file
- Satori for creating open graph png images that includes your featured image
- Pagination
- Automatic RSS feed, with content.
- Webmentions
- Giscus and Bluesky comments
- Auto-generated sitemap
- Pagefind static search library integration
- Pinned Posts
- Shiki Transformers for Code Blocks
- API request output caching on Github Actions for fast build times
- Mini blog streams (idea copied from Linus’s stream)
- Auto-generated related content and pages that link to this page
- Pretty looking wikipedia like popups on hover that works with links to any block on any page.
- Floating Table of Contents
Check out the Demo with Template, hosted on Github Pages using Github actions.
| Device | Light Mode | Dark Mode |
|---|---|---|
| Desktop |  |
 |
| Mobile |  |
 |
MIT
If you end up using webtrotion, please consider buying me a coffee here: