Notion-blog-nextjs
A template to start your own blog. This template use Notion as CMS.
Live example
I've created my blog with this repository, you can check it:
URL: 9gustin.com
Repo: @9gustin/personal-blog
Usage
1. Create repo
In the head of repo(in github) you can use the "Use this template", that option creates you a repo with this repo data, it's like a fork. Also you can go to this direction: Use this template.
After that you will have the repository an go to edit that.
2. Put your data
Now you have to fill it with your information, like name, theme, title of page, can edit that in Github or can clone it, it's not much information to edit.
You have to edit one file(in your repo), /config/user.ts.
In there you have to customize the fields:
- title and description: this are visual and are showed in header of pages, the type of both are ReactNode to use links, bold or that you want.
- theme: here you can choose one of available themes, listed in User type declaration. ('react' | 'angular' | 'vue' | 'js' | 'svelte' | null). Put null if you want to use default theme.
- mainTitle and pageTitle: For last, that field are for HTML Head title, in home are showed "mainTitle+pageTitle" and in article view are showed "articleName+pageTitle"
3. Create notion database
After that you have to create a notion database, i recommend table, but feel free to choose any in the database section:
In this database we put our articles, like that
4. Create notion integration
You have to create a Notion integration, this blog use the Notion API. Go to Notion/my-integrations, and create a new one pointing to your workspace. After you created you can get the integration token, save that to deploy or run the project.
IMPORTANT: Permissions
Check this part of Notion API documentation, you have to share database with your integration. And that explain how to get my database id.
5. Run / Deploy
For last, create a .env file like this example and add your database id and your integration token. And now you can run the project like any Next project, npm run dev(with previous npm install). The same to deploy, take in count the env variables.
Customization
Once you have the repo running feel free to change or add anything you want, themes, components.
Known issues
- Typescript: I add typescript but not in all files, i would change this progressively.
- Language: I will work in support of more than one languages
- SEO: I not apply anything about it
I will work on that soon, but if you want feel free to make a PR with a functionality of these or something that occurs to you