You built your portfolio with AI. Now manage its content like WordPress

AI tools have made building a website feel like magic. You describe a portfolio, a studio site or a small business page, and a few minutes later you have something that looks great.

Then real life starts. You finish a new project and want to show it. A client sends a testimonial. You change your prices, your phone number, your photo. And every time, it goes the same way:

1. Open the AI tool and describe the change.
2. Upload the images and paste in the text.
3. Wait while it rewrites the code and puts out a new version of your whole site.
4. Check every page, because sometimes the layout shifts, a section disappears or the wrong photo moves.
5. Fix what broke with another prompt, and do it all again next time.

That's because your words and images are written straight into the code, mixed in with the design. To change one sentence, the AI has to change the code, and to change the code, it has to rebuild the site.

Proper websites keep those two apart. The design lives in the code and rarely changes. The content (text, images, projects, posts, menus) lives in a CMS (content management system): a private admin page where you log in and edit things in simple forms. WordPress is the one most people know. Change a headline, click Publish, done.

In this guide you'll give your AI-made website the same thing. You'll end up with:

• Pages you can edit, add or remove, each with its own address
• Projects or blog posts with categories, with drafts and a publish button
• A media library for your images and files
• Menus for the top and bottom of your site
• Forms (like a contact form) whose messages arrive in your admin panel
• Site settings for your site name, favicon, logo and the title and description Google shows
• SEO built in: a sitemap, a title and description for every page, and share images for social media
• An AI connection so Claude can draft and update content for you when you want help, with a key you control

The setup takes an afternoon, and most of that is waiting for Claude. After that, you'll rarely need to ask the AI to touch your site again.

And it can be free, and yours

There's a nice side effect. Once your content is out of the AI builder, you don't need its monthly plan or credits to keep updating your site:

• Your code lives on GitHub (free).
• Your site runs on Vercel or Netlify (free plans).
• Your content and images live in Supabase (free plan).
• Payload is free and open source.

You also own all of it. If you ever want to move host or hire a developer, you hand them the GitHub link. The FAQ at the end covers the limits of each free plan.

The tools doing the work

Payload is the CMS. It's free and open source under the MIT licence, so you can use it for client work you charge for. It installs inside your website instead of running as a separate service, and it builds the admin panel for you from a simple description of your content. Opensrcs runs on Payload too.

Supabase stores everything: your content goes in its database and your images go in its file storage. The free plan is plenty for a small website.

Claude does the setup. We use Claude Code, which can read and change the files of your website. Other AI coding assistants like Cursor work with the same prompts.

GitHub keeps a safe copy of your website's code, and every change Claude makes is saved there, so you can always go back.

Before you start

You need:

• Your website's code on GitHub. If you built it with Lovable, Bolt or v0, each one has a "Connect to GitHub" or "Export to GitHub" button. Use it first.
• A free GitHub account at github.com.
• A free Supabase account at supabase.com.
• Claude Code, in the Claude desktop app (the Code tab) or in your terminal.
• About an hour of quiet time for the first setup.

One honest warning before you begin: Payload works with websites built on Next.js, the most popular way to build websites with React. Sites from v0 and many other tools already use it. Sites from Lovable and Bolt usually don't. Step 1 checks this for you, and tells you what your options are.

Step 1: Open your website in Claude and check what it's built with

In Claude Code, open your project from GitHub (in the desktop app, pick the repository when you start a new session). Then paste this:

I built this website with an AI tool and I'm not a developer. Please look through the project and tell me, in plain words:

1. What it's built with. In particular, is it a Next.js app, and which version?
2. Where the text, images and links on each page currently live (written into the code, in a file, or in a database).
3. Whether it already uses Supabase or any other database.
4. Whether it has any forms, and where their messages go today.

Don't change anything yet. If it's not built on Next.js, explain my options for adding the Payload CMS in two or three sentences each, and recommend one.

If your site isn't on Next.js, Claude will usually suggest moving it over first. That sounds big, but for a normal website it's mostly a copy-and-paste job for Claude, and your design stays the same. Ask it to do that on its own branch (a separate copy of the code) and check the result before you carry on.

Step 2: Make a Supabase project

1. Go to supabase.com/dashboard and click New project.
2. Give it a name, pick the region closest to your visitors, and let Supabase create a strong database password. Save that password in your password manager. You'll need it in a moment, and Supabase only shows it once.
3. When the project is ready, click Connect at the top. Under Connection string, copy the address shown for the transaction pooler. It starts with postgresql://. This is the one that works best when your website is hosted on Vercel or Netlify.
4. Now go to Storage, create a bucket called media, and switch it to public so visitors can see your images.
5. Still in Storage, open Settings and create an S3 access key. Copy the access key, the secret key, the endpoint and the region.

Don't paste these into the chat. In the next step Claude makes a file called .env for them, and you fill it in yourself. That file stays on your computer and never goes to GitHub.

Step 3: Install Payload with WordPress-style content

This is the big prompt. It sets up everything in one go. Paste it into Claude:

Add the Payload CMS (version 3, the latest stable release) to this website, so I can edit all the content from an admin panel instead of the code. I'm not a developer, so explain anything I need to do in plain words.

Setup
- Install Payload inside this Next.js app, with the admin panel at /admin.
- Use the Postgres database adapter with my Supabase database. Read the connection string from DATABASE_URL.
- Store uploaded images and files in my Supabase Storage bucket called "media", using Payload's S3 storage plugin with forcePathStyle switched on. Read the keys from S3_ENDPOINT, S3_REGION, S3_ACCESS_KEY_ID and S3_SECRET_ACCESS_KEY.
- Create a .env file with those names left blank, plus PAYLOAD_SECRET filled in with a long random value. Make sure .env is in .gitignore. Add a .env.example with the same names and no values. Then stop and ask me to fill in .env.
- Use database migrations, not automatic schema changes, so going live is safe.

Content, set up like WordPress
- Users: people who can log into the admin, with an "admin" and an "editor" role. Editors can't manage users.
- Media: images and files, with a required alt text field for accessibility, and automatic smaller sizes for phones.
- Pages: title, slug (the page address, made from the title automatically), a flexible layout made of blocks (hero, text, image, image with text, call to action, FAQ, form), and drafts with a publish button. The home page is the page with the slug "home".
- Posts: title, slug, cover image, excerpt, rich text body, author, categories, publish date, and drafts with scheduled publishing.
- Projects (if my site shows work, like a portfolio): title, slug, client, year, cover image, gallery, short summary, rich text case study, categories, a "featured" switch, and an order number so I can choose which comes first. If my site has no work section, skip this and tell me.
- Categories: name and slug. Posts can have several.
- Header menu (a global): a list of links, each pointing to a page, a post or any address, with optional dropdown children.
- Footer menu (a global): columns of links, plus social media links and a short copyright line.
- Site settings (a global): site name, tagline, logo, favicon, default share image, default SEO title and description, contact email, and an optional Google Analytics or Plausible ID.

Then
- Change the website so every page, post, menu and setting is read from Payload instead of being written in the code. Keep my current design exactly as it is.
- Move all the text and images that are on my site today into Payload, so nothing disappears.
- When a page is published, update the live site straight away (on-demand revalidation).
- Use the official Payload website template as your reference for how these pieces fit together, but don't replace my design with it.
- Tell me how to create my first admin user, and list anything you couldn't move over.

When Claude asks, open .env in the file list and paste in the values from Step 2. Then tell Claude "Done, carry on."

When it's finished, Claude will start your site on your computer. Open the address it gives you, add /admin to the end, and create your first admin user. Click around. Change a headline on a page, click Publish, and look at the page again. That's the moment it clicks.

Step 4: Forms that land in your admin panel

If your website has a contact form, booking form or newsletter sign-up, this makes it save messages in Payload and email you a copy. Paste:

Add Payload's official form builder plugin.

- I want to build forms in the admin panel: choose the fields (name, email, phone, message, dropdown, checkbox), mark which are required, and write the thank-you message.
- Every submission is saved in a "Form submissions" list in the admin, newest first.
- Send me an email for each new submission, to the contact email in Site settings. Tell me which free email service you recommend for sending it and what I need to set up.
- Add spam protection that doesn't annoy real visitors (a hidden honeypot field and a simple rate limit).
- Replace the forms on my site with ones built this way, keeping their current design.
- Make the "form" block on Pages let me drop any form onto any page.

Step 5: SEO, sitemap and share images

This is the part most AI-built sites skip, and it's what helps people find you on Google. Paste:

Make the site SEO-friendly using Payload's official SEO plugin.

- Add an SEO tab to Pages and Posts with meta title, meta description and share image. Show a live preview of how the page will look on Google, and warn me when the title or description is too long. When a field is empty, fall back to the defaults in Site settings.
- Use the favicon, site name and default share image from Site settings on every page.
- Add a sitemap.xml and robots.txt that update by themselves when I publish or unpublish something. Leave out drafts.
- Add an RSS feed for the blog at /feed.xml.
- Add structured data (schema.org) for the organisation, for blog posts, and for FAQ blocks.
- Give each page a canonical address, and add Payload's redirects plugin so I can redirect old addresses to new ones from the admin.
- Check that every page has exactly one main heading and that every image has alt text, and tell me about any that don't.

After you go live, add your site to Google Search Console (it's free) and give it the address of your sitemap: your website address with /sitemap.xml on the end.

Step 6: Let Claude update your content for you

Payload has an official MCP plugin. MCP is the standard way AI assistants connect to other apps. Once it's on, you can say "add a blog post about our autumn opening hours" and Claude writes it straight into your admin panel. Paste:

Add Payload's official MCP plugin (@payloadcms/plugin-mcp) so AI assistants can work with my content.

- Turn it on for Pages, Posts, Categories, Media and Form submissions. Allow find, create and update. Don't allow delete for any of them, and don't expose Users at all.
- Anything an AI creates or changes must be saved as a draft, never published, so I always review it before visitors see it.
- Make the MCP API keys list visible in the admin to admins only, so I can create a key, see which keys exist and delete one.
- Explain in plain words how to create a key, and give me the exact command to connect Claude Code to my live site's MCP address with that key.

Claude Code connects with a command like this one. Swap in your own address, and paste your own key in place of the placeholder in your terminal, not in a chat:

claude mcp add --transport http my-website https://your-website.com/api/mcp --header "Authorization: Bearer YOUR-API-KEY"

Your key works like a password for your content. If you ever think someone else has seen it, delete it in the admin panel and make a new one.

Step 7: Go live

Your website already has a home, like Vercel or Netlify. It just needs to know about the new settings. Paste:

Help me put these changes live.

1. Save all the changes to GitHub on a new branch, with a clear description, and open a pull request.
2. List every setting from .env that I need to add to my hosting (tell me where to click on Vercel or Netlify). Don't show the values.
3. Make sure the database migrations run automatically when the site is built.
4. Once the preview of the pull request works, tell me what to check before I merge it.

Add the settings on your host, open the preview link, log into /admin, and check your pages. When everything looks right, merge the pull request. Your site is live, and from now on you edit it like any WordPress site.

Using it day to day

Most changes you'll now make yourself in /admin: fix a typo, swap a photo, add a menu link, publish a post. No AI needed, and no new version of the whole site.

Adding a new piece of work to your portfolio, for example, now looks like this:

1. Go to /admin and open Projects.
2. Click Create new, type the title and summary, and drag in your images.
3. Click Publish.

It's on your site a few seconds later, and nothing else on the site has changed.

For bigger jobs, ask Claude. With the MCP connection from Step 6, prompts like these work:

Read my last three blog posts and write a new draft post about our new weekend opening hours in the same tone. Add it to the "News" category.

Go through every page and post. List any that are missing a meta description or a share image, then write the missing descriptions as drafts for me to check.

Add a new page called "Pricing" with a hero, three price cards and an FAQ block, using the same blocks as the Services page. Save it as a draft and add it to the header menu.

You still review and click Publish yourself. That's the point.

Keep it safe

• Never paste passwords or keys into the chat. Put them in .env on your computer, or in your host's settings.
• Keep AI changes as drafts. The Step 6 prompt makes sure the AI can't publish or delete anything.
• Use a strong admin password and give other people the "editor" role, not "admin".
• Keep Payload up to date. Every couple of months, ask Claude: "Update Payload to the latest stable version, run the migrations and check that the site still works."
• Back up your database. Supabase's paid plans back up daily. On the free plan, ask Claude to show you how to download a copy now and then.