notehost

NoteHost: Free Hosting for Notion Sites!

Using:

• Cloudflare DNS
• Cloudflare workers
• Reverse proxy implementation
• TypeScript

Supports:

• Custom meta tags
• Page slugs
• Dark mode toggle
• Custom JS for head and body
• Custom fonts (using Google Fonts)
• Subdomain redirect (e.g. www)

How to use:

Setup your Cloudflare account

• Add your domain to Cloudflare. Make sure that DNS doesn't have A records for your domain and no CNAME alias for www
• Create a new worker on Cloudflare and give it a meaningful name, e.g. yourdomain-com-notion-proxy
• Keep the default example worker code, we will overwrite it anyway during deploy (see below)

[!TIP] A bit outdated but detailed description on how to add your domain to Cloudflare and create a worker is here.

Search for "Step 1: Set up your Cloudflare account".

If someone wishes to create an up-to-date tutorial for NoteHost, please submit a pull request 😉

Generate your NoteHost worker

Go into your working directory and run:

npx notehost init <domain>

Follow the prompts to confirm your domain name and enter the requested information. You can change these settings later via the configuration file.

NoteHost will create a directory with the name of your domain. In this directory you will see the following files:

.
├── build-page-script-js-string.sh    helper script, details below
├── package.json                      test & deploy your website, see realtime logs
├── tsconfig.json                     types config
├── wrangler.toml                     your Cloudflare worker config
└── src
    ├── _page-script-js-string.ts     generated by helper script
    ├── index.ts                      runs reverse proxy
    ├── page-script.js                your custom JS page script
    └── site-config.ts                your domain and website config

Go into this directory and run

npm install

Configure your domain

Make sure that wrangler is authenticated with your Cloudflare account

npx wrangler login

• Edit wrangler.toml and make sure that the name field matches your worker name in Cloudflare
• Edit site-config.ts and set all the necessary options: domain, metadata, slugs, subdomain redirects, etc. All settings should be self explanatory, I hope 😊

import { NoteHostSiteConfig, googleTag } from 'notehost'
import { PAGE_SCRIPT_JS_STRING } from './_page-script-js-string'

// Set this to your Google Tag ID from Google Analytics
const GOOGLE_TAG_ID = ''

export const SITE_CONFIG: NoteHostSiteConfig = {
  domain: 'yourdomain.com',

  // Metatags, optional
  // For main page link preview
  siteName: 'My Notion Website',
  siteDescription: 'Build your own website with Notion. This is a demo site.',
  siteImage: 'https://imagehosting.com/images/preview.jpg',

  // URL to custom favicon.ico
  siteIcon: 'https://imagehosting.com/images/favicon.ico',

  // Additional safety: avoid serving extraneous Notion content from your website
  // Use the value from your Notion settings => Workspace => Settings => Domain
  notionDomain: 'mydomain',

  // Map slugs (short page names) to Notion page IDs
  // Empty slug is your main page
  slugToPage: {
    '': 'NOTION_PAGE_ID',
    about: 'NOTION_PAGE_ID',
    contact: 'NOTION_PAGE_ID',
    // Hint: you can use '/' in slug name to create subpages
    'about/people': 'NOTION_PAGE_ID',
  },

  // Subdomain redirects are optional
  // But it is recommended to have one for www
  subDomains: {
    www: {
      redirect: 'https://yourdomain.com',
    },
  },

  // The 404 (not found) page is optional
  // If you don't have one, the default 404 page will be used
  fof: {
    page: 'NOTION_PAGE_ID',
    slug: '404', // default
  },

  // Google Font name, you can choose from https://fonts.google.com
  googleFont: 'Roboto',

  // Custom JS for head and body of a Notion page
  customHeadJS: googleTag(GOOGLE_TAG_ID),
  customBodyJS: PAGE_SCRIPT_JS_STRING,
}

Deploy your website

npm run deploy

🎉 Enjoy your Notion website on your own domain! 🎉

[!IMPORTANT] You need to run deploy every time you update page-script.js or site-config.ts.

What is build-page-script-js-string.sh?

The file src/page-script.js contains an example of a page script that you can run on your Notion pages. This example script removes tooltips from images and hides optional properties in database cards.

🔥 This script is run in the web browser! 🔥

You can use document, window and all the functionality of a web browser to control the contents and behavior of your Notion pages. Also, because this is a JS file, you can edit it in your code editor with syntax highlighting and intellisense!

To incorporate this script into a Notion page, NoteHost must transform the file's contents into a string. Consequently, the build-page-script-js-string.sh script is executed whenever you run npm run deploy.

So just add your JS magic to page-script.js, run deploy and everything else will happen automagically 😎

Logs

You can see realtime logs from your website by running

npm run logs

Demo

https://www.velsa.net

Acknowledgments

Based on Fruition, which is no longer maintained 😕

Lots of thanks to @DudeThatsErin and her code snippet.