Skip to content

gabrielreisn/website

Repository files navigation

Next Duo

This project is an adaptation of Eleventy duo since the project didn't get many updates from the previous years, and Forestry CMS was discontinued

Features

  1. SEO metadata and Open Graph tags
  2. Sitemap
  3. robots.txt
  4. 404 page
  5. Tags support
  6. Typescript
  7. Notion CMS integration

Getting Started

First, run the development server:

pnpm dev

Open https://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

Notion CMS integration

Most of the process was based on this article and the required part for the CMS integration will be resumed below:

  1. Create a new Notion Database with the follow format
    • Title: Text
    • Slug: Text
    • Date: Date
    • Tags: Multi-select
    • Published: Boolean
    • Description: Rich-text

Notion Database fields demo

1.Additionally, you need the ID of the Notion database. It acts as an identifier for the database you want to connect to.

Retrieve it from the database URL by copying the part corresponding to the database_id in the example below.

`https://www.notion.so/{workspace_name}/{database_id}?v={view_id}``

  1. Store the database_id in your .env file DATABASE_ID=
  2. Create a new Notion integration with basic info and private access
  3. Copy the integration token to your .env file NOTION_TOKEN=
  4. Connect your integration to the database you created follow here

Notion demo gif

  1. After that, you can start creating pages on your Notion database and they will be automatically fetched and rendered on your website

Page demo

Deployment

The project was hosted on Vercel as a personal choice, but any other hosting services that supports Nextjs features such as time-based-revalidation should work, such as Netlify.

  • Create a new project on your chosen hosting platform
  • Set the build command to pnpm build
  • Set the output directory to .next

Check out my example: https://gabrielreis.dev

License

This project is licensed under the MIT License.

Isn't Jamstack beautiful?

Todo

  1. google analytics
  2. json-ld schemas
  3. Turn the project into a template
  4. convert static pages to MDX