.jpg)
Who said you can't make a personal website using Notion? Well... no-one actually, but I've recently been seeing some fantastic use cases for Notion including portfolio sites, resumes, landing pages to name just a few.
So I thought I would set myself a challenge to recreate a few pages of my own personal website using Notion.
Like a lot of folk, I’m guilty of taking far too much time creating a "quick" website — pushing pixels around for sometimes months on end to get the perfect aesthetic look. However, trying to practise what I preach I thought I would put my favourite tool through its paces and try to recreate my personal site using no-code.
In all honesty, I thought I would just give the homepage a shot at first and leave it there. So I created the homepage and fired off a tweet to see if anyone was interested. I didn’t expect so many people to like and comment on the tweet. This is by far the most engagement I have had on twitter by far! 253,000 impressions, 2,228 likes and a tweet from one of the most well respected digital designs Dan Petty.
After some quick validation from the Notion and No Code twitter community, I thought I would turn it up a notch and try to recreate the rest of my personal site.
So I started designing the majority of the core pages on my personal site, reusing components I had previously created and pasting them across. Creating a navigation was a little tricky at first as it's not evident to most users where the breadcrumbs are located. So I used the 'Call Out' block and added some custom Icons and created my own navigation bar across each page.
The next challenge was adding email capture. I got a great recommendation via twitter about a new product in Beta called ChilliPepper.io which allows you to create an email capture form and add it to your Notion site using the Embed tool block. It took me literally 3 minutes from start to finish to create the form and embed it.
The only thing I didn't add which I might consider in the future was creating a CMS for the blog page using the grid layout to add content dynamically. Shout out to Nabil for the suggestion.
Personally, I’m pretty impressed at what you can pull off using Notion despite a few constraints. It took me roughly 4 hours from start to finish. However, the one substantial advantage was that I simply had to copy and paste all the copy from my website and also had all my assets to hand. The trickiest thing was positioning and the alignment of the blocks which still needs some work by Notion.
It's worth touching briefly on some of the limitations. As with any no code drag and drop builder, there are limitations to consider.
The most obvious limitation is the design constraints. Alignment is tricky at times and there is no option to centre align blocks, position images in alternative layouts or change the colour of sections and background.
This is perhaps the biggest issue in my opinion. Regardless of whether Notion is being used for creating websites, SEO optimisation should be at least available for sharing notes and tables online. If you drop your shared Notion url into HeyMeta you will notice the meta data, including the title, description and image all belong to Notion. Currently there isn't an option to edit the meta description. This can cause issues when sharing your url on social channels and also when Google indexes it on their search results.
However, all of the above limitations are a fair trade-off given the time it takes to create and publish something. We shouldn't forget that Notion wasn't envisaged to create fully functioning websites - currently it's an indirect benefit of the platform a few people are utilising.
Lastly, I’ve been asked a few times “how can you host it on your own domain, track analytics or make it in general look more like a website than a Notion page?” This leads me nicely to my next suggestions.
Recently a number of great new tools have surfaced built entirely off the back of the Notion ecosystem to bring a bunch of powerful features to bridge the gap where Notion fails. These include:
If you fancy giving it a shot yourself, Fruition provides a free, open source toolkit which takes about 10 minutes to set up but has a slight technical curve.
Update 01/01/2022
I recently updated the website template pack with a number of improvements and also created a new version that can be used alongside Popsy. Popsy is a tool to supercharge your Notion site, adding additional functionality such as, navigation bar on desktop and mobile, custom domain, CTA buttons, themes, fonts, callout cards, social icons and much more. You can check out a preview of the site here.
.jpg)