Bartosz Jarocki - Personal website built using Next.js and Notion as headless CMS
This is my personal website built using
Running locally
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:
id
created_time
last_edited_time
cover
hashtags
title
description
slug
- used as a notes slug for example in/notes/hello-world
the slug would behello-world
published
- used to filter unpublished notes from available notes listpublishedAt
inProgress
- used to displayWork in progress
badge 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/BartoszJarocki/web-jarocki-me
cd web-jarocki-me
yarn
yarn dev
OG images generation
Application generates Open Graph images automatically using lambda functions and Puppetter
Credits
Design heavily inspired by Tailwind UI Spotlight template