Anish Shah - Personal website built using Next.js and Notion as headless CMS (Original by Bartosz Jarocki)
This is my personal website I have forked and customized as per my needs. Originally built using
- Vercel Speed Insights
- Notion Column List and Column Support
- Notion Callout and Quote and Bookmark Type Support
- Lightbox Image Gallery Support
- Differentiate articles for local environments and Production Website articles via notion checkbox field.
- Web3Forms - Contact Me Page implementation
To run application locally few environment variables have to be defined (in .env.local):
NEXT_PUBLIC_URL- used to create absolute urls, for example canonical links and open graph imagesNOTION_TOKEN- used by Notion API client, nore info hereNOTION_DATABASE_ID- used to fetch notes/blog post list
There's a certain data format of Notion database that's needed by application. When fetching the database content, application expects the following properties to be configured in the database:
idcreated_timelast_edited_timecoverhashtagstitledescriptionslug- used as a notes slug for example in/notes/hello-worldthe slug would behello-worldpublished- used to filter unpublished notes from available notes listpublishedAtinProgress- used to displayWork in progressbadge on in the notes list
Here's how the database in Notion should look like:
After defining environment variables and your Notion database, run the application
git clone https://github.com/anish274/anish3d.com-f
cd anish3d.com-f
yarn
yarn devApplication generates Open Graph images automatically using lambda functions and Puppetter
Main page example
Blog post example
- Original Github Repo was created by Bartosz Jarocki
- Design heavily inspired by Tailwind UI Spotlight template
Last updated: 2024