Web Developer, Visual Workflow
The publishing pipeline from content studio output to a live website. Content Studio hands off, Web Developer builds and indexes, then the user ships. Four phases, nine steps, and per-site context that teaches the system how to build for each stack.
Web Developer
Blog publishing workflow, from content studio output to live website
The Pipeline
Content Studio
/studio produces
blog.md, seo.md, social.md, card.png, approved content ready to publish
Web Developer
/publish builds
Optimizes images, builds HTML/JSX, updates index + nav, commits to git
User
bash push.sh
User runs deploy command from terminal. Vercel auto-deploys from GitHub.
Invoke
/publish or /publish caio-coach day-8-the-content-studio→
Determine
Which site? · Which content slug?
Publishing Workflow
Gather
01
Locate Content
Find blog.md + seo.md in content-studio/{project}/content/{slug}/
02
Read & Parse
Extract title, body, meta tags, schema, keywords, hero image
Build
03
Optimize Image
Convert to WebP via sips, max 1200px wide, under 200KB
04
Build Page
Build full page using site template + component patterns. OG tags, schema, nav, content, footer.
Index
05
Update Listing
Insert new post card at top of blog index page
06
Update Nav Chain
Add to nav-index.md. Update prev/next links.
07
Patch Previous
Update previous post's next link to point here
Ship
08
Git Commit
Stage explicit files only. Commit: blog: publish "{title}"
09
Handoff
Tell user to run deploy command. Never push automatically.
Knowledge Stored Per Site
Each site is different. These context files teach the web developer how to build for that specific site.
site-config.md
Tech stack, file paths, domain, git remote, deploy command
Where to write files and how to ship
blog-architecture.md
How blog posts work, HTML files? JSON? JSX components?
Each site has a completely different build process
template-reference.html
An annotated real blog post from this site
Study the actual pattern, not a generic template
component-patterns.md
How markdown maps to this site's specific HTML/JSX
A blockquote becomes different code on every site
nav-index.md
Ordered list of published posts for prev/next chain
Single source of truth for navigation
style-guide.md
Design tokens, CSS classes, brand rules
Or pointer to existing guide in the website project
Sites
CAIO Coach
Next.js 16
App Router on Vercel. Inter + JetBrains Mono. shadcn/ui.
Building now
AIO Website
Next.js 16
App Router, Supabase backend. DM Sans font. Vercel deploy.
Future
Dave Hajdu
Next.js 16 + JSON
Blog data in JSON, rendered via dynamic routes. Vercel deploy.
Future
Edge8
Static HTML
Bare HTML in public/. Minimal structure. Vercel deploy.
Future
Output, written to the actual website project
Nothing is saved in the web-developer folder. All output goes to the website project in Code Projects.
{slug}.html
Full blog post page
{slug}.webp
Optimized hero image
index.html
Updated blog listing
{prev-post}.html
Previous post (next link patched)
Legend
Image optimization step
Template-driven build step
Deploy handoff