Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/velsa/notehost

Free Hosting for Notion Sites!
https://github.com/velsa/notehost

Last synced: 2 months ago
JSON representation

Free Hosting for Notion Sites!

Host: GitHub
URL: https://github.com/velsa/notehost
Owner: velsa
License: mit
Created: 2024-01-26T02:57:19.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-07-30T14:59:59.000Z (6 months ago)
Last Synced: 2024-11-11T23:53:49.198Z (3 months ago)
Language: TypeScript
Size: 188 KB
Stars: 105
Watchers: 5
Forks: 9
Open Issues: 14
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

awesome-notion - NoteHost - Free Hosting for your Notion Pages on your custom domain. (Notion as Website)

README

# 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](https://fonts.google.com/))
- Subdomain redirect (e.g. www)

## How to use:

### Setup your Cloudflare account

---

1. Add your domain to Cloudflare. Make sure that DNS doesn't have `A` records for your domain and no `CNAME` alias for `www`
2. Create a new worker on Cloudflare and give it a meaningful name, e.g. `yourdomain-com-notion-proxy`
3. 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](https://stephenou.notion.site/stephenou/Fruition-Free-Open-Source-Toolkit-for-Building-Websites-with-Notion-771ef38657244c27b9389734a9cbff44).
>
> 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:

```sh
npx notehost init
```

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

```sh
npm install
```

### Configure your domain

---

Make sure that wrangler is authenticated with your Cloudflare account

```sh
npx wrangler login
```

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

```ts filename="src/site-config.ts"
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',

// Social media links, optional
twitterHandle: '@mytwitter',

// 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',
},

// Rewrite meta tags for specific pages
// Use the Notion page ID as the key
pageMetadata: {
'NOTION_PAGE_ID': {
title: 'My Custom Page Title',
description: 'My custom page description',
image: 'https://imagehosting.com/images/page_preview.jpg',
author: 'My Name',
},
},

// 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 CSS/JS for head and body of a Notion page
customHeadCSS: `
.notion-topbar {
background: lightblue
}`,
customHeadJS: googleTag(GOOGLE_TAG_ID),
customBodyJS: PAGE_SCRIPT_JS_STRING,
}
```

### Deploy your website

---

```sh
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

```sh
npm run logs
```

### Demo

---

https://www.velsa.net

### Acknowledgments

---

Based on [Fruition](https://fruitionsite.com), which is no longer maintained 😕

Lots of thanks to [@DudeThatsErin](https://github.com/DudeThatsErin) and her [code snippet](https://github.com/stephenou/fruitionsite/issues/258#issue-1929516345).