Continuous Deployment for Static HTML

Technical Deep Dive & Specifications

Static Hosting Platform Comparison Matrix

Edge Security Headers Configuration (_headers)

Static site hosts like Cloudflare Pages and Netlify allow you to define HTTP response headers using a declarative _headers file placed in your distribution output folder (dist/_headers):

# Apply security and caching headers to all routes
/*
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: camera=(), microphone=(), geolocation=()
  Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
  Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self';

# Immutable Caching for Hashed Assets
/assets/*
  Cache-Control: public, max-age=31536000, immutable

# Fresh Caching for HTML Entry Points
/*.html
  Cache-Control: public, max-age=0, must-revalidate

Static Routing & SPA Fallbacks (_redirects)

To handle legacy URL migrations and Single-Page Application client-side routing, define rules in dist/_redirects:

# 1. 301 Permanent Redirects for SEO migrations
/old-curriculum/html-basics    /curriculum/foundations    301
/blog/legacy-article           /posts/modern-tooling      301

# 2. Single-Page Application (SPA) Fallback Rewrite
# Serves index.html with a 200 status code for any un-matched route
/dashboard/*                   /dashboard/index.html      200

💻 Interactive Code Playground

Starter Code: Production CI/CD Workflow with Quality Gates

1. GitHub Actions Workflow (.github/workflows/deploy.yml)

2. HTMLHint Configuration File (.htmlhintrc)

Line-by-Line Code Breakdown

• deploy.yml Lines 3–9: Configures triggers. Every pull request triggers verification; only pushes merged into main trigger live deployments.
• deploy.yml Lines 19–23 (actions/setup-node@v4): Caches npm package downloads based on package-lock.json, reducing CI pipeline run times from 2 minutes to 15 seconds.
• deploy.yml Line 29 (npx htmlhint): Parses all source HTML against strict standards rules (e.g. enforcing lowercase tags, unique IDs, and required image alt tags). If a developer commits invalid HTML, CI fails immediately.
• deploy.yml Line 36 (npx hyperlink): Parses all anchor <a href="..."> tags and image <img src="..."> tags in the compiled output. If any link returns a 404, the build is blocked.
• deploy.yml Lines 39–44 (cloudflare/wrangler-action): Uses Cloudflare's official CLI action to upload the compiled dist/ artifacts directly to Cloudflare's global edge network.

name: Production CI/CD Deployment Pipeline

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  validate-and-build:
    name: Lint, Test & Build Static Site
    runs-on: ubuntu-latest

    steps:
      # Step 1: Check out source code repository
      - name: Checkout Repository
        uses: actions/checkout@v4

      # Step 2: Set up Node.js with caching
      - name: Setup Node.js 20.x
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      # Step 3: Install verified dependencies
      - name: Install Dependencies
        run: npm ci

      # Step 4: Quality Gate - HTML Syntax Validation
      - name: Run HTML5 Linter
        run: npx htmlhint "src/**/*.html"

      # Step 5: Execute Production Build Pipeline
      - name: Build Application Artifacts
        run: npm run build

      # Step 6: Quality Gate - Verify No Broken Internal Links
      - name: Audit Broken Links
        run: npx hyperlink --canonical "https://example.com" dist/index.html

      # Step 7: Deploy to Cloudflare Pages (Production on main branch)
      - name: Deploy to Cloudflare Pages
        if: github.ref == 'refs/heads/main' && github.event_name == 'push'
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy dist --project-name="acme-portal" --branch="main"

{
  "tagname-lowercase": true,
  "attr-lowercase": true,
  "attr-value-double-quotes": true,
  "doctype-first": true,
  "tag-pair": true,
  "spec-char-escape": true,
  "id-unique": true,
  "src-not-empty": true,
  "attr-no-duplication": true,
  "alt-require": true,
  "doctype-html5": true
}