Nuxt blog with Notion

The project is mainly based on nuxt-3-notion-blog. But I added some features like the sitemap, category fetching, dark/light mode, and some other minor changes.

Stack

This project is a blog built with Nuxt.js for server-side render website and Notion API as the database.

Basic environment variables setup

# .env
NOTION_API_TOKEN=your_notion_integration_token
NOTION_POST_DATABASE=your_notion_posts_database

// nuxt.config.js
public: {
    BLOG_NAME: "YJack's blog",
    GITHUB_PAGE: '<your_github_page>',
    LINKEDIN_PAGE: '<your_linkedin_page>',
    NOTION_ABOUT_PAGE: 'page_by_slug_17c6e514c9a549659e7775e5d17546b5',
    NOTION_ABOUT_PAGE_BLOCK: '4bc3731306444831b824c95c7a6ad868'
},

Notion database template

Title	Description	Category	Author	Date	Visible
type: Key	type: Text	type: Multi-select	type: Person	type: Date	type: Checkbox

Build with Sitemap script

There is a file in scripts/generate-sitemap.js will generate a sitemap.xml file in the root of the project. This file is used by search engines to index your site.

npm run build

Additional setup

// About page setup
public: {
    // ...
    NOTION_ABOUT_PAGE: 'page_by_slug_17c6e514c9a549659e7775e5d17546b5',
    NOTION_ABOUT_PAGE_BLOCK: '4bc3731306444831b824c95c7a6ad868',
},

// DISQUS Comment setup
public: {
    // ...
    DISQUS_PROJECT_ID: 'huan-3',
},

Todo

• Add /about Page for About
• Add a comment section
• Cache the Notion API data on vercel service