Back to themes

Webtrotion

Webtrotion is a extensively configurable, simple to install website builder, built with the Astro framework in conjunction with Notion. Use it to create an easy-to-use blog or website.

Get started Live demo
Cost

Free

Created by
nerdymomocat

Why Webtrotion?

Webtrotion was built with the simple idea - most notion based builders, require at least one of these four things:

  • A custom domain, or being willing to use a vercel like domain
  • Just have blogposts be editable in Notion while pages are edited in the repo
  • Require some third party tools, or are not free to use.
  • Are not configurable because they are either based off third parties like super.so or the configuring requires editing multiple code files.


And I did not want that. We want something that converts well into a static site, can be hosted on github for free using the github.io domain, and can have both pages and blog posts and be configured pretty easily.


Why Notion and Astro

  • I use Notion for all my notes, and it did not make sense for me to download them into an md file, carefully figure out the logistics and push/pull with other SSGs like Quartro, Eleventy, Hugo or Jekyll.
  • I could have used another CMS but again, I use Notion, and it is easier to keep the content in one place. Notion also comes with interesting affordances that other CMS don’t: WYSIWYG for various components, block level permissions (to add drafts to post text), easy collaboration etc.
  • There are some NextJS options that kinda fulfill this criteria but I do not know NextJS and I did not want to figure it out at the moment, for example: Notion Next, Morethan-log, and Notion-Blog-NextJs

Key Features

  • Astro v4.11
  • 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
  • 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
  • Webmentions
  • Giscus comments
  • Auto-generated sitemap
  • Pagefind static search library integration
  • View Transitions
  • 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.

Other themes to consider

View more themes