No(tion)Blog

Sol's expriment of Huerta Creativa :)

A Next.js application that connects to Notion to display blog posts.

Notion Integration Setup

1. Go to https://www.notion.so/my-integrations
2. Click "New integration"
3. Give it a name and select the workspace
4. Copy the "Internal Integration Token"
5. Go to your Notion database page
6. Click "Share" in the top right
7. Click "Invite" and add your integration

Set credentials

Create a .env.local file in the root directory with your Notion credentials:

NOTION_TOKEN=your_notion_integration_token_here
NOTION_DB_ID=your_notion_database_id_here

Set up your Notion database:

Option A: Use the initialization script

chmod +x scripts/init-db.sh
./scripts/init-db.sh --name "My Blog Database" --parent-id "your-parent-page-id"

This will create a database via the Notion API with the proper structure. See scripts/README.md for detailed documentation.

Option B: Manual setup

• Create a new database in Notion
• Add the following properties to your database:
  • Page (Title) - The title of your blog post
  • Slug (Text) - URL-friendly identifier for the post
  • Date (Date) - Publication date
  • Status (Select) - Publication status with options "Published" or "Draft"
  • Tags (Multi-select) - Categories or tags for organizing posts
  • Author (People) - The author(s) of the post
• Share the database with your Notion integration
• Copy the database ID from the URL

---

Local Setup

1. Install dependencies:

npm install

2. Run the development server:

npm run dev

3. Open http://localhost:3000 in your browser

Netlify Deployment

1. Connect your repository to Netlify
2. Set build settings in Netlify:
   • Build command: npm run build
   • Publish directory: .next
   • Functions directory: netlify/functions
3. Add environment variables in Netlify dashboard:
   • NOTION_TOKEN: Your Notion integration token
   • NOTION_DB_ID: Your Notion database ID
4. Deploy - Netlify will automatically build and deploy your site

The app uses Netlify Functions for the API endpoint, so it will work properly on Netlify's platform.

Customization

Homepage Content (data.ts)

The data.ts file allows you to customize your homepage. Update these values to match your blog's personality:

export const localData = {
    head: {
        title: "*ੈ✩ Your Blog Title",
        description: "Your blog description for SEO"
    },
    main: {
        title: "Your Main Title",
        description: "Your subtitle or tagline"
    }
}

Tech Stack

• Next.js 14
• React 18
• TypeScript
• Tailwind CSS
• Notion API
• Netlify Functions