Built with Next.js Notion Starter Kit, deployed on Vercel.
All config is defined in site.config.ts.
This project requires a recent version of Node.js (we recommend >= 16).
- Fork / clone this repo
- Change a few values in site.config.ts
npm installnpm run devto test locally
If the local Vercel CLI is not logged-in you need to loggin first by
vercel login- Select Continue with Email
- Enter email: [email protected]
- Finish login by clicking the verification link sent to our email
Then simply run npm run deploy, if asked "Link to existing project?" answer yes and choose "innowing-homepage". The change the deployment to production, visit vercel.com
Only need to edit the rootNotionPageId in site.config.ts. All page under the root page will be visible on the website.
rootNotionPageId for InnoWing GenAI Homepage is: InnoWing-GenAI-Homepage-12da31d3d5b58026bf2bce49f50d00be
Simply go to our Root Notion Page and edit there.
You may also want the url path name tobe different of the page name, see below for instruction.
The app defaults to slightly different URL paths in dev vs prod (though pasting any dev pathname into prod will work and vice-versa).
In development, it will use /nextjs-notion-blog-d1b5dcf8b9ff425b8aef5ce6f0730202 which is a slugified version of the page's title suffixed with its Notion ID. I've found that it's really useful to always have the Notion Page ID front and center during local development.
In production, it will use /nextjs-notion-blog which is a bit nicer as it gets rid of the extra ID clutter.
If you wish to override a url path modify pageUrlOverrides in site.config.ts
All CSS styles that customize Notion content are located in styles/notion.css. They mainly target global CSS classes exported by react-notion-x styles.css.
Every notion block gets its own unique classname, so you can target individual blocks like this:
.notion-block-260baa77f1e1428b97fb14ac99c7c385 {
display: none;
}