https://www.notion.so/icons/notion_gray.svgHow to build your own Notion powered-blog

Loading

So you want to host your own blog like this one? While it may sound scary, I assure you it’s super simple, fast and very inexpensive (free, in fact)!

Overall, this tutorial can be broken down into three steps :

  1. Create a Notion database in the right format
  2. Get a Notion API token and the database ID
  3. Host the blog with Vercel

Let’s take a look at each step.


Creating the Notion database

To get started, go to the Notion interface, where you can create a new page and a new database (call it what you like).

For now, it’s important to use the same column names and datatypes as I do. You can change this later by modifying the code.

What is the purpose of each column :

  • Page: A Notion page containing the article. The page name will be the article title.
  • Slug: The path to the article on your blog (will be displayed in the url only)
  • Published: Whether the article is published and visible on the blog or not
  • Date: The article creation date
  • Authors: People who wrote the article
  • PreviewText: Short paragraph to introduce the article. Will be displayed in the article list but not on the article page.

Get a token and a database ID

Get a Notion API token

A token is like a key that enables a program to access an API (and thus make requests to Notion in this case). Without this token system, anyone could access your Notion pages, even private ones!


To get your own Notion API token, you will need to follow these steps:

  1. Go to https://www.notion.so/my-integrations as a logged-in Notion user
  2. Tap "New Integration", name it and choose a workspace for the integration
  3. This project only needs the “Read content” capability !
    1. It never updates/deletes your Notion content anyway.
    2. It cannot yet read any of your content (even with "Read content" access). It can only read pages/databases you explicitly share with it later.
  4. Choose “No user information” as the blog doesn’t require an account anyway 😇
  5. Tap Create/Submit
  6. Choose “Internal Integration” (should be already selected)
  7. Copy the Token 👌

Now, an important step is to link your token to your database, so that it can give the blog read access to your articles. To do this, click on the three little dots at the top right of the page where you've created your database, hover over "Connect to" and select the token you've just created.


Get a Notion Database ID

Getting your Notion database ID is an equally straightforward process:

  1. Open the Notion page that contains your database
  2. Look at the URL. The database ID is the string of characters that appears after https://www.notion.so/ and before the ?v (if present). Do not include the hyphens in your ID.
  3. Copy this ID, and you're all set!

Host the blog on Vercel

To host this project, the easiest way is to use Vercel, a free service that allows you to configure the project without typing any commands!


💡
Next.js is developed by the Vercel team, so everything is done to ensure that the two work very well together !

This final step is simple: all you need to do is... click a button. Yes, that's it!

Click on the button below and let the site guide you!

Deploy with Vercel

Conclusion

If you've followed along with the steps outlined above, your Notion-powered blog should now be up and running smoothly. By creating a Notion database, obtaining an API token and database ID, and then hosting the blog on Vercel, you've successfully set up a platform to share your content with the world.

If you encounter any issues or have any questions along the way, don't hesitate to open an issue on Github.

Happy blogging!

← Go home