I moved my website to Notion
I moved my website to Notion

I moved my website to Notion

Description
How I combined my favourite productivity tool with my personal website
Tags
Notion
Website
Date posted
Mar 5, 2022
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
  1. Paste it in my website and fix all the incompatibility issues between Notion’s markdown and Gatsby’s remark transformer
  1. 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
  1. 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
  1. 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)
  1. 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.
 

The solution

The good news is that on the Notion side it is 100% free to make a website public! If you check on the top right corner of a Notion page, there is a “Share” button which if you click has a “Share web” toggle. Once you click it it will give you a URL along with some more options. Congrats, that it’s on the Notion side. However, we’re not done yet.
 
notion image
 
If you open that public URL of your page, it has a few annoying issues.
  1. On the top right corner, it has buttons for “search”, more options, and a “Try Notion
  1. There is this weird id at the end of the URL
  1. Loading the website is quite slow
 
The first two options made the website look a bit less professional because it screamed “I am a Notion page and not a personal website”. Thankfully quite a few solutions are out there already that solve these problems. The one I chose was simple.ink as it looked the simplest one to get started with.
 
I liked how when you open their page, there’s a YouTube video which takes you through the whole process of no website to website integrated with Notion. The 2 founders seemed to be a couple of young IndieHackers from London which made me feel some sympathy as being an IndieHacker is one of my wildest dreams. The website also mentioned that they have already thought about the ugly URLs with the ids at the end and solved it. Awesome!
 
Simple.ink has custom pages that act like a middleman between Notion and your domain. In these custom pages, they have hidden the “try notion” etc buttons from the navbar and have done some routing work to remove the ids at the end of the URLs. Also they seem to have some sort of caching in place which makes loading the website faster than in Notion. That was all I was looking for.
 
Though it charged me $72 per year to link my custom domain to my simple.ink, it was totally worth it. The thought of not having to go through the old process of posting a new blog post was totally worth the money they were asking for.
 
Simple.ink also allows you to add custom CSS for small customisations. I use that to remove the centred position of the page icon. You can also add Javascript code if you want to add analytics etc to your website. Now let’s analyse the positives and negatives of that decision.
 

The pros

  1. You have Notion’s minimalistic design and perks straight in your website
  1. Better SEO with no ugly URLs! They have taken care of removing the ids at the end
  1. When clicking on a table Database row, it opens it instantly as a new page (this really annoys me in Notion)
  1. Posting / updating content literally takes a couple of seconds
  1. It is Notion, which means no more coding or maintaining infrastructure! Only focus on the content
  1. SEO page previews are already done for you! Just add a cover image to the page in Notion
  1. If you don’t prefer my solution there’s tons more out there. I found this one with CloudFlare pages which also seems to be free
 

The cons

  1. Not free, it costs $72 per year. And that is without considering renewing your domain per year
  1. Limited amount of customisation. There is a dark / light toggle icon at the bottom of the page which I would prefer it to be on the top
  1. No routing options which means that all my old links that were going through /blogs/:name are now dead
  1. Switching the DNS can be a bit tricky. It seemed that the issue was with Netlify blocking the domain. I fixed it by redirecting my DNS to Cloudflare and linked that with simple.ink
  1. Currently no SEO previews for Twitter
 
However, it is important to mention that the team from simple.ink gave me great support for the 4th issue and have told me that they are already working on points 2, 3 and 5.
 

Summary

I have to admit that the initial ride to moving my website to Notion was a bit bumpy. But now that most of the issues have been addressed the road is much smoother. The pros in comparison to the cons make the whole experience of posting new content so much better (at least for me).
 
Based on that, I hope that now that the process of posting new content is so much easier to actually do that more often. Give me a shout if you have any questions.