For when it doesn't really need to be complicated, fancy, or fragile.
Much like Fruition, you need to configure a CloudFlare worker to catch all traffic at your domain.
TARGET_HOST = https://your_subdomain.notion.site/ROOT_PATH = Page-Slug-166e1663250e80e9a0f4f1721b0c09b9| // Base public Notion site. Trailing "/" expected. | |
| const TARGET_HOST = '<YOUR-NOTION-SITE>' | |
| // Optional slug for site root redirect. | |
| const ROOT_PATH = '<YOUR-ROOT-PAGE-SLUG>' | |
| // Injected BEFORE <html> tag opens. | |
| const INJECTED_HTML = ` | |
| <style> | |
| </style> | |
| ` | |
| async function proxy(request, env, ctx) { | |
| const url = new URL(request.url) | |
| const reqUrlHref = url.href | |
| const reqUrlOrigin = url.origin | |
| const parsedPath = reqUrlHref.substring(reqUrlOrigin.length + 1) | |
| if (parsedPath === '') { | |
| return Response.redirect(reqUrlHref + ROOT_PATH) | |
| } else if (parsedPath.startsWith('api/v3/getPublicPageData')) { // Fix to account for "Continue to external site" error. | |
| return new Response() | |
| } | |
| const proxyUrl = TARGET_HOST + parsedPath | |
| let res = await fetch(proxyUrl, { | |
| headers: { | |
| 'redirects': 'follow' | |
| }, | |
| ...(await request.clone()) | |
| }) | |
| if (res.headers.get('Content-Type').startsWith('text/html')) { | |
| const html = await res.text() | |
| // Optionally inject additional styling. | |
| res = new Response(`${INJECTED_HTML}${html}`, res) | |
| // Optionally setting CSP to maximum permissiveness helps to maintain flexibility as Notion changes. | |
| // Enable at your own risk. | |
| res.headers.set('Content-Security-Policy', "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';") | |
| } | |
| return res; | |
| } | |
| export default { | |
| async fetch(request, env, ctx) { | |
| return proxy(request, env, ctx) | |
| } | |
| } |