Creating a Portfolio Site Using Notion and Fruition • CodeLess.wiki skip to content
Site header image CodeLess.wiki

Creating a Portfolio Site Using Notion and Fruition

Last Updated:
Site Builder

Get Started: Creating a Portfolio Site Using Notion and Fruition

If you're looking to create a portfolio site using Notion with a custom domain, this guide will walk you through the process step-by-step. We'll be using the Fruition toolkit, which leverages Cloudflare Workers to provide custom domain support and additional customization options for your Notion pages. Follow along to set up your own portfolio website.

Step 0: Prerequisite

  1. Enable Public Access on Notion Pages:
    • Go to the Notion pages you want to showcase on your portfolio.
    • Toggle the “Share to web” option from the Share menu.
    • Optionally, enable "Allow Search Engines" for better SEO visibility.
  2. Get a Domain:
    • Purchase a domain from a registrar like Namecheap, or use an existing one.
    • If you plan to use a subdomain (e.g., portfolio.yourdomain.com), ensure your domain is properly configured.

Step 1: Set Up Your Cloudflare Account (5 mins)

  1. Sign Up for Cloudflare:
  2. Add Your Domain:
    • Enter your custom domain (e.g., yourdomain.com). If using a subdomain, enter the root domain (e.g., yourdomain.com).
  3. Select the Free Plan:
    • Choose the Free plan during the setup process.
  4. Configure DNS Records:
    • If no A records are imported, add one with your root domain as the Name and 1.1.1.1 as the Content.
    • If using a subdomain, add it with the subdomain as the Name and 1.1.1.1 as the Content.
  5. Change Nameservers:
    • Copy the two nameservers provided by Cloudflare.
    • Go to your domain registrar's DNS settings and update the nameservers to those provided by Cloudflare.
  6. Complete Domain Setup:
    • Wait a minute, then click "Done, check nameservers" on Cloudflare.
  7. SSL/TLS Encryption:
    • Select "Flexible" under SSL/TLS encryption mode.
    • Turn on "Always Use HTTPS," "Auto Minify," and "Brotli" for improved performance and security.
  8. Finish Setup:
    • Click "Done" to complete the setup. If Cloudflare hasn’t detected your site, click "Re-check your site" and refresh the page.
  9. Set Up Cloudflare Workers:
    • Go to the Workers section and click "Manage Workers."
    • Choose a subdomain for your worker, click "Set Up," and confirm. Select the Free plan.
    • Verify your email if prompted, then go back to the "Manage Workers" page and click "Create a Worker."

Step 2: Customize and Generate the Script (2 mins)

  1. Visit Fruition Script Generator:
    • Go to  Fruition and follow the instructions to customize your script.
    • Enter the Notion page URLs you want to map to your custom domain, and apply any additional customizations like CSS or Google Analytics.

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

  1. Replace Worker Script:
    • In the Cloudflare Workers editor, delete the existing code and paste the customized Fruition script you generated.
  2. Deploy the Worker:
    • Click "Save and Deploy" to activate the worker.
  3. Configure Routing:
    • Go back to the Workers page and click "Add Route."
    • Enter your domain/subdomain followed by /* (e.g., yourdomain.com/* or portfolio.yourdomain.com/*) as the Route.
    • Select the Worker you just created and save the settings.

Step 4: Final Steps

Visit Your Portfolio Site:
  • Your custom domain should now be live with your Notion pages. Visit the domain to ensure everything is functioning correctly.

Finally, a big thank you to Stephen, the creator of Fruition, for providing such an incredible toolkit that empowers users to turn their Notion pages into fully functional websites. If you found this guide helpful, consider giving Stephen a shoutout and visiting Fruition to explore more of what this fantastic tool can do. Your support helps spread the word about valuable resources like this one, benefiting the entire community. Happy creating!