Learn how to build a website that uses Notion as a Content Management System (CMS) with Replit Agent.
Head of Developer Relations
Notion is a powerful tool for organizing information, and it excels as a Content Management System (CMS). By integrating Notion with Replit, you can manage your website’s content—like blog posts, portfolio items, or product listings—directly from your Notion workspace.
Replit, powered by Replit Agent, handles the coding, hosting, and deployment, letting you go from idea to a live application quickly. Effective prompting is key to guiding Agent; for a comprehensive guide, see Efficient prompting with Replit AI and How to vibe code effectively.
This tutorial guides you through building a minimalistic blog that pulls its posts from a Notion table. You will:
Final result: A minimalistic blog powered by Notion
The tutorial will follow largely from the video above, but with some additional context and steps to help you understand the process.
To follow this tutorial, you’ll need:
Before prompting Agent, set up your content source in Notion. This involves thinking procedurally about what your blog needs, similar to planning a product.
Create a Notion integration
Creating a new integration in Notion
Configuring your Notion integration
Obtaining your Integration Secret
Create a new integration for each project to manage permissions granularly. This is a security best practice.
For more detailed instructions, refer to Notion’s official documentation on creating an integration.
You can directly access Notion’s integrations dashboard at notion.so/my-integrations.
Create a Notion page with a database
Title
(Text, default title property)Body
(Text, for main post content)Slug
(Text, for URL-friendly identifiers)PublishedDate
(Date, or use “Created time” / “Last edited time”)ReadingTime
(Text or Number, e.g., “5 min read”)Description
(Text, short summary for previews)Example Notion database setup for blog posts
Connect your integration to the page
Access the integration menu in Notion
Adding your integration to the Notion page
With Notion set up, let’s get Replit Agent to build our blog’s foundation. Plan before you prompt: a clear outline of features leads to more focused prompts.
Open Replit Agent
Navigate to the Replit homepage and open Agent.
Write your prompt
Provide Agent with a detailed prompt. Simplify your language, but be specific about requirements, constraints, and desired outputs. Here’s an example:
For more tips on writing effective prompts, see our guide on Efficient prompting with Replit AI.
You can also show Agent what you mean by providing a URL to scrape for initial styling or content ideas (e.g., your personal portfolio) by adding: Scrape the content of [URL] for initial design inspiration and placeholder text.
Agent will generate a plan. Review it to ensure it aligns with your expectations, then approve it. This is your first checkpoint in the AI-assisted building process.
Review the initial preview
Agent will then generate a visual preview. Check if the basic layout and styling are heading in the right direction. Refinements will come later.
Agent will likely need your Notion integration details to fetch data.
Add Secrets in Replit
Typically, you’ll need:
NOTION_API_KEY
: Your Internal Integration Secret from Step 1.NOTION_DATABASE_ID
: The ID of your Notion database.How to find your Notion Database ID:
https://www.notion.so/your-workspace/PAGE_TITLE-PAGE_ID?v=DATABASE_VIEW_ID
. The PAGE_ID
is often the database ID if the database is the page’s main element.https://www.notion.so/your-workspace/DATABASE_ID?v=VIEW_ID
contains the DATABASE_ID
before ?v=
.Go to the Secrets tool (🔒 icon) in your Replit Workspace. Add these:
NOTION_API_KEY
, Value: [Your_Notion_Integration_Secret]
NOTION_DATABASE_ID
, Value: [Your_Notion_Database_ID]
Adding your Notion secrets to Replit
Agent should automatically use these secrets and attempt to connect. The app will likely restart.
Building with AI is iterative. Expect errors or imperfections. This is where guiding the AI effectively—often called “vibe coding”—is key. For a deeper dive into this skill, check out our tutorial on How to vibe code effectively. Master context by providing only relevant information for each debugging step.
Keep the Console in your Replit Workspace open. It provides valuable error messages and logs.
Debugging your Notion app using the Replit Console
Here are common scenarios and how to address them by debugging methodically:
The app runs but doesn’t display posts. Console errors might mention “Could not find sort property with name ID created_time” or other column mismatches.
Agent might assume column names or properties (e.g., created_time
for sorting) that don’t exist or are named differently in your Notion database.
created_time
and you have PublishedDate
, it’s a mismatch.created_time
in Notion as a quick fix, you can later ask Agent: “Remove reliance on ‘created_time’, use ‘PublishedDate’ instead.” Remember to use Agent’s Checkpoints to save working states.Data appears, but incorrectly (e.g., reading time wrong on homepage but right on post page; Markdown rendering issues).
Don’t hesitate to examine Agent-generated code. Even without expertise in the language, you can often spot logical issues or understand data flow, helping you write better prompts. Files like notionService.js
usually handle Notion API calls.
Once core functionality works, ask Agent to add features. Use positive, direct language (Instruct principle). Here are ideas:
Implement caching and prefetching
Ask Agent: “Implement post caching and prefetching from Notion for a super-fast site.” This reduces Notion API calls and speeds up page loads.
Enhance styling
Ask Agent: “Add a hover effect to homepage blog post links.” or “Improve post typography for readability.” Small visual tweaks significantly improve user experience. You can show Agent examples of styles you like.
Configure data refresh strategy
Consider how often to fetch new Notion data. For simple blogs, on page load or server restart might be enough. For dynamic content, ask Agent: “Explore options to auto-refresh Notion posts hourly.” This might involve background polling (adds complexity but keeps content current).
Happy with your site? Time to share it!
Deploying your Notion-powered website
Replit builds, bundles, and deploys your app to a public URL.
By following this tutorial, you’ve learned to:
Building with AI like Replit Agent is collaborative. Procedural thinking, clear instructions, and methodical debugging are crucial for turning ideas into reality, fast.
Continue developing your Notion-powered website:
Experiment with content types
Try adding diverse content from Notion: image galleries, embedded videos, or categorized items.
Leverage advanced Notion features
Explore Notion’s formulas, rollups, and relations for complex data structures. Work with Agent to display this rich data on your Replit site.
Combine with other Replit integrations
Enhance your app by merging Notion data with other Replit AI tools or Agent integrations. For example, use Replit Auth for private content or OpenAI for AI-generated summaries from Notion data within your app.
Happy building! We can’t wait to see what you create.