{"id":13769795,"url":"https://github.com/velsa/notehost","last_synced_at":"2025-05-11T02:33:28.288Z","repository":{"id":219322011,"uuid":"748467275","full_name":"velsa/notehost","owner":"velsa","description":"Free Hosting for Notion Sites!","archived":false,"fork":false,"pushed_at":"2024-07-30T14:59:59.000Z","size":193,"stargazers_count":105,"open_issues_count":14,"forks_count":9,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-11-11T23:53:49.198Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/velsa.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-26T02:57:19.000Z","updated_at":"2024-11-07T23:56:43.000Z","dependencies_parsed_at":"2024-02-20T01:29:43.785Z","dependency_job_id":"f9fb4948-1074-4344-abd8-cb645c02d0d4","html_url":"https://github.com/velsa/notehost","commit_stats":null,"previous_names":["velsa/notehost"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velsa%2Fnotehost","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velsa%2Fnotehost/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velsa%2Fnotehost/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/velsa%2Fnotehost/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/velsa","download_url":"https://codeload.github.com/velsa/notehost/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225004669,"owners_count":17405658,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-03T17:00:31.614Z","updated_at":"2024-11-17T05:31:37.709Z","avatar_url":"https://github.com/velsa.png","language":"TypeScript","funding_links":[],"categories":["Notion as Website"],"sub_categories":[],"readme":"# NoteHost: Free Hosting for Notion Sites!\n\n## Using:\n\n- Cloudflare DNS\n- Cloudflare workers\n- Reverse proxy implementation\n- TypeScript\n\n## Supports:\n\n- Custom meta tags\n- Page slugs\n- Dark mode toggle\n- Custom JS for head and body\n- Custom fonts (using [Google Fonts](https://fonts.google.com/))\n- Subdomain redirect (e.g. www)\n\n\u003cbr/\u003e\n\n## How to use:\n\n### Setup your Cloudflare account\n\n---\n\n1. Add your domain to Cloudflare. Make sure that DNS doesn't have `A` records for your domain and no `CNAME` alias for `www`\n2. Create a new worker on Cloudflare and give it a meaningful name, e.g. `yourdomain-com-notion-proxy`\n3. Keep the default example worker code, we will overwrite it anyway during deploy (see below)\n\n\u003e [!TIP]\n\u003e 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).\n\u003e\n\u003e Search for \"Step 1: Set up your Cloudflare account\".\n\u003e\n\u003e If someone wishes to create an up-to-date tutorial for NoteHost, please submit a pull request 😉\n\n\u003cbr/\u003e\n\n### Generate your NoteHost worker\n\n---\n\nGo into your working directory and run:\n\n```sh\nnpx notehost init \u003cdomain\u003e\n```\n\nFollow the prompts to confirm your domain name and enter the requested information. You can change these settings later via the configuration file.\n\nNoteHost will create a directory with the name of your domain. In this directory you will see the following files:\n\n```\n.\n├── build-page-script-js-string.sh    helper script, details below\n├── package.json                      test \u0026 deploy your website, see realtime logs\n├── tsconfig.json                     types config\n├── wrangler.toml                     your Cloudflare worker config\n└── src\n    ├── _page-script-js-string.ts     generated by helper script\n    ├── index.ts                      runs reverse proxy\n    ├── page-script.js                your custom JS page script\n    └── site-config.ts                your domain and website config\n```\n\nGo into this directory and run\n\n```sh\nnpm install\n```\n\n\u003cbr/\u003e\n\n### Configure your domain\n\n---\n\nMake sure that wrangler is authenticated with your Cloudflare account\n\n```sh\nnpx wrangler login\n```\n\n1. Edit `wrangler.toml` and make sure that the `name` field matches your worker name in Cloudflare\n2. Edit `site-config.ts` and set all the necessary options: domain, metadata, slugs, subdomain redirects, etc. All settings should be self explanatory, I hope 😊\n\n```ts filename=\"src/site-config.ts\"\nimport { NoteHostSiteConfig, googleTag } from 'notehost'\nimport { PAGE_SCRIPT_JS_STRING } from './_page-script-js-string'\n\n// Set this to your Google Tag ID from Google Analytics\nconst GOOGLE_TAG_ID = ''\n\nexport const SITE_CONFIG: NoteHostSiteConfig = {\n  domain: 'yourdomain.com',\n\n  // Metatags, optional\n  // For main page link preview\n  siteName: 'My Notion Website',\n  siteDescription: 'Build your own website with Notion. This is a demo site.',\n  siteImage: 'https://imagehosting.com/images/preview.jpg',\n\n  // URL to custom favicon.ico\n  siteIcon: 'https://imagehosting.com/images/favicon.ico',\n\n  // Social media links, optional\n  twitterHandle: '@mytwitter',\n\n  // Additional safety: avoid serving extraneous Notion content from your website\n  // Use the value from your Notion settings =\u003e Workspace =\u003e Settings =\u003e Domain\n  notionDomain: 'mydomain',\n\n  // Map slugs (short page names) to Notion page IDs\n  // Empty slug is your main page\n  slugToPage: {\n    '': 'NOTION_PAGE_ID',\n    about: 'NOTION_PAGE_ID',\n    contact: 'NOTION_PAGE_ID',\n    // Hint: you can use '/' in slug name to create subpages\n    'about/people': 'NOTION_PAGE_ID',\n  },\n\n  // Rewrite meta tags for specific pages\n  // Use the Notion page ID as the key\n  pageMetadata: {\n    'NOTION_PAGE_ID': {\n      title: 'My Custom Page Title',\n      description: 'My custom page description',\n      image: 'https://imagehosting.com/images/page_preview.jpg',\n      author: 'My Name',\n    },\n  },\n\n  // Subdomain redirects are optional\n  // But it is recommended to have one for www\n  subDomains: {\n    www: {\n      redirect: 'https://yourdomain.com',\n    },\n  },\n\n  // The 404 (not found) page is optional\n  // If you don't have one, the default 404 page will be used\n  fof: {\n    page: 'NOTION_PAGE_ID',\n    slug: '404', // default\n  },\n\n  // Google Font name, you can choose from https://fonts.google.com\n  googleFont: 'Roboto',\n\n  // Custom CSS/JS for head and body of a Notion page\n  customHeadCSS: `\n  .notion-topbar {\n    background: lightblue\n  }`,\n  customHeadJS: googleTag(GOOGLE_TAG_ID),\n  customBodyJS: PAGE_SCRIPT_JS_STRING,\n}\n```\n\n\u003cbr/\u003e\n\n### Deploy your website\n\n---\n\n```sh\nnpm run deploy\n```\n\n🎉 Enjoy your Notion website on your own domain! 🎉\n\n\u003e [!IMPORTANT]\n\u003e You need to run deploy every time you update `page-script.js` or `site-config.ts`.\n\n\u003cbr/\u003e\n\n### What is build-page-script-js-string.sh?\n\n---\n\nThe file `src/page-script.js` contains an example of a page script that you can run on your Notion pages.\nThis example script removes tooltips from images and hides optional properties in database cards.\n\n🔥 This script is run in the web browser! 🔥\n\nYou can use `document`, `window` and all the functionality of a web browser to control the contents and behavior of your Notion pages.\nAlso, because this is a JS file, you can edit it in your code editor with syntax highlighting and intellisense!\n\nTo 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`.\n\nSo just add your JS magic to `page-script.js`, run deploy and everything else will happen automagically 😎\n\n\u003cbr/\u003e\n\n### Logs\n\n---\n\nYou can see realtime logs from your website by running\n\n```sh\nnpm run logs\n```\n\n\u003cbr/\u003e\n\n### Demo\n\n---\n\nhttps://www.velsa.net\n\n\u003cbr/\u003e\n\n### Acknowledgments\n\n---\n\nBased on [Fruition](https://fruitionsite.com), which is no longer maintained 😕\n\nLots of thanks to [@DudeThatsErin](https://github.com/DudeThatsErin) and her [code snippet](https://github.com/stephenou/fruitionsite/issues/258#issue-1929516345).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvelsa%2Fnotehost","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvelsa%2Fnotehost","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvelsa%2Fnotehost/lists"}