~/TechPurAI
~/tutorials/html-from-scratch/publishing-the-site-capstone
intermediate·part 22 of 22·3 min read

Publishing the site: the capstone

Updated Aug 16, 2026HTML

Twenty-one parts have built one real, complete site — structurally sound, genuinely accessible, and SEO-ready, entirely in hand-written HTML with no framework or build tool involved. This capstone brings it together and covers the real, practical last step: getting it actually live.

The complete, real project structure

text
bright-leaf-coffee/
├── index.html              → part 8's homepage, part 14–16's <head>
├── subscriptions/
│   └── index.html          → part 21, using part 9's table
├── contact/
│   └── index.html          → part 10 & 11's real forms
├── images/                 → part 6's responsive, alt-tagged images
├── videos/                 → part 12's captioned video
├── favicon.ico, icon.svg   → part 14
└── robots.txt, sitemap.xml → covered below, new in this capstone

robots.txt: telling crawlers what's real, public content

text
User-agent: *
Allow: /
Sitemap: https://brightleafcoffee.com/sitemap.xml

A plain text file at the real site's root, robots.txt tells crawlers which parts of the site they're welcome to index — Allow: / here permits everything, appropriate for a small marketing site with no private or duplicate content that needs excluding. This connects directly to the SEO series' own crawlability guidance, covering exactly this file in more depth.

sitemap.xml: the real, machine-readable page list

html
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url><loc>https://brightleafcoffee.com/</loc></url>
  <url><loc>https://brightleafcoffee.com/subscriptions</loc></url>
  <url><loc>https://brightleafcoffee.com/contact</loc></url>
</urlset>

Distinct from part 21's real, visible HTML sitemap page for actual visitors, this XML file is specifically for search engines — a direct, complete, machine-readable list of every real URL on the site, submitted through a tool like Google Search Console to help ensure every page is actually discovered and indexed.

A real, final pre-launch checklist

text
[ ] Every page has a unique, accurate <title> and meta description (part 14)
[ ] Every image has real, descriptive alt text (part 6)
[ ] Every form field has a real, associated <label> (part 10)
[ ] Heading hierarchy is correct on every page — one h1, no skipped
    levels (part 3)
[ ] Open Graph and Twitter Card tags are set on every page (part 15)
[ ] JSON-LD structured data validates and matches real visible content
    (part 16)
[ ] Keyboard tab order and focus indicators work across every page (part 17)
[ ] robots.txt and sitemap.xml both exist and are accurate

This is directly the part 20 mistakes roundup, restated as a real, actionable list to run through before a genuine launch — the difference between a page that merely renders and one that's actually ready for real visitors, search engines, and AI systems alike.

Getting a hand-built HTML site actually live

text
1. A real static host (Netlify, Vercel, GitHub Pages, or traditional
   web hosting) — no server-side code is needed for a site this size,
   since every file here is already exactly what gets served
2. Point a real domain's DNS at the host, following that host's own
   specific instructions
3. Enable HTTPS — most modern static hosts provision a free real TLS
   certificate automatically, covered from the trust-signal angle in
   the SEO series' own HTTPS guidance

A site built entirely from plain HTML files, exactly like the one this series just built, deploys more simply than almost any other kind of real web project — there's no build step, no server runtime, no database. The files in the structure above, uploaded as-is to a static host, are the entire real, complete, production site.

Why it matters

Every technique in this series — semantic structure, real accessibility, meta tags, structured data — works identically whether the HTML is hand-written, exactly as built here, or generated by a framework like the Next.js series covers. A framework changes how the HTML gets produced; it doesn't change what makes that HTML genuinely correct. Everything learned in this series carries forward directly into any framework built on top of HTML.

That's the complete HTML series — from a first plain-text file through to a real, deployed, SEO-ready, accessible site for Bright Leaf Coffee. Combined with the SEO, Next.js, and Google Analytics series, the foundation this series built connects directly into everything else this site teaches about building and growing a real website.

VK

Vijay Kumar

Founder of TechPurAI — writing hands-on tutorials and honest tool breakdowns.

LinkedIn ↗
← previous21. Organizing a real multi-page site: file structure and the Subscriptions page