Using Notion as a CMS

Using Notion as a CMS

2023-01-29Guide


Before I get into how you can create something like this yourself, let me explain why I decided to do this.

So, why notion?

Notion offers a ton of great writing tools. Especially after the launch of Notion AI. I can now be lazy and have an AI help me write blog posts. Another upside is that Notion is very convenient. If I find a cool thing I want to share, I am just an alt + tab, ctrl + t, notion ⏎ away from sharing it with the world.

But why use Solid and not something like React?

SolidJS shares similar syntax to React, but is very lightweight. It offers faster performance by ditching a virtual DOM, and does this while shipping less JavaScript. And lastly, it’s truly reactive. I think this and other truly reactive frameworks like Svelte are going to be the future of the web.

Ok, enough why’s, how?

I’ll break this down into a few steps. First, you need to setup the Notion database.

Setting up the Notion database.

To start, create a Notion account and on your notion dashboard, hit the + next to Private on the left navbar. Name it anything you want, and select Table as the type.

Then hit + New database on the Select data source popup.

Now, create the following columns:

  • Published (Checkbox)
  • Page (Title)
  • Slug (Text)
  • Date (Date)
  • Image (Text)
  • Tags (Multi-select)
  • Lastly, we need to get the database ID so the site can properly pull the data.

    Right click the page you just made on the left navbar and hit Copy Link. The database ID is everything after the last / and before the ?v=bla bla bla stuff.

    So for example, https://www.notion.so/derock/fdc7a169f6b74de7bf092b685e32552f?v=c94c863f767c40fa9728fadf37d0dfd4 the ID is fdc7a169f6b74de7bf092b685e32552f

    Getting the Notion API credentials

    On the left navbar, hit Settings & members, go over to Connections, and click the Develop or manage integrations link.

    Hit New integration and name it whatever. Give it only the Read content permission. Now copy the Internal Integration Token and save it somewhere safe.

    Lastly, we need to give the integration access to the blog database. Go back to your blog database, hit the three little dots on the top right, and under Connections, add your integration.

    Deploy the site.

    Click this cool link and log into or create a Vercel account. Make sure the Framework Preset is set to SolidStart.

    Under Environment Variables set the following:

  • NOTION_DATABASE_ID
  • NOTION_API_KEY
  • and then hit deploy! 🚀

    The end!

    You’re done! You’ve just deployed an amazing blog site.


    - Derock

    Version ae35f77