Turn an AI-Generated Demo into a Maintainable Blog

Why a demo is not a blog yet

An AI model can produce a convincing blog homepage in one pass, whether you asked Claude Fable, ChatGPT or another tool. That demo is usually one HTML file with the first few posts pasted inline. It looks finished until you add the eleventh post. Then you must edit the homepage, the archive and the navigation on every page by hand.

A blog that can grow needs some things that the demo does not have:

• One layout for all posts, so that a design change is one edit
• Each post in its own Markdown file with a title, date and description
• A homepage and archive built from those files
• An RSS feed and a sitemap
• URLs that stay the same after you publish a post

A static site generator (a tool that builds HTML pages from files) gives you all of that. This guide uses the Astro blog template. The template already includes Markdown posts, an RSS feed, a sitemap and canonical URLs. A canonical URL tells search engines the main address of a page. Eleventy and Hugo follow the same idea.

Step 1: Keep the demo as a reference

Before you change anything, save the demo folder (HTML, CSS and images) in a new Git repository. You will copy its design into the new layout. You also want a version that you can go back to.

Some demos use structured content, such as a list of products, places or recipes. If your demo does, ask the AI to export that data to a JSON or CSV file now. Structured data is easier to reuse than text buried in HTML.

Step 2: Start from the blog template

1. Run npm create astro@latest -- --template blog. Follow the prompts. Astro’s install page lists the Node.js version that it needs.
2. Open astro.config.mjs. Set site to the address that the blog will use, for example https://blog.example.com. The sitemap package needs this value to build full URLs. The RSS feed also uses it.
3. Find the main files. Posts are in src/content/blog/. The layout for the post page is src/layouts/BlogPost.astro. The header and footer are in src/components/.
4. Run npm run dev. Open the local address that it prints.

Then ask your AI coding tool to move the look of the demo into the template. This prompt keeps the structure intact: “Use the colors, fonts and header from demo/index.html in src/layouts/BlogPost.astro, src/components/Header.astro and src/pages/index.astro. Keep the content collection and the RSS feed as they are.”

Step 3: Move two or three real posts first

Each post is a Markdown file. Front matter is the block of fields at the top of the file. The template compares the front matter with a schema, a fixed list of fields and their types:

---
title: 'How we test trail shoes'
description: 'The three-week routine behind every review on this site.'
pubDate: '2026-10-22'
heroImage: '../../assets/trail-shoes.jpg'
---

Post text in Markdown.

title, description and pubDate are required. updatedDate and heroImage are optional. The file name becomes the URL. For example, the site publishes src/content/blog/how-we-test-trail-shoes.md at /blog/how-we-test-trail-shoes/.

Before you fill the site with generated placeholders, test the layout with two or three real posts. If placeholder posts go live by accident, search engines index them and other pages link to them. Then they are hard to remove cleanly. Keep drafts in a branch until they are ready.

Step 4: Connect publishing to the repository

With the posts in Git, every merge to the main branch can publish the site.

To publish with Cloudflare Pages, go to Workers & Pages > Create application in the dashboard. Open the Pages tab and choose Import an existing Git repository. Set the production branch to main and the build command to npm run build. Set the build directory to dist (Astro on Cloudflare Pages). Pages rebuilds on every push.

Pushes to other branches and pull requests get preview deployments with their own URLs. Those URLs are public by default. To keep unpublished posts private, go to Settings > General. Then select Enable access policy.

To publish with GitHub Pages, add the workflow file .github/workflows/deploy.yml from Astro’s GitHub Pages guide. This workflow uses the official withastro/action. In the repository, open Settings > Pages. Set the source to GitHub Actions.

For GitHub Pages, set site to your Pages URL. If the repository is not named <username>.github.io, set base to /<repository-name>. On GitHub Free, the repository must be public.

Netlify can also build from a Git repository. See the Netlify guide on this blog.

Step 5: Keep URLs stable

Search engines, newsletters and other sites link to the URL that a post had on the day that it went out. If the URL changes, those links break.

• Choose the file name before the first publish. If you rename the file later, the URL changes.
• To move a post on Cloudflare Pages, add a _redirects file to the public/ folder of Astro. This folder is copied into the build output untouched. Add a line such as /blog/old-name/ /blog/new-name/ 301. Always write the 301. Without a status code, Pages uses 302. A 302 marks the move as temporary.
• If your host has no redirects file, use Astro’s redirects option in astro.config.mjs. In a static build, this option writes an HTML page with a meta refresh for each old path.

Step 6: Use the same routine for every new post

1. Create a branch. Add the Markdown file to it.
2. If you want, ask the AI for a draft. Then read the draft yourself. Make sure that every fact, name and link is correct.
3. Push the branch. Read the post on its preview URL, on a phone and on a laptop.
4. Merge to main. The host builds and publishes it.
5. Open the live post, the homepage list, /rss.xml and /sitemap-index.xml. Make sure that the new post appears in each one.

The same routine works when an AI agent writes the drafts. The branch and the preview URL give you a place to review before anything goes live.

Step 7: See what readers open

On Cloudflare Pages, open the project and go to Metrics. Under Web Analytics, select Enable. Cloudflare adds the snippet on the next deployment (guide). Then you can filter page views by path and by referrer. This shows which posts people read and where they came from. On other hosts, add the Cloudflare Web Analytics snippet yourself or use a tool such as Plausible.

To see which searches lead to each post, add the site to Google Search Console. Then submit the sitemap. Use what you learn to choose the next topics. Update older posts in place. Do not publish near-duplicates.

A docs portal with Ask AI
and support tickets

Connect a repository, or describe your product to start. Each docs site has search, Ask AI, an API console, an MCP server and support tickets.

• Publishes from GitHub on every push
• Works with Mintlify repositories
• API console from your OpenAPI file
• MCP server and llms.txt for AI agents
• Ask AI and support tickets
• Analytics for people and AI agents

Start Free→ Questions? Ask AI in our docs

No card required.