Project Tutorial Beginner AI-Assisted 18 min read · ~2–4 hours to build

Build a Blog with AI: Step-by-Step Project Tutorial

You've got ideas worth sharing. In this tutorial, you'll build a complete blog website from a blank folder — homepage, blog posts, responsive design, the works — using AI as your coding partner. No CS degree. No framework drama. Just you, a prompt, and a live URL by the end.

By The AI-Enabled Coder Published March 18, 2026 Tested with Cursor 0.47, Claude Sonnet 4, Vercel (free tier) — March 2026

TL;DR — What You'll Build

A complete, deployed blog website with: a homepage listing your posts, individual blog post pages with readable typography, responsive design that works on phones, a navigation bar, an about page, and a live HTTPS URL anyone can visit. Stack: plain HTML + CSS + a tiny bit of JavaScript. Hosting: Vercel (free). Total time: 2–4 hours. Zero coding experience required.

What You'll Build

By the end of this tutorial, you'll have a real blog — not a template, not a theme someone else designed, but a blog you built with AI. Here's what the finished product includes:

  • Homepage — shows your blog name, a short intro, and a list of your latest posts as clickable cards
  • Individual blog post pages — each post on its own URL with clean, readable typography
  • About page — tell readers who you are and why you're writing
  • Navigation — consistent header across all pages with links to Home, About, and your latest posts
  • Responsive design — looks great on desktop, tablet, and phone
  • Live URL — deployed on Vercel with HTTPS, shareable with anyone

This is the same kind of blog that developers charge $500–$2,000 to build. You're going to do it for free in an afternoon.

Prerequisites — What You Need Before Starting

Gather these before you open anything. Having everything ready means you won't lose momentum once you start prompting.

  • Cursor (free) — cursor.com — this is your AI-powered code editor. Download it and open it once to finish setup. If you prefer Claude Code or ChatGPT, those work too — you'll just copy/paste files manually instead of working in the editor directly.
  • GitHub account (free) — github.com — you need this to deploy. Sign up takes 2 minutes.
  • Vercel account (free) — vercel.com — sign up with your GitHub account. This is where your blog goes live.
  • A blog name — doesn't need to be perfect. "Sarah's Build Log" or "Vibe Coding Notes" or even just your name works great.
  • 2–3 blog post ideas — short is fine. "What I learned building my first app," "Why I started vibe coding," "My favorite AI tools." Even placeholder content works — you can always rewrite later.
Why plain HTML and not WordPress or React? WordPress adds a database, plugins, PHP, and monthly hosting costs. React adds a build system, npm, node_modules, and complexity you don't need. A plain HTML blog loads instantly, costs nothing to host, and you can read every single file. When you understand the basics, graduating to a framework later is easy. Starting with a framework when you don't understand the basics? That's where people get stuck for weeks.

Step 1: Setting Up Your Project

Create a new folder on your computer. Call it my-blog (or whatever your blog name is — keep it lowercase with dashes, no spaces). Open that folder in Cursor.

First, let's get the folder structure set up. You could create every file manually, but why? This is exactly what AI is for.

Cursor / Claude Prompt

"Create the folder structure for a simple static blog. I need: index.html (homepage that lists blog posts), about.html (about page), a posts/ folder with 3 sample blog post HTML files, a css/ folder with styles.css, and a js/ folder with main.js. Just create the empty files for now — we'll fill them in next."

After AI creates the files, your project should look like this:

my-blog/
├── index.html           ← Homepage (lists all posts)
├── about.html           ← About page
├── css/
│   └── styles.css       ← All your styles
├── js/
│   └── main.js          ← Any interactivity
├── posts/
│   ├── first-post.html  ← Blog post 1
│   ├── second-post.html ← Blog post 2
│   └── third-post.html  ← Blog post 3
└── images/              ← Post images (add later)

Initialize Git (So You Can Deploy Later)

Open the terminal in Cursor (View → Terminal) and run:

# Set up version control
git init
git branch -M main

# Create .gitignore
echo ".DS_Store" > .gitignore
echo "*.log" >> .gitignore

If the word "git" means nothing to you, don't worry. Think of it as a save system for your project. Every time you make changes you're happy with, you'll "commit" them — like hitting save in a video game. We cover this more in our HTML fundamentals guide.

Step 2: Prompting AI for the Blog Structure

This is where the magic happens. You're going to describe your blog in plain English and let AI build the entire HTML structure. The key is being specific about what you want — vague prompts get generic results.

Cursor / Claude Prompt — Homepage

"Create index.html for my blog called [YOUR BLOG NAME]. This is the homepage. Include: (1) a header with the blog name as a link to home, and nav links to Home and About, (2) a hero section with the blog name as an h1, a short tagline underneath — '[YOUR TAGLINE, e.g., Notes from a vibe coder building in public]', (3) a section called 'Latest Posts' with 3 post cards — each card should have the post title as an h2 link, a date, a 2-sentence excerpt, and a 'Read more →' link. Link the posts to posts/first-post.html, posts/second-post.html, posts/third-post.html. (4) A footer with copyright and 'Built with AI tools.' Use semantic HTML5 — header, nav, main, article, footer. Link to css/styles.css in the head and js/main.js before the closing body tag."

What AI Will Generate

AI will produce something like this (simplified to show the key parts):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Build Log — Notes from a Vibe Coder</title>
  <meta name="description" content="A blog about building real
    software with AI tools. No CS degree required.">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <header class="site-header">
    <nav class="nav">
      <a href="/" class="site-name">My Build Log</a>
      <ul class="nav-links">
        <li><a href="/">Home</a></li>
        <li><a href="/about.html">About</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>My Build Log</h1>
      <p class="tagline">Notes from a vibe coder
        building in public</p>
    </section>

    <section class="posts-list">
      <h2>Latest Posts</h2>

      <article class="post-card">
        <h3><a href="posts/first-post.html">What I
          Learned Building My First App with AI</a></h3>
        <time datetime="2026-03-18">March 18, 2026</time>
        <p>I had zero coding experience three months ago.
          Last week I shipped a real app to real users.</p>
        <a href="posts/first-post.html"
          class="read-more">Read more →</a>
      </article>

      <!-- More post cards follow the same pattern -->
    </section>
  </main>

  <footer class="site-footer">
    <p>© 2026 My Build Log. Built with AI tools.</p>
  </footer>

  <script src="js/main.js"></script>
</body>
</html>
Pro tip: After AI generates the file, open it in your browser immediately (just drag index.html into Chrome or Firefox). You'll see the raw structure with no styling — that's fine. You want to make sure all the pieces are there before you make it pretty. Fix content issues now, style issues later.

Key Things to Look For

Check that AI included:

  • <meta name="viewport"> — without this, your site will look terrible on phones
  • Proper <a href=""> links to your post files — click them to make sure they go to the right pages
  • A <meta name="description"> — this is what shows up in Google search results
  • The lang="en" attribute on the <html> tag — helps search engines and screen readers

If anything is missing, tell AI: "You forgot the viewport meta tag — add it." Be direct. AI responds well to direct corrections. For more on what these tags mean, see What Is HTML?

Step 3: Building the Blog Post Layout

Your homepage is done. Now you need the individual post pages. Every blog post will share the same basic layout — header, content area, footer — with different content in the middle. This is the page people actually read, so typography and readability matter more here than anywhere else.

Cursor / Claude Prompt — Blog Post Template

"Create posts/first-post.html for my blog post titled 'What I Learned Building My First App with AI.' Include: (1) the same header and nav as index.html (blog name linking to /, nav links to Home and About — use relative paths like ../ since we're in a subfolder), (2) an article element with: an h1 for the title, a time element showing 'March 18, 2026', the author name, an estimated reading time, (3) the article body with 4-5 paragraphs of content about learning to build with AI tools — use real subheadings with h2, include a blockquote, include a code snippet showing a simple example, (4) a 'Back to all posts' link at the bottom, (5) the same footer as the homepage. Link to ../css/styles.css. Make sure all relative paths work from inside the posts/ subfolder."

The Relative Path Trap

This is the single most common thing AI gets wrong with multi-page blogs. Your homepage is at the root (/index.html), but your posts are in a subfolder (/posts/first-post.html). That means:

  • On the homepage: href="css/styles.css" ✅
  • In a post: href="css/styles.css" ❌ — this looks for /posts/css/styles.css which doesn't exist
  • In a post: href="../css/styles.css" ✅ — the ../ goes up one folder level
Watch for this: AI will sometimes use root-relative paths like /css/styles.css (starting with /). These work fine on a live server but break when you open files directly in your browser during development. Tell AI: "Use relative paths with ../ for the posts subfolder, not root-relative paths starting with /." You'll save yourself 30 minutes of confusion.

Create the Other Posts

Once your first post looks good, creating more is easy:

Cursor / Claude Prompt — More Posts

"Using the exact same layout as first-post.html, create posts/second-post.html with the title 'Why I Started Vibe Coding' (dated March 15, 2026) and posts/third-post.html with the title 'My Favorite AI Coding Tools in 2026' (dated March 12, 2026). Keep the same header, nav, footer, and CSS link. Write 3-4 paragraphs of real content for each one."

After all three posts exist, go back to your homepage and make sure every "Read more →" link actually opens the right post. Click each one. If a link goes to a 404 or the wrong post, fix the href attribute now.

Step 4: Adding the About Page

Your about page tells readers why they should care about your blog. This is where your story becomes your brand. If you came to coding from construction, nursing, teaching, music — whatever — that's the most interesting thing about you. Lean into it.

Cursor / Claude Prompt — About Page

"Create about.html for my blog. Same header/nav/footer as index.html (same relative paths since about.html is in the root folder). The main content should have: an h1 'About [YOUR NAME]', a photo placeholder (use an img tag with src='images/profile.jpg' and descriptive alt text), 3-4 paragraphs about who I am — I'm [YOUR BACKGROUND, e.g., 'a former contractor who started building software with AI tools in 2024']. Include what the blog is about and what readers can expect. Add a section at the bottom with links to find me on [YOUR PLATFORMS — GitHub, Twitter/X, LinkedIn]."

The about page is the one page where AI can't write your content for you. Swap out every placeholder with your real story. Two honest paragraphs about why you started coding beat five paragraphs of generic filler every time.

Step 5: Styling Your Blog

Right now, your blog works but looks like it was built in 1998. Time to fix that. The CSS prompt is the most important prompt in this entire tutorial — a well-styled blog makes people trust your writing before they read a single word.

Cursor / Claude Prompt — Blog Styles

"Write css/styles.css for my blog. Design goals: clean, minimal, focused on readability. I want a modern blog look — think Substack or Medium but simpler. Specifics: (1) Use CSS custom properties for colors — light background (#FAFAFA or white), dark text (#1A1A2E), one accent color [YOUR CHOICE, e.g., '#6366F1' for indigo]. (2) Max content width of 720px, centered on the page with comfortable side padding. (3) Typography: use Inter from Google Fonts, body text 18px with 1.7 line-height for readability, headings bold and larger. (4) Site header: blog name on the left, nav links on the right, subtle bottom border. (5) Post cards on homepage: clean card with slight border or shadow, title, date in muted color, excerpt, hover effect. (6) Blog post pages: generous line-height, code blocks with monospace font and gray background, blockquotes with left border accent, images 100% width with border-radius. (7) Responsive: on mobile, nav stacks, content fills width with padding, cards go full-width. (8) Footer: muted, small text, centered."

Key CSS Patterns to Understand

/* css/styles.css — The patterns that matter */

/* Custom properties — change your entire look from here */
:root {
  --color-bg: #FAFAFA;
  --color-surface: #FFFFFF;
  --color-text: #1A1A2E;
  --color-text-muted: #6B7280;
  --color-accent: #6366F1;
  --color-border: #E5E7EB;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --content-width: 720px;
  --radius: 8px;
}

/* Content container — this keeps text readable */
.site-content,
.post-content,
.hero {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Post card on homepage */
.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.post-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

/* Blog post typography — the most important CSS */
.post-body {
  font-size: 1.125rem;  /* 18px */
  line-height: 1.75;     /* Generous spacing for reading */
  color: var(--color-text);
}

.post-body h2 {
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.5rem;
}

/* Code blocks */
.post-body pre {
  background: #F3F4F6;
  border-radius: var(--radius);
  padding: 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Blockquotes */
.post-body blockquote {
  border-left: 3px solid var(--color-accent);
  margin: 1.5rem 0;
  padding: 0.5rem 1.25rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Responsive — mobile-first adjustments */
@media (max-width: 640px) {
  .nav {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .post-body {
    font-size: 1rem;     /* Slightly smaller on mobile */
  }
}

The single most important thing in blog CSS: line-height and max-width. If your text lines are too long (over 80 characters), people's eyes get tired and they leave. If lines are too tightly spaced, the text feels cramped. The 720px max-width with 1.75 line-height combo is the sweet spot — it's what Medium, Substack, and every readable blog uses.

Iteration is the whole point: Open your blog in the browser and start tweaking. "Make the post cards have more padding." "Make the accent color warmer." "Add more space above h2 headings." Each prompt takes seconds. You're not coding — you're directing. That's the vibe coding workflow. For a deeper understanding of how styles work, check out What Is CSS?

Dark Mode (Optional But Cool)

Cursor Prompt — Dark Mode

"Add a dark mode toggle to my blog. Add a button in the header that switches between light and dark themes. Use a CSS class on the body (e.g., 'dark-mode') and define dark color overrides in CSS. Save the user's preference in localStorage so it persists between visits. The toggle should show a moon icon in light mode and a sun icon in dark mode (use emoji: 🌙 and ☀️)."

Step 6: Deploying Your Blog

Your blog is built. It looks good in the browser. Now the whole world needs to see it. Deployment sounds intimidating, but with Vercel, it's literally five clicks and two minutes.

Push to GitHub

# In Cursor's terminal:
git add .
git commit -m "Initial blog build — homepage, 3 posts, about page"

# Go to github.com → New Repository → name it "my-blog"
# Don't add a README (you already have files)
# Then connect and push:
git remote add origin https://github.com/yourusername/my-blog.git
git push -u origin main
If git push asks for authentication: GitHub doesn't accept passwords anymore. You need a Personal Access Token. Go to GitHub → Settings → Developer Settings → Personal Access Tokens → Generate New Token. Copy it and paste it as your password when git asks. You only have to do this once. Or use gh auth login if you have the GitHub CLI installed.

Deploy on Vercel

  1. Go to vercel.com → sign in with GitHub
  2. Click "Add New…" → "Project"
  3. Import your my-blog repository
  4. Vercel auto-detects it's a static site — no configuration needed
  5. Click "Deploy"
  6. Wait ~30 seconds
  7. Your blog is live at my-blog.vercel.app 🎉

That's it. HTTPS is automatic. Every time you push to main, Vercel auto-deploys the new version. Free forever for static sites.

Custom Domain (When You're Ready)

A custom domain like yourblog.com costs $10–15/year. When you're ready:

  1. Buy a domain from Namecheap, Google Domains, or Cloudflare Registrar
  2. In Vercel: your project → Settings → Domains → add your domain
  3. Vercel gives you DNS records to add at your registrar
  4. Wait 5–30 minutes for propagation
  5. HTTPS is automatic

For more on how domains and DNS work, read What Is DNS?

Adding New Posts (Your Ongoing Workflow)

Now that your blog is live, adding new posts is a 10-minute workflow:

  1. Create a new file in the posts/ folder (e.g., posts/my-new-post.html)
  2. Prompt AI: "Using the same layout as my other blog posts, create a new post titled '[TITLE]' dated [DATE]. Write the content about [TOPIC]."
  3. Add a new post card to index.html at the top of the posts list
  4. Commit and push:
git add .
git commit -m "New post: [title]"
git push

Vercel auto-deploys. Your new post is live in under a minute.

Keep a consistent file naming pattern: Use lowercase with dashes: my-favorite-tools.html, why-i-started-coding.html. This becomes your URL structure. Clean URLs make your blog look professional and help with search engine optimization.

What AI Gets Wrong (And How to Catch It)

AI is an incredible coding partner, but it makes predictable mistakes — especially on multi-page sites like blogs. Here's what to watch for:

1. Broken Relative Paths

The #1 bug in AI-built blogs. AI forgets that files in posts/ need ../ to reach root-level folders. Symptoms: your blog post pages have no CSS (they look unstyled) or nav links go to 404 pages.

Fix: "All the posts in my posts/ folder need relative paths with ../ to reach the css/ and other root files. The current paths are wrong. Fix every link, stylesheet reference, and script reference in all post files."

2. Inconsistent Navigation

AI generates each page independently, so the nav on your About page might not match the nav on your homepage. Links might point to different places or use different text.

Fix: "Make the navigation identical across all pages: index.html, about.html, and all files in posts/. The nav should have: blog name linking to home, and links to Home and About. Adjust relative paths based on each file's location."

3. Missing Viewport Meta Tag

Sometimes AI forgets <meta name="viewport" content="width=device-width, initial-scale=1.0">. Without it, your blog looks full-size on mobile — users have to pinch-zoom to read anything.

Fix: Check every HTML file. If any is missing the viewport tag, tell AI: "Add the viewport meta tag to [filename]."

4. Placeholder Content Left Behind

AI loves placeholder text: "Lorem ipsum," "[Your Name Here]," "This is a sample post." It's easy to miss when you're focused on the code. Read every page in the browser before deploying.

Fix: Search your entire project for "Lorem," "placeholder," "sample," and "[Your" — replace everything with real content.

5. Overengineering

Tell AI to build a blog and it might give you a React app with a build system, a markdown parser, a CMS, and 47 npm packages. You asked for a bicycle and got a spaceship.

Fix: Be explicit in your prompt: "Plain HTML and CSS only. No frameworks, no build tools, no npm, no React. Just static HTML files."

How to Debug with AI

Something doesn't look right? Something's broken? Here's the debugging workflow that works every time:

The Screenshot Method

If your blog looks wrong, take a screenshot and paste it directly into Cursor or Claude. Say:

Debug Prompt

"Here's what my blog looks like right now [paste screenshot]. The problem is [describe what's wrong — e.g., 'the post cards are overlapping' or 'the nav is stuck behind the content' or 'there's a huge white gap on the right side on mobile']. Here's my CSS: [paste the relevant section]. Fix it."

The "It Works on Desktop But Not Mobile" Fix

Open your blog on your phone (or use browser DevTools — right-click → Inspect → click the phone icon in the top left). If it looks broken:

Mobile Debug Prompt

"My blog looks fine on desktop but these things are broken on mobile: [list exactly what's wrong]. I'm using this CSS: [paste relevant media queries or the full styles.css]. Fix the responsive design."

The "Nothing Shows Up" Fix

If you open an HTML file and see a blank page, right-click → View Page Source. Look for:

  • Is there content in the body? If not, AI might have generated an empty file
  • Is the CSS path correct? Look at the <link rel="stylesheet"> href
  • Are there JavaScript errors? Open browser DevTools (F12) → Console tab
The browser DevTools console is your best friend. Press F12 on any page, click the Console tab. If something's broken, there's usually a red error message telling you exactly what went wrong. Copy that error and paste it to AI — it'll know what to fix. For more on this, see What Is JavaScript?

Level Up: What to Add Next

Your blog is live. Here's how to make it even better — each of these is its own prompt session:

📧 Email Signup Form

Add a "Subscribe to my blog" form using Buttondown (free) or Mailchimp. Prompt: "Add an email signup form before the footer that sends to [your Buttondown/Mailchimp form action URL]."

🔍 SEO Meta Tags

Add Open Graph and Twitter Card meta tags so your posts look good when shared on social media. Prompt: "Add Open Graph and Twitter Card meta tags to all my HTML files with appropriate titles, descriptions, and a default image."

📊 Analytics

Add Plausible or Fathom (privacy-friendly analytics) to see who visits your blog. Both have free tiers and take one script tag to install.

🏷️ Tags and Categories

Organize posts by topic. Prompt: "Add a tags system — each post card shows tags like 'AI Tools', 'Tutorial', 'Reflection'. Add a tags page that lists all posts for each tag."

What to Learn Next

You just built a real website from scratch. That's not nothing — that's the foundation for everything else. Here's where to go from here:

Frequently Asked Questions

Can I build a blog with AI if I have zero coding experience?

Absolutely. This entire tutorial is written for people with no coding background. You describe what you want in plain English, and AI tools like Cursor or Claude write the code. You'll have a working blog with multiple posts deployed to a live URL in 2–4 hours — no programming knowledge required. The AI handles the syntax; you handle the ideas and content.

What's the best AI tool for building a blog from scratch?

Cursor is the best choice for this project. It's a code editor with AI built right in — you can see your files, preview changes, and iterate fast without switching between apps. Claude (via claude.ai) is great for generating individual files if you prefer working in a separate text editor. ChatGPT works too but is better for planning than generating full file structures. For complete beginners, start with Cursor — it handles the full workflow in one place.

Should I use WordPress instead of building a blog from scratch with AI?

If you just want a blog running in 10 minutes and never want to think about the code, WordPress is fine. But if you want to understand what you're building, learn web fundamentals, have complete control over every pixel, and pay nothing for hosting — building from scratch with AI is the better path. You'll end up with a faster site (no PHP, no database, no plugins), free hosting on Vercel, and real skills you can apply to future projects. Plus, you'll actually understand how websites work.

How long does it take to build a blog with AI tools?

A working blog with a homepage, 3 posts, an about page, and responsive design takes 2–4 hours for a complete beginner. Deploying to Vercel takes 5 minutes. Most of that time is making content and design decisions — AI generates the actual code in seconds. If you've already done one project with AI (like a portfolio), you can build a blog in 1–2 hours. Budget a weekend afternoon and you'll be impressed with what you ship.

Do I need to buy hosting or a domain to publish my blog?

No. Vercel and Netlify both offer free hosting for static sites — your blog will be live at a URL like yourblog.vercel.app with automatic HTTPS, free forever. A custom domain (yourblog.com) costs $10–15/year through registrars like Namecheap or Cloudflare, but it's completely optional. Start with the free Vercel URL, share your blog, get feedback, and add a custom domain when you're ready to invest.