I love Notion (who doesn't?) and use it for several private projects - the ability to think and create in blocks is a huge boost to productivity. However, I'm quite baffled that Notion hasn't (yet) made it possible to publish projects on a custom domain. In fact, this need is so acute that it has spawned an entire gamut of startups - Sugar, Potion, HostNotion and more - who charge a monthly fee just for the privilege of hosting your Notion pages on a custom domain.
In exploring options to work around this limitation, I came across two potential solutions - Loconotion and Fruition. Both tackle the problem in different ways - Loconotion generates static replicas of the Notion page, while Fruition utilises Cloudflare Workers to rewrite traffic on the fly. While both are open source, Loconotion's approach strips off unnecessary bloat, and allows custom slugs, fonts, and code injection for web traffic analytics. Of course, this approach also comes with tradeoffs and only tests on your own pages can determine suitability. That said, let's dive in and see how Locomotion can be used with Notion.
Install Loconotion on a DigitalOcean Droplet
My workstation is frankly a dependency mess right now, so I'm going to use a DigitalOcean droplet for this walk through. If you wish to do the same, sign up here - you’ll receive a $200, 60-day credit as soon as you add a valid payment method to your account. Set up your team and project, create a basic droplet (2GB RAM / 1 CPU, Ubuntu 20.04 image), set the data center region, an authentication option (root password for now) and the hostname. Click
Once the droplet is ready, select it and launch the
Droplet Console as root from the menu options. Run the following commands to update the Ubuntu instance, install dependencies and the Loconotion script.
# Update the package metadata and packages to the latest versions apt update && apt upgrade # Install Chrome browser to be run in headless mode wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb sudo apt install ./google-chrome-stable_current_amd64.deb # Install ChromeDriver, which is used to automate the Chrome browser, from https://chromedriver.chromium.org/downloads wget <chromedriver_download_url> # Example: wget https://chromedriver.storage.googleapis.com/106.0.5249.61/chromedriver_linux64.zip # Unzip the file, set permissions and move it to /usr/bin apt install unzip unzip <chromedriver_archive> chmod 755 chromedriver mv chromedriver /usr/bin # Install Python virtual environment apt install python3-virtualenv # Create a Python virtual env and activate it virtualenv -p python3 venv source venv/bin/activate # Clone the git repository and install Loconotion via pip git clone https://github.com/leoncvlt/loconotion cd loconotion pip install -r requirements.txt
Convert a Notion Page into Static Files
In the simplest form, Loconotion takes the URL of a public Notion page as input, and generates the site inside the
dist folder based on the page title.
python loconotion <NOTION_URL> --chromedriver /usr/bin/chromedriver
You can also configure the site aesthetics by passing a
.toml configuration file - see the Advanced Usage on their GitHub page for details. Once the script runs, download the files to your local workstation. When your Notion page changes, simply run the above command with the
--clean flag to regenerate the files.
scp -r root@<DROPLET_IP>:/root/loconotion/dist/<FOLDER_NAME> Downloads/loconotion
Loconotion is effectively creating a static version of a page with potentially dynamic elements, so features like editing, checking boxes, switching between views etc are not available. This is generally fine for static websites though.
Deploy the Static Website to Netlify or Railway
Now that you have a fully functional static website, you can choose between several options to host it. While it seems straightforward, hosting a static website on a custom domain for free hasn't traditionally been quite as noob-friendly. Thankfully, platforms like Vercel, Netlify, Render and Railway have changed the status-quo for the better. I've covered hosting on Netlify and Railway at length in the past - have a look at those posts to complete this walk through.