# Create a free website using Notion to Manage Content

I recently found a new love of [Notion](https://www.notion.so) 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](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

### Vercel

You will need a [Vercel](https://vercel.com) account to host and deploy the website. Create one here (it’s free for personal projects):  
[Create a Vercel Account](https://vercel.com/signup)

You will also need the [Vercel CLI](https://vercel.com/cli) installed globally:

```bash
npm i -g vercel
```

[Git](https://git-scm.com/downloads) 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](https://github.com/transitive-bullshit/nextjs-notion-starter-kit), created by [Travis Fischer](https://github.com/transitive-bullshit). 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](https://transitivebullsh.it) or at [my example site](https://notion-travisaw-trvswgnr.vercel.app).

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.

![PageSpeed Insights for Next.js Notion Starter Kit](https://cdn.hashnode.com/res/hashnode/image/upload/v1653625545617/tlCTDcYH9.png align="center")

## 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](https://transitive-bs.notion.site/transitive-bs/Next-js-Notion-Starter-Kit-Template-7875426197cf461698809def95960ebf)

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:

```bash
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 `.

![Edit this line](https://cdn.hashnode.com/res/hashnode/image/upload/v1653626128083/C23IBfs2S.png align="center")

Then in the project directory run the following commands:
```bash
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.so](https://potion.so)

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.so](https://super.so)

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.co](https://popsy.co)

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!