Host Notion on your own domain, with custom scripts & styling! (Not created or maintained by Notion.)
Last updated on May 8, see CHANGELOG.md. Pull requests welcome on Github!
Disclaimer: This is a very hacky method that could break at any time. Customize Notion at your own risk, and enjoy it while it still works!
- Remix this project!
- Open up the Glitch editor, click the dropdown in the top left corner, and rename your project!
- Open up server.js - this is where your configration goes.
- Change
MY_DOMAIN(server.js, line 18) to reflect your new project name (project-name.glitch.me). - In Notion, share your desired page with the public, and copy the page link.
- Paste your public page link into
START_PAGE(server.js, line 19) - Congrats! Your Notion but Cooler 🌈 page is now live!
In server.js, the INJECT_INTO_HEAD & INJECT_INTO_FOOT variables contain what gets injected into the HTML as the page loads.
- In
INJECT_INTO_HEAD, you can include stylesheets, analytics scripts, meta tags and more. - In
INJECT_INTO_HEAD, there is also a section for meta tags to control what previews appear when the page is shared on chat apps and socail media. Make it your own by adding a title, description, social card, and favicon for your Notion page! - In
INJECT_INTO_FOOT, you can include javascript and other HTML code: this include analytics scripts, live chats, Glitch project details, and more.
I've also included some blank selectors in public/style.css to help get you started!
Notion has a light mode (dark text on light bg) and a dark mode (light text on dark bg).
In the 5th/6th sections of public/style.css, you can edit the background colours of both modes to your liking.
Changing text colours consistently for the entire document is nearly impossible, however you can add text colours to individual items (like page titles).
(Note that color in CSS is spelled without a u, thanks America! 🇺🇸)
- Open up fonts.google.com and find a few fonts you like (for header, content, and monospace fonts).
- Notion uses 400/500/700 weight (normal/book/bold) fonts. Add fonts with these weights if possible.
- Copy your embed code that starts with
<link... - Paste your embed code into
INJECT_INTO_HEAD(server.js, line 26), replacing the existing line containing Google Fonts. - Update the top 4 sections of public/style.css with your desired fonts!
To add a custom domain on Glitch, you need to have 2 thanks from people. Alternatively, you can host this yourself!
- Follow these steps: glitch.com/help/custom-domain
- Change MY_DOMAIN variable to reflect your new domain (server.js, line 17)
- Wait up to 48 hours for changes to roll out
(PS If all you wanted to do was host Notion on a custom domain, without additional styling, you can clear the contents of public/style.css.)
- This is a very hacky way of doing things that could break at any time.
- You may be able to access the Notion login or home but you can't actually login.
- Inline database titles may not follow your font settings.
If you want inspiration, here are some styled Notion pages remixed from this project:
- Melody's Notion Page: notion.melody.dev / style.css
The original project can be found at glitch.com/~notion.
You can find me online at melody.dev or @pixelyunicorn.