A Next.js, Notion and Tailwind CSS starter blog template
This is an open-source starter blog template that is statically generated with Next.js, content powered by Notion and styled with Tailwind CSS.
Still a work in progress.
Live example hosted on Vercel: https://blog.luciovilla.com
Getting Started
- Clone this repo
git clone https://github.com/luciovilla/notion-nextjs-blog.git
- Install its dependencies
npm install
- Copy or rename the
.env.example
file to.env.local
- Personalize the page meta data in
Container.js
Creating Your Notion Pages Table
- Create a blank page in Notion
- Create a table on that page.
- Add the following columns to the table:
Page
(type: title): this the blog post's headline and meta title.Slug
(text): this is the blog post's URL slug.Date
(date): the display date and meta published_time property.Description
(text): this is the preview text on the homepage and the meta description property.
View this sample template table in Notion.
Getting Database ID and Notion Token
- Create a Notion Integration.
- Copy and paste the Integration Token in the
.env.local
file:NOTION_TOKEN=____
- On the Notion page, click the "Share" button in the top right and share the database with the Notion Integration you just created
- In a browser, go to the Notion page and grab the Database ID from the URL. Its the part of the URL after your workspace name and the slash and before the question mark. The ID is 32 characters long, containing numbers and letters.
- Paste your Database ID in the
.env.local
file:NOTION_DATABASE_ID=___
Creating Blog Posts
- In Notion click new on the table to add a new row
- Fill in the Page title, Slug, Date and Description
- Keep the Description text short, as it will be the text that shows up on the homepage as the post's preview text.
Running Locally
Run npm run dev
Deploy your own
Deploy your own Notion blog with Vercel.
Credits
Thankful for the following people as I was inspired by their code: