Developers · AI Programming

A Plain-HTML Developer Blog Built by Prompting an AI Coding Tool

By intQ7 · Jul 12, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

The process shows how a non-trivial, multi-section static site can be produced entirely by prompting an AI coding tool, with the developer acting as reviewer and refiner rather than author. For anyone who finds static-site generators overkill, this is a reproducible path to a live, good-looking personal page with no framework overhead.

Summary

Starting from a blank project, a developer prompted AtomCode to generate a full personal blog with a dark theme, CSS-variable-driven light/dark mode toggle, and sections for skills, projects, and work history. The site uses only HTML, CSS, and vanilla JavaScript, with IntersectionObserver for scroll-triggered animations and localStorage to persist theme preferences. Deployment targets GitHub Pages, chosen over Vercel and Netlify for its zero-cost, zero-maintenance static hosting. The writeup includes the exact prompts used, a project file tree, and fixes for common deployment snags like Jekyll build failures and git push timeouts.

Takeaways

— AtomCode generated a complete personal blog from a series of natural-language prompts, starting with “Help me build a personal blog.”

— The site uses no frameworks or build tools — just HTML5, CSS3, and vanilla JavaScript.

— A light/dark theme toggle is implemented with CSS custom properties and a `:root.light` override, persisted via localStorage.

— Scroll-triggered animations (number counters, progress bars) rely on the IntersectionObserver API.

— GitHub Pages was selected over Vercel, Netlify, and self-hosted servers for its free CDN, zero maintenance, and automatic deploy-on-push.

— Deployment pitfalls included Jekyll build failures on pure HTML sites (fixed with a `.nojekyll` file) and git push timeouts (worked around with the GitHub Contents API).

Conclusions

AI coding tools are shifting the role of the developer from line-by-line author to prompt engineer and QA reviewer, even for frontend work that would normally require hand-coding CSS and JS interactions.

The choice of raw HTML/CSS/JS over a static-site generator is notable: it keeps the output simple enough for an AI to generate reliably and for a human to audit quickly.

Persisting theme preference in localStorage and using IntersectionObserver for animations are small touches that give the site a polished feel without adding dependencies.

Concepts & terms

IntersectionObserver

A browser API that asynchronously observes changes in the intersection of a target element with an ancestor viewport, commonly used to trigger animations or lazy-load content when elements scroll into view.

CSS Custom Properties (Variables)

Properties defined with a `--` prefix (e.g., `--primary-color`) that can be reused throughout a stylesheet and updated dynamically, making theme switching straightforward by redefining values under a different selector like `:root.light`.

.nojekyll

An empty file placed in the root of a GitHub Pages repository that tells GitHub to skip Jekyll processing, necessary when deploying plain HTML/CSS/JS sites that don't use Jekyll templating.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗