Making a Website with Notion, Fruition, and Cloudflare

notion header
Notion.so header Notion.so
Notion.so Header

If you haven't heard of Notion.so, it's a fantastic tool for productivity, taking notes, project management, and collaborating with teams. This post is about how I used it to launch a website, starting with a brief backstory about when I discovered the platform.

(Re-)Discovering Notion

Late last year, I discovered Stef Hamerlinck through his super informative podcast, Let's Talk Branding, which led me to re-discover Notion. I say re-discover because I technically discovered Notion through some other medium. When I went to sign up last fall, I saw that I already had an account. ¯\(ツ)

I don't know how I managed to forget about the platform because I love it! I now recommend it to anyone who makes the mistake of raising the topic of organization, productivity, goals, or what I've been up to lately.

It's such an amazing platform because of its flexibility and design. You can use it for project management, time management, note-taking, and--as I recently discovered--a content management system for your website or blog. I will share more about how I use Notion in the future. In the meantime, if you're not familiar with Notion, I highly recommend checking out their website to learn more. You should also check out the amazing communities that are set up around the platform like this subreddit, which is how I learned about some lesser-known features and the creative ways others are using notion.

Launching my Notion website

For nearly a year now, I've been contemplating the idea of blogging again. I used to blog on Wordpress (link to my old blog) but I often felt dissatisfied with the design of my blog and the lack of flexibility when it came to sharing my code and graphs. I started to explore other options (see my huge table of comparisons here) but it became daunting to think about designing a blog when all I really wanted was an option that was a little more flexible while preserving the convenience of Wordpress. Then I discovered sites like Alberto Arenaza's, Virtual Mojito, EmpathyCircles, and Stephen Ou's blog. These sites inspired me to make my own.

I already use Notion for everything, so I thought it would be a super convenient way to share my thoughts and interests with the world, whether it's something I've been tinkering with on Codepen, podcasts that I'm listening to, etc. I also liked the idea of connecting my notion blog as subdomain to my website, which I host for free through Github Pages. In total, I spent $0 to launch my Notion website—I do pay for Notion ($4 a month), but that's because I store and upload so much content.

Design process

Before I launched my website, I first conducted research to plan the design of my site. I looked through a ton of examples on sites like Fruition, Super, and Optemization. I picked out some of my favorites and started sketching out some ideas and creating a list of what I wanted to include. I loved too many of them to list them all here, but I will say that one of the websites that I loved turned into one of the most regrettable finds. The creator of the site included this awesome gif in in their cover:

La historia header

😮 I was memorized and wanted something like that too. Except that I wanted mine to have a transparent background so that it would maintain the effect if someone opted for dark mode on my site. 

That resulted in the biggest waste of time ever, although I sure did learn a lot about gifs. Long story short, I tried to design a gif with a transparent background so that it would look fantastic in both light and dark mode. I initially designed it in Canva only to learn that they don't allow transparent backgrounds in videos.

Undeterred, I figured I will just remove the background in Adobe. That turned out to be ridiculously more frustrating than I thought it would be because of all the colors that I added behind my black cloud and white stars. Five hours later, I finally gave up and decided to design it from scratch.

starry_night_banner

That's when I discovered that the edges will look pixelated in a gif with a transparent background, especially at smaller sizes 🤦🏻‍♀️. If you look at the main page of my notion site, you can see that I obviously gave up on this idea entirely and used a cherry blossom sticker from giphy, which also looks pixelated.

frustrated

Going live

When I finally launched my site, I used Cloudflare workers and Fruition. The Fruition website provides a step-by-step walk-through, which made the process super simple.

fruition walkthrough

I did run into one minor issue along the way because I was adding my Notion webpage as a subdomain (resources.stellamin.com). When I was troubleshooting, I decided to go back through to make sure that I did everything right, which I did. The video tutorial by Dimitris Kamaritis was super helpful here because I realized that I was entering the wrong information. Namely, I was entering my domain name and not my subdomain name.

Other than that one issue, the process was super simple. 

Limitations of using Notion as a blog

You may be wondering why I chose not to use Notion as a blog. The reason is because Notion has not released a public API, so super talented people used some reverse engineering magic and workarounds to turn Notion into a blog. That means you run the risk of losing your blog if the company makes any changes. I am fairly confident that Notion will do what they can to preserve the compatibility, especially since they have such dedicated users that would be pretty upset if their websites crashed. However, I didn't want to run the risk. I also started noting some other features that make Notion less appealing as a blogging platform, like poor SEO and speed. 

Wish list

All websites and tools have their limitations, of course. Below, I've shared my wish list of options that I hope Notion will eventually include. Keep in mind that I am a fairly new user, so it's possible that these features exist and I don't know about them yet.

  • A way to crop photos within the page after you add them.
  • A way to manually resize any embed to keep them all a consistent size.
  • A way to find and replace all for text editing.
  • A way to fit the full name or title of a card in gallery view.
  • Tab option for indented paragraphs.
  • Option to center or right align text.
  • Back button or link in pop-out gallery.
  • Preserving links when you copy and paste.
  • The ability to drag/add a page to an existing gallery
  • Better search function when moving a page