I use Notion daily and I’ve been always thinking of how to use it more often for different use cases. Releasing the Notion API was a game changer and simple notepad became a professional tool for developers, but also easy to use database for no-coders.
Notion as CMS
There’s no easier tool for writing articles than your notepad. Notion is mine and I would like to use it for everything, but also as a content management system for my website. Instead of using overkills like WordPress or building another custom portfolio page, I decided to go with the simplest available solution. The only important part of the website is the content anyway!
🤯
Content like text, image, video or 3D is more than design, typography or colours…
Content is the king queen! It’s not the design, icons, typography or colours. All of these components are present just to improve usability and provide an easier way to get the right information.
How to run the web with Notion?
The easiest solution is using paid services, but the hacker inside me wouldn’t allow me to not try a custom open source code. It’s not that complex, but you have to have some minor knowledge about Node.js and git.
Edit the Notion page ID and all your usernames that are used in the footer’s link. You can do it directly in Github so you don’t need to run your local Node.js server if you don’t know what to do.
3. Publish the main Notion page
Make sure your notion page is shared on the web.
4. Import your git repository to Vercel
Create an account in Vercel by using Github and import your notion repository. The build will run automatically and you’ll get the link to your new website in 1-2mins.
5. Set up a custom domain
You have to set up your CNAME and A DNS records in your domain settings, but Vercel will help you with that.
6. Set up Google Analytics
in the /components/PageHead.tsx file, replace G-53XJKCMZDH tag with your one.
7. Change default dark mode to light one
It’s personal preference, but I changed the dark theme to a light one in public/noflash.js file.
var preferDarkQuery = '(prefers-color-scheme: dark)’
👇
var preferDarkQuery = '(prefers-color-scheme: light)’
/public/noflash.js:17
8. Edit styles
If you want to modify some styles, change CSS properties in /components/styles.module.css and /styles/notion.css files.
9. And that’s it 🚀
Star the GitHub repos and show some love to hackers that allowed us to run the Notion on our custom domains 🙂 Plus, let me know if this article was useful and if you needed more information.
