Fruition: Free, Open Source Toolkit for Building Websites with Notion

If your site doesn't work, please read this section.

To fix, you need to apply this change and this change to your script. Or you can create a new version of the script using the form in Step 2.

Notion is a growing product. Their engineers make changes. Those changes may impact Fruition. When that happens, I rely on the amazing open-source community to figure out the solution. So please file an issue if your site doesn't work.

As I've noted below, this is a self-managed solution. I can't promise it will work forever. If you need 100% uptime, I'd recommend paid alternatives like Super.

👏

Features: custom domains, pretty URLs, dark mode, custom font, custom Javascript

✌️

Use cases: perfect for your portfolio, blog, job posting, landing page, or business site

👍

Benefits: completely free, no coding required, no lock-in, open source

👎

Downsides: self-managed solution, needs ~10 minutes to setup

Hello! My name is Stephen, a huge Notion fan and a software engineer. I decided to combine the two and build something cool for the Notion community.

The result is Fruition. With Fruition, you can build and customize your website using Notion pages. It supports custom domains, dark mode, Google Fonts, SEO, and script injection. The coolest feature is pretty URLs. Click this link ⇒

Showcase, address bar should say fruitionsite.com/showcase.

Today, I'm sharing with you how to do it for free, with no coding knowledge required.

If you want a fully managed solution, you should use sites like Super. If you'd like to DIY and save some money like hundreds of people have done, follow along. It will take 10 minutes. I promise it will be easier than setting up a WordPress site.

Get Started

📺

Prefer video instead? Watch this step-by-step tutorial created by Dimitris Kamaritis.

On a high level, we are utilizing Cloudflare Workers to rewrite traffic. The solution is inspired by this script (thank you Mayne!), and I added my own features like pretty links.

Step 0: Prerequisite

Enable Public Access on your desired pages through Notion's Share menu, and Allow Search Engines (optional).

Purchase your desired domain with a registrar like Namecheap, or use your existing domain or subdomain.

Step 1: Set up your Cloudflare account (5 mins)

Enter your custom domain name. If you would like to use a subdomain, you should still enter your root domain name here.

Select the Free plan

If you don't have any A records imported, add one with your root domain as the Name and 1.1.1.1 as the Content. Otherwise, click Continue on the DNS Record page.

If you are using a subdomain, add one with your subdomain as the Name and 1.1.1.1 as the Content.

Copy the 2 nameservers, which end with .ns.cloudflare.com

Paste the nameservers in the domain setting page at your registrar (Namecheap in my case). Make sure you save the setting.

Wait for a minute, then click Done, check nameservers

Select Flexible SSL/TLS encryption mode

Turn on Always Use HTTPS, Auto Minify, and Brotli (all 3 optional but recommended)

Select Done

You should see this screen. If Cloudflare hasn't detected your site, click Re-check your site, and refresh the page.

Select the Workers page (one of the blue boxes) and then click Manage Workers

Choose any available subdomain for your worker (it doesn't really matter what you pick)

Click Set Up and then click Confirm

Choose the Free plan

If your site gets a lot of visitors, you can change to the paid Unlimited plan later.

Verify your email if you haven't, then go back to the Manage Workers page (see #12)

Click Create a Worker

Step 2: Customize and generate the script (2 mins)

Step 3: Paste the script in Cloudflare (1 min)

Delete the existing code, and paste the code you copied

Click Save and Deploy

After saving, click on your site name on the top of the page

Go to the Workers page and select Add Route

Type yourdomain.com/* (or subdomain.yourdomain.com/* if you would like to use a subdomain, or *yourdomain.com/* if you would like to enable other all subdomains like www) as the Route and select the Worker you just created

Hit save, and you're done! You can now visit your site. 🎉

Shoot me an email to be featured in the Showcase. I'd love to see some cool sites.

I'd appreciate it if you link Fruition from your website so more people know about it.

Love from Our Users

🔥

Hundreds of people have used Fruition. Hear what some have to say.

Wow, just wow. Thank you so much for releasing Fruition - it is an absolute beauty to work with! I especially love the front end to auto-generate the Cloudflare worker script. - Conrad Lin on Product Hunt

+1 for Fruition. Free and pretty easy to setup with step by step instructions. 🙌🏻 - Tim Jeffries on Notion Facebook Group

This is probably the easiest-to-manage website ever. Just open Notion, change stuff, done. - Chris Coyier on CSS-Tricks

Kudos to you for releasing this. Particularly the clean URLs. - Zee Kane via email

It works flawlessly and it's very easy to set up. I have officially switched from the WordPress pain and it feels liberating. - Remgriff Maximus on Reddit

It was so easy to set up a custom domain for my Notion site with Fruition. I tried doing it on my own previously but got stuck since I am not a coder. - Vivek Raju via email

holy crap. this is 99% of what i have been looking for. - Steve Klabnik via Twitter

Fruition makes Notion pages much prettier with custom domains. It’s a lot like a starter version of Super, and it’s open-source and free to use. - Product Hunt Newsletter

This is incredibly awesome. I just want this project not to die. That's all. Thank you so much. - Nitesh Manav on Product Hunt

I tried it out this week and was so impressed by how simple it was to get started. Give it a try! - Notion Experts Newsletter

Making our website in Notion was a breeze with Fruition. It's not often that something is so well documented and works at the first try. Thanks a million! - Bram Hilgersom via email

Fruition is incredibly sleek. Hell of a job, good work! - AJ Adams via email

This is some next level wizardry. - Pilotboi on Reddit

That's the main thing I was missing, custom slugs, so if I want to change my system at some point, no links would ever break! - Edgaras Benediktavicius on Github

This is by far the best way to add custom domains to your Notion pages and even a solution for creating multi-page websites. - Dimitris Kamaritis on YouTube

I've been beta-ing this product for a few days, and it works flawlessly. - Matt Green on Product Hunt

such. a. useful. tool. THANK YOU. - Devan Sood on Twitter

This is brilliant, took me about 15 minutes to set up and I’m not very techie. Clear and easy to follow step by step instructions. - Tracy Algar on Reddit

If you love Notion and always wanted to use custom domains with it, you'd normally have to pay upwards of $50/year. Now you can do it for free. - David Miranda on Twitter

Fruition checks EVERY box for trends I’m excited about. - Chris Sperandio via Twitter

I've been tempted to migrate my personal site over to Notion (with a URL redirect), but this is significantly better. Especially like the pretty URL slugs. - Dan Smolkin on Reddit

If you want to set up a quick blog/website, Notion + Fruition is by far the easiest way to go. - DK on Twitter

Got this working in less than 10 mins. Amazing work! - Daniyal Javed Khan on Notion Facebook Group

It saved us so much time to develop something to show others from scratch. Such a godsend, just really wanted to show my appreciation 🙏 - Shawn Cheng via email