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

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
  1. Enable Public Access on your desired pages through Notion's Share menu, and Allow Search Engines (optional).
  1. 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)
  1. Sign up for an account: https://dash.cloudflare.com/sign-up
    1. notion imagenotion image
  1. Enter your custom domain name. If you would like to use a subdomain, you should still enter your root domain name here.
    1. notion imagenotion image
  1. Select the Free plan
    1. notion imagenotion image
  1. 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.
      notion imagenotion image
  1. Copy the 2 nameservers, which end with .ns.cloudflare.com
    1. notion imagenotion image
  1. Paste the nameservers in the domain setting page at your registrar (Namecheap in my case). Make sure you save the setting.
    1. notion imagenotion image
  1. Wait for a minute, then click Done, check nameservers
    1. notion imagenotion image
  1. Select Flexible SSL/TLS encryption mode
    1. notion imagenotion image
       
  1. Turn on Always Use HTTPS, Auto Minify, and Brotli (all 3 optional but recommended)
    1. notion imagenotion image
  1. Select Done
    1. notion imagenotion image
  1. You should see this screen. If Cloudflare hasn't detected your site, click Re-check your site, and refresh the page.
    1. notion imagenotion image
  1. Select the Workers page (one of the blue boxes) and then click Manage Workers
    1. notion imagenotion image
  1. Choose any available subdomain for your worker (it doesn't really matter what you pick)
    1. notion imagenotion image
  1. Click Set Up and then click Confirm
    1. notion imagenotion image
  1. Choose the Free plan
      • If your site gets a lot of visitors, you can change to the paid Unlimited plan later.
      notion imagenotion image
  1. Verify your email if you haven't, then go back to the Manage Workers page (see #12)
    1. notion imagenotion image
  1. Click Create a Worker
    1. notion imagenotion image
Step 2: Customize and generate the script (2 mins)
Step 3: Paste the script in Cloudflare (1 min)
  1. Delete the existing code, and paste the code you copied
    1. notion imagenotion image
  1. Click Save and Deploy
    1. notion imagenotion image
  1. After saving, click on your site name on the top of the page
    1. notion imagenotion image
  1. Go to the Workers page and select Add Route
    1. notion imagenotion image
  1. 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
    1. notion imagenotion image
  1. Hit save, and you're done! You can now visit your site. 🎉
    1. notion imagenotion image
  1. Shoot me an email to be featured in the Showcase. I'd love to see some cool sites.
  1. 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
You made a really great guide and the auto-generated script was amazing. - Nathan Brucher via email
woah this is super cool! - David Jiang
👇
Built a site with Fruition? Shoot me an email to be featured in the Showcase.
Showcase

FAQs


Is Fruition completely free?
  • Yes. It took me a weekend to put this together, and there’s no ongoing cost. So I’m more than happy to publish it for free and help out the awesome Notion community.
  • You do need to pay your domain registrar for the domain.
  • If you get a lot of page views, you also need to pay for Cloudflare Workers which starts at $5/month.
My site doesn't work. Please help.
  • I do not have the bandwidth to provide support.
How did you come up with the idea?
  • I didn't. Full credit to sites like Super for inspiring me to do this and developers like Mayne for making their work public.
How is Fruition different from Super, HostingPotion, or HostNotion?
  • Fruition is free and open source, while Super, HostingPotion, or HostNotion are fully managed. That means I can't help you if Cloudflare goes down. I also can't promise this script will work forever due to reasons outside my control (e.g. Notion changes code that impacts Fruition).
  • One feature only Fruition has is pretty URL slugs.
How do I use a subdomain?
  • Most steps are the same. The only differences are 1) in step 1.4, add an A record with your subdomain, 2) in step 2, enter your subdomain in the form, 3) in step 3.5, use your subdomain as the route.
How do I make www. work on my domain?
  • On step 3.5, add to star in front of the domain route. For example, from fruitionsite.com/* to *fruitionsite.com/*
Why does the URL flash when I first load the site?
  • Good eye! It is an artifact of how custom URL slugs is implemented. As far as I know, there isn't a way around it. If you find one after reading the code, let me know!
Where's the code?
Is it affiliated with Notion?
  • No. But we sure ❤️ Notion.
How can I help? Can I donate?
  • Thank you for the offer. I’m lucky to be in a position to provide Fruition completely for free, and I intend to keep it that way. I encourage you to donate to your favorite charity.
  • The only thing I’d ask you is to link back to Fruition on your site, so your readers know about this great resource.

Extras