Skip to content
/ blog Public

🍳 Zero-cost blog implements with Notion and Cloudflare Pages.

Notifications You must be signed in to change notification settings

ycjcl868/blog

Folders and files

NameName
Last commit message
Last commit date

Latest commit

1149cb7 Β· Mar 26, 2025
Apr 4, 2022
Mar 26, 2025
Aug 18, 2024
Aug 18, 2024
Mar 2, 2025
Aug 18, 2024
Mar 2, 2025
Aug 11, 2024
Mar 2, 2025
Nov 11, 2021
Mar 2, 2025
Mar 2, 2025
Aug 18, 2024
Aug 18, 2024
Nov 11, 2021
Aug 18, 2024
Mar 26, 2025
Mar 26, 2025
Aug 10, 2024
Aug 18, 2024
Aug 10, 2024
Mar 2, 2025
Mar 2, 2025
Mar 2, 2025

Repository files navigation

πŸ“ Notion Blog - A Modern Zero-Cost Blogging System with Real-time Updates

δΈ­ζ–‡ | English

Cloudflare Pages Remix Framework

Built with Remix and Notion, deployed on Cloudflare Pages using Edge Functions for a cost-free, real-time updated blog site.

πŸ”₯ Features

  • Create blogs directly from your Notion pages with real-time content updates
  • Smart caching ensures fast page loads while auto-updating content in the background
  • Built with modern tech stack using Remix
  • Zero-cost deployment on Cloudflare Pages
  • Clean and elegant design powered by TailwindCSS
  • Category tags and search functionality
  • RSS Feed support
  • Light/Dark theme toggle
  • Internationalization support with runtime translation using large language models
cache.mp4

πŸš€ Performance

PageSpeed Insights

πŸ“¦ Installation

Clone the repository to your local machine:

git clone https://github.com/ycjcl868/blog

Install dependencies using pnpm:

pnpm i

Generate Notion Database

Duplicate this Notion template and share the page to generate a public link.

The PAGE_ID can be found in the URL format: https://www.notion.so/{workspace_name}/{page_id}(typically the last 32 characters)

πŸ”¨ Local Development

Create .dev.vars file with the following configuration:

NOTION_PAGE_ID=xxxx   # Notion page ID
NOTION_ACCESS_TOKEN=secret_xxx # Create integration token at: https://developers.notion.com/docs/create-a-notion-integration

Start the development server:

npm run start

Access the site at localhost:3000

πŸ“ Contribute

Feel free to submit an issue or pull request if you have any suggestions.

Star History

Star History Chart