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 move a section around. 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 updates.
This works best for portfolio sites, case study pages, landing pages, or any site where you want to update content without touching code regularly.
Before you start
What you need:
- A Notion account (free plan works fine)
- A website Claude helped you build (or any site where you can edit the code)
- A Claude subscription (any plan)
What you don't need:
- Coding knowledge — Claude handles the technical parts
- Any external tools or paid integrations
Quick vocabulary
A few terms that will come up. 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 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. |
| Headless CMS | 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. |
| 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. |
Part 1: Set up your Notion database
This is where you build the structure that will power your site. Think of each row as one piece of content (a case study, a section, a project) and each column as a detail about it.
Here's the thing most people don't realise: you don't have to build this manually, column by column. You can just describe what you need to Claude and it will set up the entire database structure for you in seconds — the right property types, the right options, all of it. This is especially useful when your database is complex.
But first — Claude needs to be connected to Notion before it can do any of that.
- Connect Notion to Claude. In Claude, go to Integrations and connect your Notion workspace. This gives Claude read and write access to your databases.
- Let Claude build the database for you. Tell Claude what your site needs — "I have a portfolio with case studies, each with a title, cover image, tags, and a summary" — and ask it to create a Notion database with the right structure.
- Fill in your first rows. Add a few real entries so you have something to test with. Cover images should be stored as URLs (from GitHub, Cloudinary, or wherever your site files live) rather than uploaded directly into Notion — it keeps your site fast.
Part 2: Tell Claude to build the rendering logic
This is the one-time setup where Claude writes the code that reads from your Notion database and displays it on your site. You only do this once.
- Give Claude context about your site. Share your current HTML/CSS structure and explain which sections you want to be controlled by Notion.
- Ask Claude to handle individual pages. For example: "Read the case studies from my Notion database and generate the project cards on my work page."
- Test it. Add a row in Notion, refresh your site, and check that it appears correctly. Adjust as needed.
Part 3: What you can do from Notion (no Claude needed)
Once the setup is done, here's everything you can update without touching Claude or your code again:
- Edit copy and content
- Swap images (just update the URL)
- Change layout styles (if you set up a layout property)
- Hide or show content instantly (using a Published checkbox)
- Reorder sections (using an Order number field)
- Add new content — new case study, new blog post, new service
"You update Notion. You refresh the site. That's it."
Part 4: Surprising things you can also do
Most people don't think about these when they first set up a Notion-powered site, but they're genuinely useful:
- Use Notion as a draft system. Keep unpublished content in your database with a "Draft" status. It won't show on the site until you change it to "Published."
- Build a Featured section separately. Add a "Featured" checkbox property and filter your homepage to only show featured work.
- Filter by category or industry. Add tags or select options, then let Claude build filtered views (e.g. only show illustration projects).
- Let Claude write content directly in Notion. Ask Claude to draft copy for a new case study directly into your database — no copy-pasting needed.
- Track what's published vs. what still needs work. Notion's views let you see all draft content at a glance, which is especially useful when you have multiple projects in progress.
Is this right for your site?
This setup is a significant step up from a static site — it adds a backend layer (the Notion API) and requires the one-time technical setup with Claude. It's worth it if:
- You update your site content regularly
- You want clients or collaborators to be able to update content without touching code
- You're building a site with lots of structured content (many case studies, blog posts, team members)
If your site rarely changes, a static HTML setup is simpler and faster. The best tool is always the one that matches how you actually work.
But if you find yourself reopening Claude every week to tweak a headline or swap a project image — this is the upgrade that pays off.
