Making a personal website with Notion, FREE!
Try Notion
Drag image to reposition
Making a personal website with Notion, FREE!
September 30, 2021 8:50 AM
Notion is a pretty cool tool if you're trying to organize your life or take some notes for university. I've used it for the past few years for both of those things, and I really like its UI and how easy it is to make nice-looking documents (the editor is great!). I've also been looking for a no-fuss way to remake my personal website, and so I started investigating using Notion to host it. It turns out there are a few different options already available if you're looking to make a static website with Notion, but none of them quite suited my needs:
Existing ways to create a website with Notion
First off, Notion lets you share pages using a sharing URL, which works great out of the box for creating a basic webpage to share. The problem is, you can't use your own domain, and visiting the shared page loads the whole Notion application, which takes a while. Not ideal for a static website. Notion also offers a nifty HTML export feature, which you could deploy as a static website, but unfortunately the styling doesn't quite hit the mark out-of-the-box.
There are a few third-party alternatives that work out-of-the-box, too, like Super, that try and fix the issues, but they either cost money or aren't performant enough. So I decided I'd try and cobble together something of my own.
My website: Loconotion and GitHub pages
Loconotion is a cool static site generator that creates a website from a Notion page. It generates a performant, good-looking site out-of-the-box, and all you have to do is host it somewhere. GitHub Pages is a great option: it's free, it lets you host straight out of a GitHub repository, and you can bring your own domain. I combined the two together using GitHub Actions to update the website when I have changes I want to push. It works well and is really simple to set up (except for the slightly flaky build which we'll ignore for now...). I just have to push a button on GitHub every time I want to publish from Notion to my website.
Doing it yourself
If you're keen to create a website like this one, I've created a template you can use to set it up yourself. You just have to clone the repo and follow the steps in the README to set up Loconotion and GitHub Pages. It's really easy and low-maintenance.