Skip to content

nerdymomocat-templates/webtrotion-astro-notion-cms-website-blog

 
 

Repository files navigation

⚠️ Important Upgrade Notice – Version 2.0.0

Upgrading to v2.0.0 requires changes to your constants-config file:

  • The configuration format has been updated to JSON5.
  • You must migrate or update your existing constants-config to the new .json5 format.
  • Failing to do so may break your setup or runtime behavior.

Do not upgrade to v2.0.0 unless you are prepared to handle this change.

Webtrotion Cat

Webtrotion

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.


Key Features

  • 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 popovers on hover that works with links to any block on any page.
  • Floating Table of Contents
  • Footnotes and citation support

Demo

Check out the Demo with Template, hosted on Github Pages using Github actions.

Preview

Device Light Mode Dark Mode
Desktop Light Mode Desktop Dark Mode Desktop
Mobile Light Mode Mobile Dark Mode Mobile

License

MIT

If you end up using webtrotion, please consider buying me a coffee here:

Support Nerdy Momo Cat on Ko-fi! ❤️. ko-fi.com/nerdymomocat

About

Your own notion website with astro

Resources

License

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published

Languages

  • TypeScript 59.6%
  • Astro 36.6%
  • CSS 2.3%
  • Other 1.5%