Notion CMS
➡️ If you used Claude to help you build your website, there's a good chance you're still going back to it every time you want to change a headline, swap an image, or reorder a section. This guide shows you how to stop doing that.
The idea is simple: you set up a Notion database that acts as your site's content layer. Claude reads from it and renders your site accordingly. Once it's set up, you can manage a lot of things from Notion - no code, no reopening Claude for small stuff.
This works best for portfolio sites, case study pages, landing pages, or any site where you want to update content without touching code regularly.
<aside> 💡
What you'll end up with
A Notion database that controls your website's content, images, layout styles, and what's visible. You update Notion, refresh your site, it's done.
</aside>
A few terms you'll see throughout this guide. Skip this if you're already comfortable with these.
| Term | What it means |
|---|---|
| Notion database | A Notion page that looks like a table, where each row is a piece of content and each column is a property (like title, image, layout style). Think of it like a structured spreadsheet, but inside Notion. |
| Notion API | The way your website talks to Notion. API stands for "Application Programming Interface" - it's just the bridge that lets your site read data from your Notion workspace automatically. |
| Property | A column in your Notion database. Each row (content piece) can have different property types: text, image, checkbox, select option, number, etc. |
| Rendering | The process of taking data (from Notion) and turning it into what you actually see on the website. Claude writes this rendering logic once, then it runs automatically every time the page loads. |
| Headless CMS | CMS stands for "Content Management System" - a tool that lets you edit content without touching code. "Headless" just means the CMS (Notion, in this case) is separate from the website itself. The site fetches content from Notion and displays it. |
| Slug | The URL-friendly version of a page name. For example, the case study "Learn.xyz" would have the slug learn-xyz, making the URL yoursite.com/work/learn-xyz. |
What you need:
What you don't need: