Notion is my favourite app by far! I love its design, aesthetics and describing my pages with emojis. What I love the most about it though, is the fact that it is so easy to add content and yet it allows us to do some crazy customisations.

I cannot remember the amount times I wished I could use it as my personal website. Then one day while scrolling through Twitter, I saw a website that was inspired by Notion’s design (sadly cannot find a link to it). I then thought of looking online if people have finally managed to find a way to use a Notion page as their website. Finally, googling “notion personal websites“ gave plenty of results with examples of people already doing it! Time to consider doing the same.

Re-valuating my old website

I love writing blog posts, but the process of posting new content in my old website was painful. I developed the website using Gatsby which at the time was the cool frontend framework to use. Because of that I always thought that because I am a guy that writes React code for a living, why not have a personal website with it. It would be a good way to keep my frontend skills up to date.

Sadly, Gatsby went through several major version upgrades over the 2 years since I first wrote the code for my website. Every new version made it more and more painful to maintain it. Let alone that the design of it kinda sucked. Of course it did, I am no designer and on the top of that I have recently lost interest in frontend code.

Apart from the Gatsby part of it, every new blog post went like the following.

1. Write the blog post in Notion
2. Paste it in my website and fix all the incompatibility issues between Notion’s markdown and Gatsby’s remark transformer
3. Are there any images?
   1. Open a Github repo, click on issues, add a new one (don’t save it), drag and drop the image there and grab it’s hosted URL (you’re welcome for the hack)
   2. Now that the image is hosted, use a div to centre it within the Gatsby page
4. Are there any links? They need to be converted to HTML
   1. Thankfully I wrote a script that does that for me
   2. Double check that all of the links have been converted properly
   3. Double check each link opens URLs in new tabs
5. SEO?
   1. Find an image on unsplash.com
   2. Repeat step 3
      1. Add a full HD version of it in the page
      2. Add a lower quality version for the social media previews
   3. Reference the artist below the image
   4. Check the Twitter card validator and on LinkedIn if the previews look alright (you’ll find it surprising how often an image did not look good on the previews, or wasn’t uploaded properly)
6. Do some proof read
   1. Run the server locally, can I access it via my phone?
   2. If not, publish it and keep it quiet 🙊
   3. Are there any corrections? Do it on the React and Notion side at the same time so that they are synced

As you might have noticed already, it is not the simplest process to post a blog post like the one you are reading. Now let’s talk about the solution with Notion.