ai automation

Building Static Websites with AI

AI-Driven Static Website Architecture with Antigravity

Using AI agents (like Google Antigravity or code-generation LLMs) to build and maintain a pure static website eliminates framework churn, database overhead, and heavy build steps. However, AI models only generate clean, production-ready code when guided by deterministic prompt contracts. Without strict boundaries, models default to bloated JavaScript frameworks, unneeded CDN dependencies, and conversational fluff.

Here is a practical guide on how to write effective prompts to scaffold a static website from scratch and generate consistent, high-signal technical posts like this one.

Core Principles for Prompting AI

  • Enforce Negative Constraints: Explicitly forbid unwanted patterns (e.g., "No Tailwind, no external CDNs, no React, no conversational filler"). Negative boundaries are critical to keeping output clean.
  • Ground in Project Tokens & Templates: Provide your existing CSS custom properties (--bg-primary, --accent) and base boilerplate (posts/_template.html) so the model never invents arbitrary colors or mismatched markup.
  • Decompose Architecture into Atomic Tasks: Prompt in focused phases: first design tokens, then template structure, client interactivity, build scripts, and finally individual articles.
  • Demand Output-Only Delivery: Tell the AI to output only raw, production-ready code files or unified diffs without conversational introductions or explanations.

Prompts for Scaffolding a Static Website

Use these structured prompt blueprints when building the core foundation of a lightweight static website:

1. Generating the CSS Design System & Dark Theme

You are an expert systems frontend engineer. Build a minimalist, dark-mode-first CSS stylesheet for a technical notebook called "TroubleNow.org".

Strict Requirements:
1. Pure CSS only. No Tailwind, Sass, or external fonts/CDNs.
2. Define a complete design token system under :root using CSS custom properties:
   - Dark background: #0f141c, surface: #161d27, code blocks: #0b0f15.
   - Text colors: #e6edf3 (primary), #9da7b3 (secondary).
   - Accent color: #38bdf8 (cyan), hover: #7dd3fc.
   - System font stacks: native sans-serif for UI, JetBrains Mono/Consolas for code.
3. Provide a complete [data-theme="light"] override block with high-contrast slate colors.
4. Include styling for:
   - Responsive header with brand logo and navigation.
   - Post list rows displaying ISO date, title link, and monospace tag pills.
   - Mobile breakpoint at max-width: 640px.
5. Output ONLY the production-ready style.css content. No markdown commentary.

2. Creating a Standardized HTML Boilerplate

Create a clean, semantic HTML5 boilerplate template saved as "posts/_template.html".

Requirements:
1. Relative asset paths suitable for nested articles (../style.css, ../images/tux-logo.png, ../script.js).
2. Semantic article structure:
   - <header class="post-header"> containing post-meta (ISO date, tag pills) and <h1 class="post-title">.
   - Main article body: <div class="post-body"> placeholder.
   - Navigation footer with "Back to Index" link.
3. Accessible: include meta viewport, charset, lang attribute, and theme toggle button.
4. Output ONLY the raw HTML boilerplate file.

3. Zero-Dependency Build Automation

Write a standalone Python 3 script "build.py" that scans "posts/*.html" and automatically regenerates the post list inside "index.html".

Technical Constraints:
1. Use ONLY the Python Standard Library (os, re, sys). Zero third-party dependencies (no pip, jinja2, BeautifulSoup).
2. Extract the post title from <h1 class="post-title">, the date from <time datetime="...">, and tags from <span class="tag">.
3. Sort posts in descending chronological order (newest first).
4. Re-generate the <ul class="posts-list" id="posts-list"> block inside index.html idempotently.
5. Execution time must be under 50ms. Output ONLY the Python script.

Prompts for Writing High-Quality Technical Posts

Vague prompts like "Write a blog post about WireGuard" yield generic, conversational filler with untested or incomplete snippets. To produce high-density, accurate posts that match this blog's technical standard, use structured prompts:

1. Drafting a New Technical Post from Boilerplate

Create a new technical HTML post file located at "posts/debian-wireguard-setup.html" based on "posts/_template.html".

Article Metadata:
- Title: "How to Configure WireGuard VPN on Debian 12"
- Date: "2026-10-08"
- Tags: "debian", "networking", "vpn"

Content & Style Requirements:
1. Tone: Concise, practical sysadmin notebook. Zero conversational filler ("In this guide...", "To wrap up...").
2. Relative Links: Preserve href="../index.html", href="../style.css", and src="../script.js".
3. Content Outline:
   - 2-sentence direct problem statement.
   - Step 1: Kernel module verification and wireguard installation via apt.
   - Step 2: Private/public key generation with standard umask.
   - Step 3: Complete /etc/wireguard/wg0.conf with IPv4/IPv6 forwarding & iptables NAT rules.
   - Step 4: Systemd enablement (systemctl enable --now wg-quick@wg0).
   - Step 5: Verification using wg show.
4. Format: Wrap all terminal commands and configs in <pre><code>. Bold all configuration file paths.
5. Deliverable: Output the complete, valid HTML5 file ready to save into posts/.

2. Pruning & Polishing Existing Content

Review and optimize the technical article in "posts/my-post.html":

1. Strip out all generic introductions, introspective fluff, and repetitive summaries.
2. Verify all commands and config directives are accurate and use modern best practices.
3. Ensure all HTML characters (<, >, &) within code blocks are properly entity-escaped.
4. Confirm lowercase tags and ISO-formatted dates in <time datetime="YYYY-MM-DD">.
5. Return the clean, tightened HTML content.

The 4-Part Prompt Formula (Cheat Sheet)

When prompting an AI agsent to generate code or content for your static site, keep this checklist handy: 

[ROLE & OBJECTIVE]    "Act as an expert systems engineer. Create posts/nginx-tuning.html..."
[CONTEXT / BASE]      "Follow the structure in posts/_template.html and reuse style.css classes..."
[STRICT CONSTRAINTS]  "Pure HTML/CSS only. No external CDNs. No conversational commentary..."
[DELIVERABLE FORMAT]  "Output ONLY the production-ready code ready to be written to disk."