I recently found a new love of Notion for notes, planning, and brainstorming. I saw the API for it and thought “I wonder if I could use Notion as a Content Management System for a website…”
As you may know, Notion has built-in support for public pages by sharing a web address, but what if you want more flexibility, or even a custom domain? Here is how I easily created a website using Notion to manage content, and best of all: it’s free!
If you're not familiar with Notion, it's an extremely versatile—and free for personal use—software for creating notes, table, to-do lists, documentation, and pretty much anything else you need. It's available as an app for your phone, computer, or on the web. I've really been loving it for planning my day, and more recently to create my new personal website.
Requirements
Node.js & NPM
To get started you will need Node and NPM installed on your computer.
Follow the instructions here to get set up with both:
Downloading and Installing Node.js and NPM
Vercel
You will need a Vercel account to host and deploy the website. Create one here (it’s free for personal projects):
Create a Vercel Account
You will also need the Vercel CLI installed globally:
npm i -g vercel
Git is also recommended to clone GitHub repositories, but not necessarily required.
Our Solution
Next.js Notion Starter Kit
We will be creating this site using Next.js Notion Starter Kit, created by Travis Fischer. This convenient package uses Vercel, Next.js, and React to retrieve and display the content from Notion.
You can see an example of the end result at the author's personal site or at my example site.
The site created with this tool is extremely fast—the author's personal site scores 99 for PageSpeed Insights on desktop and only slightly less on mobile.
Install & Config
Pre-Install
Before we begin, it may be helpful to duplicate the following Notion page to have some content to preview and explore features:
Notion Starter Template
Make sure the Notion page is shared to the web and copy the address.
Setup
To get started we’ll want to clone or download the repository and enter it:
git clone https://github.com/transitive-bullshit/nextjs-notion-starter-kit.git notion-website
cd notion-website
Open the file site.config.ts in your text editor and edit the rootNotionPageId property on line 5, replacing the existing string with your page hash. You can find this at the end of your Notion url; it will look something like this: 7875426197cf461698809def95960ebf.
Then in the project directory run the following commands:
npm install
npm run dev
You will then be able to preview your site locally at http://localhost:3000.
Deploy
Feel free to edit the site styles and customize everything to your liking. Once you are happy with your site, run npm run deploy and follow the instructions from Vercel. Once the deployment finishes, it will output a live URL where you can visit your new site! You can also add a custom domain to your project in the Vercel project dashboard.
Other Solutions
Before landing on this tool I looked at quite a few other services, but I found them to be somewhat limited and they all require a monthly fee for any amount of customization.
Potion is easy and customizable, responds instantly when updates are made in Notion, and generates static sites for great performance. It starts at 8 USD per month for one site.
Super is similar to Potion, but doesn't have the no-code style customizer for editing themes. It's fast, easy, and costs 12 USD per month for one site.
Popsy has a free version, but custom domains and all additional features require a premium account, which is 8 USD per month for one site.
Summary
There are quite a few more easy customizations you can make to the project, such as changing the navigation style and adding custom URLs. For more on that, visit the GitHub repo. I also removed the repo badge in the top right corner.
I found that Notion as a CMS is best suited for blogs and personal websites, but the amount of customization this tool allows means you can create any type of website.
I hope this was helpful in getting started with setting up a free website using Notion as a Content Management System—follow me for more content like this!
