How to Build an SEO-Friendly Blog with AI

The easiest way to build an SEO-friendly blog with AI is to start with a good blog framework, keep its SEO features, and use an AI coding tool to customize the design and content.

That is how I built Easier with AI. I started with AstroPaper, changed the design to NeoBrutalism, used Codex to plan and build the site, tested it in real browsers, and wrote this first post from the project’s Codex history.

This guide is for developers and people who are comfortable with basic code. You do not need to be an Astro expert (I am not one either), but it helps to understand files, Git, and how a website is built.

Table of contents

Open Table of contents

• Start with a blog framework
• Check the SEO basics
• Pick a design system
• Use an AI coding tool
• Test the site in real browsers
• Write from the project history
• Buy a domain and choose a host
• A simple workflow to copy

Start with a blog framework

You can ask AI to build a blog from an empty folder, but that creates more work. You still need routes, metadata, a sitemap, an RSS feed, post pages, tags, search, and many other small features.

I started with AstroPaper, a blog template built with Astro. It already had the main parts of a working publication:

• Markdown and MDX posts
• Astro content collections
• Static page generation
• Post, tag, and archive pages
• An RSS feed
• A sitemap and robots file
• Search with Pagefind
• Open Graph images
• Light and dark themes

This gave Codex a working project to improve instead of a blank project to invent.

Astro is a good fit for a content site because it can turn every post into static HTML. Static pages are fast, simple to host, and easy for search engines to read.

Check the SEO basics

A template can give you good technical SEO, but it cannot make every post useful. You still need to check the basics.

For each post, add:

• A clear title that matches what people search for
• A short description that explains the result
• One main heading
• Short section headings
• A simple URL
• Useful internal links
• Descriptive image alt text
• A publish date and author

The site should also generate canonical URLs, structured data, a sitemap, an RSS feed, and social preview images. AstroPaper already handled most of this, so I kept those parts.

This also helps with answer engines such as ChatGPT, Claude, and Google’s AI results. A direct answer near the top, clear headings, plain language, and well-structured steps make the article easier to understand and quote.

AI can help you write titles and descriptions, but always check that they sound like something a real person would search for. “How to Build an SEO-Friendly Blog with AI” is clearer than a long project-specific title.

Pick a design system

The original template was made for a developer audience. I wanted Easier with AI to feel more like a bold publication that could cover coding and non-coding workflows.

I have also wanted to use NeoBrutalism for a long time. Its bold visual style felt right for this publication.

I used the NeoBrutalism shadcn registry for the component styles. Codex installed the components and adapted them to Astro.

The important instruction was: change the visual system, but keep the blog system.

That meant we could redesign the homepage, posts, tags, archives, search, about page, and reading view without removing Astro’s content and SEO features.

Using a component library also made the site more consistent. Buttons, cards, badges, breadcrumbs, and pagination could share the same borders, shadows, colors, and interaction styles.

Use an AI coding tool

I used Codex as the main coding tool for this project. It could read the repository, edit files, run commands, open the site in a browser, and check its own work.

I also used the Product Design plugin to iterate on the design. It helped me review UI decisions and refine the visual direction while Codex made the changes in the project.

Here are the Codex features I used and what they helped with:

Feature	How I used it
Projects and chats	Read the repository and review earlier tasks when writing this article
Goals and long-running work	Keep the work focused on one result, such as finishing the redesign or publishing the first guide
Project instructions with AGENTS.md	Tell Codex how to run Astro, which component library to use, and how to test changes
Skills and plugins	Use Product Design for UI work and Browser tools for testing
Integrated terminal	Run one-off commands without spending Codex tokens, such as creating the AstroPaper project

I did not ask Codex to “build the whole site” in one prompt. I split the work into smaller tasks:

1. Plan the redesign.
2. Install the design system.
3. Update the theme and fonts.
4. Redesign the pages.
5. Improve the reading experience.
6. Test color contrast.
7. Fix smaller issues such as card links and breadcrumbs.

Small tasks made it easier to review each change and correct the design when something felt wrong.

Test the site in real browsers

A site can build successfully and still have visual problems. Code alone does not tell you if a heading wraps badly, a button is hard to read, or a page overflows on mobile.

Codex handled the browser testing automatically. I asked it to use its in-app browser, and it opened the site, changed the viewport size, switched between light and dark themes, tested navigation and other interactions, and checked long articles and the table of contents. I did not have to repeat those checks by hand after every change.

The human-in-the-loop part still mattered. At first, Codex treated the installed design system as working because the pages rendered and the components behaved as expected. I noticed that some color combinations did not look readable and asked Codex to test them specifically against WCAG AA contrast rules. After I flagged it, Codex added contrast to its test plan instead of assuming the theme was accessible.

The in-app browser was useful for visual checks and interactions. Measuring the exact text and background colors across every generated page, multiple breakpoints, both themes, and hover states needed a repeatable automated test. Codex added Playwright tests and ran them against the installed Chrome browser using its branded browser channel.

The browser tests found real issues:

• Low-contrast text and hover colors
• Article content that could overflow at some widths
• Navigation controls with different sizes
• Breadcrumb styles that felt too busy
• Post cards with a clickable title but a non-clickable body

The rule I would follow again is simple: build with AI, then use AI to test it the way a real user would.

Write from the project history

It is easy to forget how a project was built after several rounds of changes.

Instead of writing this post from memory, I asked Codex to read the relevant tasks for this project. The task history showed the real order of the work:

• The first NeoBrutalism redesign
• Reading layout improvements
• RSS and navigation changes
• Grid and icon updates
• Color contrast testing
• Clickable post cards
• Breadcrumb fixes

Codex also read the project plan and Git history. That made this article more accurate. It could explain not only what the final code does, but why certain decisions were made.

This is a useful way to document any AI-assisted project:

1. Keep each task focused.
2. Use clear commit messages.
3. Add tests for important fixes.
4. Ask AI to review the history when you are ready to write.

The conversation can contain the messy process. The repository should contain the final decisions.

Buy a domain and choose a host

I bought the domain through Porkbun. Buying the domain early helped turn the blog from an experiment into a real project.

I host it on Cloudflare Pages because Astro generates a static site. The deployment setup is:

1. Push the repository to a Git host.
2. Connect the repository to Cloudflare Pages.
3. Run the Astro build command.
4. Publish the dist folder.
5. Connect the Porkbun domain using Cloudflare’s custom-domain setup.
6. Set Astro’s production site URL to https://easierwith.ai so canonical links, sitemap entries, and RSS URLs use the real domain.
7. Test the production site, RSS feed, redirects, and social previews.

Cloudflare Pages rebuilds the site whenever I push a new commit. After each deployment, I still check the public URL, DNS, HTTPS, canonical links, RSS feed, redirects, search, and social previews.

A simple workflow to copy

Here is the full process in a shorter form:

1. Choose an SEO-friendly blog framework.
2. Keep the framework’s content, routing, and metadata features.
3. Pick a design system that matches your audience.
4. Give your AI coding tool clear project instructions.
5. Split the build into small tasks.
6. Use browser tools to inspect the real UI.
7. Add automated tests for accessibility and important interactions.
8. Write the first post from the project history.
9. Deploy the site and test the production URL.

You do need some coding knowledge to review the changes and fix problems. But you do not need to build every part by hand. A good framework gives you the foundation, and an AI coding tool helps you adapt it much faster.

My final setup was Astro for the blog, NeoBrutalism for the design, and Codex to build and test it.

Building an SEO-friendly blog without starting from scratch is easier with AI.