Turn Notion Pages into Websites with Loconotion

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 Create Droplet.

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.