Noxion Blog

Why Next.js + Notion?

Last updated: September 05, 2021

Noxion is built on top of the powerful technology of Next.JS and the much-awaited APIs of Notion. To give life to the application, Tailwind CSS is used.

The reason for choosing this stack is to simplify the way you create a blog.

You won't have to think about where to store and how to write your blog posts, the Notion apps can handle it for you. Whether you're on mobile, desktop, or even in the browser, you can create and update your Noxion blog.

3 Simple Steps to Get You Started

1. Create a Notion integration

Get started with creating your personal Notion integration by reading through their documentation.

https://developers.notion.com/docs

Make sure you copy the integration secret and the database ID of your workspace.

Once workspace is ready, update the columns in your Notion database to:

  • Title
  • Description

This will be used for SEO purposes.

2. Deploy to Vercel

Using this one-click deploy link, you'll see your blog live in less than 5 minutes.

https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Farjayosma%2Fnoxion&env=NOTION_DATABASE_ID,NOTION_SECRET_KEY&project-name=my-noxion-blog&repo-name=my-noxion-blog&demo-title=Noxion Blog&demo-description=Just another low-code tool for you to start blogging.&demo-url=https%3A%2F%2Fnoxion.vercel.app

Make sure you provide the values for your environment variables when you deploy.

3. Start writing

Inside Notion app, you can start writing your blog content. The content will be displayed when it will be accessed by your readers.

Dependency Documentation

Next.JS Documentation

Read more details here: https://nexjs.org/

Notion Developer Documentation

Notion's API integration allows for programmatic handling of an integrators' data.

Read more details here: https://developers.notion.com/

Tailwind CSS Documentation

With the utility-first approach of Tailwind, you can easily modify how your Noxion blog will look like.

Read more details here: https://tailwindcss.com/