d0zingcat/nextjs-notion-starter-kit
1
0
Fork 0
mirror of https://github.com/d0zingcat/nextjs-notion-starter-kit.git synced 2026-05-13 23:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

updating readme

Browse Source
This commit is contained in:
Travis Fischer
2021-01-19 23:20:02 -05:00
parent 0f4d066b96
commit 15d7efd3d2
1 changed files with 24 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
readme.md
View File

@@ -4,7 +4,9 @@
# Next.js Notion Site
> A perfect starter kit for building beautiful Next.js websites that are backed by Notion.
> The perfect starter kit for building beautiful Next.js websites that are backed by Notion content.
[![Build Status](https://travis-ci.com/tansitive-bullshit/notion-blog.svg?branch=master)](https://travis-ci.com/tansitive-bullshit/notion-blog) [![Prettier Code Formatting](https://img.shields.io/badge/code_style-prettier-brightgreen.svg)](https://prettier.io)
## Intro
@@ -16,9 +18,9 @@ The site is then deployed to [Vercel](http://vercel.com).
## Features
- Setup only takes a few minutes ([single config file](./site.config.js)!) 💪
- Next.js / TS / React / Notion -- what more could you want?
- Robust support for almost all Notion content via [react-notion-x](https://github.com/NotionX/react-notion-x)
- Easy to configure via [site.config.js](./site.config.js)
- Robust support for Notion content via [react-notion-x](https://github.com/NotionX/react-notion-x)
- Excellent page speeds
- Sexy LQIP image previews
- Embedded GitHub comments
@@ -26,13 +28,19 @@ The site is then deployed to [Vercel](http://vercel.com).
- Automatic pretty URL paths
- Responsive for desktop / tablet / mobile
## Config
## Setup
!> All config is defined in [site.config.js](./site.config.js).
You should be able to fork this repo, change a few values in [site.config.js](./site.config.js), and be good to go in a few minutes! 💪
1. Fork / clone this repo
2. Change a few values in [site.config.js](./site.config.js)
3. `npm install`
4. `npm run dev` to test locally
5. `run run deploy` to deploy to vercel 💪
I tried to configuration as easy as possible -- all you really need to change to get started is `rootNotionPageId`.
I tried to make configuration as easy as possible -- all you really need to change to get started is edit `rootNotionPageId`.
You'll want to make your root Notion page **public** and then copy the link to your clipboard. Now just extract the last part of the URL that looks like `d1b5dcf8b9ff425b8aef5ce6f0730202` as your root Notion page iD.
I recommend setting up a collection on your home page (I used an inline gallery [here](https://notion.so/78fc5a4b88d74b0e824e29407e9f1ec1)) that contains all of your articles / projects / content. There are no structural constraints on your Notion workspace, however, so feel free to add content as you would normally in Notion. There are a few parts of the code with logic to only show comments on blog post pages (collection item detail pages).
@@ -116,14 +124,22 @@ Note that you shouldn't have to do anything extra to enable this feature as long
## Screenshots
### Mobile Homepage
### Mobile Home Page
<img alt="Mobile homepage" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F8ee728ab-d77e-411b-ab37-ce71b25dddfb%252Fhome-mobile-opt.jpg%3Ftable%3Dblock%26id%3Dbb5cb99f-f3fe-4060-8c42-05ff80c26f38%26cache%3Dv2" width="300">
<img alt="Mobile Home Page" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F8ee728ab-d77e-411b-ab37-ce71b25dddfb%252Fhome-mobile-opt.jpg%3Ftable%3Dblock%26id%3Dbb5cb99f-f3fe-4060-8c42-05ff80c26f38%26cache%3Dv2" width="300">
### Mobile Article Page
<img alt="Mobile Article Page" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F6c05a0f9-59a0-4322-bef9-3f08fe4efc6a%252Farticle-mobile-opt.jpg%3Ftable%3Dblock%26id%3Da1eb2263-fdf1-4d51-a3d4-8a02cb32bbba%26cache%3Dv2" width="300">
### Desktop Home Page
<img alt="Desktop Home Page" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F657b2c1b-c548-4a05-b6b7-09c6fe2f65b0%252Fhome-desktop-opt.jpg%3Ftable%3Dblock%26id%3D97f445e8-2da1-41cd-996a-5ad0e73a1d79%26cache%3Dv2" width="600">
### Desktop Article Page
<img alt="Desktop Article Page" src="https://ssfy.io/https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%253A%252F%252Fs3-us-west-2.amazonaws.com%252Fsecure.notion-static.com%252F236cc4f2-4a85-4eb6-8f6a-4b835ccf63dd%252Farticle-desktop-opt.jpg%3Ftable%3Dblock%26id%3D16e03de2-0df7-4232-a129-e1666505c4d2%26cache%3Dv2" width="600">
## License
MIT © [Travis Fischer](https://transitivebullsh.it)