🌎

Create website with Notion

Tags
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.
SASS - Monthly subscription
Free options:

How to implement Notion?

1. Fork the repo

Visit this git repo and fork it

2. Modify site.config.js file

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.
notion image
 

3. Publish the main Notion page

Make sure your notion page is shared on the web.
notion image

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.
notion image
 

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.
notion image

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.

Let's work together on your next project

👉🏻 hello@milangladis.com