diff --git a/readme.md b/readme.md index 8002bf9..adf72a3 100644 --- a/readme.md +++ b/readme.md @@ -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 -Mobile homepage +Mobile Home Page ### Mobile Article Page Mobile Article Page +### Desktop Home Page + +Desktop Home Page + +### Desktop Article Page + +Desktop Article Page + ## License MIT © [Travis Fischer](https://transitivebullsh.it)