Recreating My Personal Site Using Notion + Free Notion Personal Site Template Pack
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 folks, 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.
In all honesty, I thought I would just give the homepage a shot at first and leave it there. So I created a quick draft of 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!
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, add spacers or change the colour of sections.
Additionally, it would be great to have the ability to hyperlink images. This would allow me to add CTA’s and banners which link to other pages.
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 metadata, 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.
📈 Analytics, Hosting & Domains
Lastly, I’ve been asked a few times “how can you host it on your own domain and track analytics?” This leads me nicely to my next suggestion.
Super. I haven’t personally used it but from what I have seen other people do with it I’m really impressed. You can add custom domains, analytics, live chat, and custom fonts to your Notion pages for a monthly fee. 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.
So what’re the advantages of using Notion?
- It’s super quick to use
- It’s free
- It has a handy embed tool (think Google maps, TypeForm etc)
- It takes just one click to publish and share
- Great MVP option to test your copy and layout before creating something more polished
- It’s as easy to update and maintain as a word doc
- Unsplash: Blog images
- Chillipepper.io: Embedded email capture form
- Open Peeps: Illustrations
- Figma: Graphics Editor
- Notion VIP: Custom Icons
I just launched a new Notion Portfolio Component Kit. Whilst creating the Personal Site Template I created a ton of different layouts and compositions. So I packed them all up and added some new ones and created the Notion Portfolio Component Kit.
The Notion Portfolio Component Kit was built specifically for the inner creative in-mind. It’s packed with over 60 pre-built Notion components saving you a ton of time to create. Simply copy and paste each block you like and create your own portfolio page in minutes.
Originally published at https://www.samdickie.me.