Set up a free Nextjs blog with Notion and Tailwind in 10 min
Tags: notion, nextjs, vercel, tailwindcss
Published: 2022-09-06 18:00:06

---
title: Set up a free  Nextjs blog with Notion and Tailwind in 10 min
published: true
description: Starter Notion blog for Nextjs with Tailwind
tags: notion, nextjs, vercel, tailwind
# cover_image: https://nextjs-notion-blog-starter.vercel.app/preview/1.jpg
# Use a ratio of 100:42 for best results.
---


[Github repository](https://github.com/tuanphungcz/nextjs-notion-blog-starter) - Github repository with the codebase
[Default demo blog](https://nextjs-notion-blog-starter.vercel.app/) - Deployed from main branch
[My personal site](https://phung.io/) - The source code that I use to power my website

What features are in the blog starter:

## ✨ Features
- ✅ Setup takes only a few minutes ([single file config](https://github.com/tuanphungcz/nextjs-notion-blog-starter/blob/main/data/siteData.ts)) 💪
- ✅ Newsletter subscription via [Convertkit API](https://github.com/tuanphungcz/nextjs-notion-blog-starter/blob/main/pages/api/subscribe-convertkit.tsx) 
- ✅ Simple analytics with [Umami](https://github.com/umami-software/umami)

- ✅ Automatic OG social images with [Tailwind template](https://github.com/tuanphungcz/nextjs-notion-blog-starter/blob/main/components/OgTemplate.tsx)
- ✅ Automatic pretty URLs
- ✅ Excellent page speed
- ✅ Optimized for Next.js and Vercel

## Getting started

Whenever I’m writing a new blog, like this one, I’m using notion for drafting. Wouldn’t it be cool just to be able to switch the tag in notion to published and have it live on your blog? 

This will be a tutorial on how you can create your own blog powered by Notion, Nextjs, and Tailwind.

## Notion setup

The first step would be to create an API key. You can follow the [Notions Getting Started Guide](https://developers.notion.com/docs/getting-started) where we will able to generate a new API key, which we will need for the `env` file as `NOTION_SECRET`

![Untitled](https://i.postimg.cc/prgfLNgp/Untitled.png)

For posting new blog articles, I already made a [read template](https://www.notion.so/6a05e6e596ac4bc6b591734f5c3d9850), so we can simply duplicate it and start writing articles.


![Image description](https://i.postimg.cc/3JvjbRvp/Untitled-1.png)



Once we cloned the blog template, we need `DATABASE_ID` which can be taken from the URL. It is the id after `xxx.notion.site/`

![Untitled](https://i.postimg.cc/J0y387Yf/Untitled-2.png)

### Forking the codebase

[Click here](https://github.com/tuanphungcz/nextjs-notion-blog-starter/fork) to fork the code base and pull the repository

```bash
npm install && npm run
```

The first time you run the blog, you will get an error of missing API key, that’s because we haven't updated the `.env` file.

![Untitled](https://i.postimg.cc/QdZgL3Qz/Untitled-3.png)

The last thing we need to do to make the blog work is to rename `.env.example` to `env` and update the variables

```bash
# Notion secret integration
NOTION_SECRET=
# Database id from cloned template
BLOG_DATABASE_ID=

# Convertkit subscription (Optional)
NEXT_PUBLIC_CONVERTKIT_FORM_ID=
NEXT_PUBLIC_CONVERTKIT_API_KEY=

# Umami analytics (Optional)
UMAMI_ID=
```

If we did everything right, we should be able to see the working blog 🎉
```
# Convertkit subscription (Optional)
NEXT_PUBLIC_CONVERTKIT_FORM_ID=
NEXT_PUBLIC_CONVERTKIT_API_KEY=

# Umami analytics (Optional)
UMAMI_ID=
If we did everything right, we should be able to see the working blog 🎉
```


A visual depiction of what is being written about

![image](https://i.postimg.cc/nhK4pPTh/Untitled-4.png)

## Thanks for reading

Let me know in the comments section how you feel about this generators series. If you love it, you know what to do! Share it with your friends and colleagues.


🌟 Stars on [Github](https://github.com/tuanphungcz/nextjs-notion-blog-starter) and feedback is appreciated! 👍

If you want me to cover some topics in the next post, DM me twitter @tuanphungcz, or if you have any suggestions, feel free to comment below.

See ya next time and keep on hacking ✌