From idea to live on aiofficer.com. A human-AI workflow where the AIO creates the content and Claude handles the rest.
Quick Summary
- Four-stage pipeline: create, approve, build, log
- Human-led content creation, Claude-automated publishing
- Images optimized to WebP, renamed, alt-tagged
- Git commit staged in Cowork, push from Mac terminal
The Four-Stage Pipeline
Phase 1
Content Creation
- Routine weekly schedule or ad hoc post
- Draft written in Dave's World Posts folder
- Folder named YYYY-MM-DD Post Title
- Iterated until the AIO is satisfied
Phase 2
Content Approval
- AIO reviews and approves draft for publishing
- Real photos dropped into the source folder
- Claude Cowork told: "Photos are in. Build the post."
Phase 3
Website Creation
- Images optimized to WebP, renamed, resized
- Post HTML built with images at break points
- Blog index updated, new card added
- Git commit staged, push queued
Phase 4
Log and Done
- Entry written to Blog_Publishing_Log.md
- Slug, images, placement, commit hash recorded
- Any issues noted for the next session
- Post live at aiofficer.com/blog/
What Claude Does in Stage 3
1
Image Optimization
Raw iPhone photos in, web-ready WebP out.
Reads source images from the post's folder in Dave's World Posts
Resizes to max 1200px wide, converts to WebP at 85% quality
Renames descriptively:
topic-keywords-year.webpWrites keyword-rich alt tags connecting the image to the post topic
Saves to
blog/posts/images/[post-slug]/2
Post Construction
HTML built to the AIO blog style guide.
Topbar nav, post hero, meta section, article, FAQ, footer
Images inserted at logical break points, not forced as a hero
Post type rules: listicle gets 2 inline images; narrative can have a hero
Blog index card added with title, date, category tag, excerpt, and link
3
Quality Checks
Runs before staging for git.
Images load correctly with correct relative paths
Alt tags describe the image and connect to the post topic
File names are lowercase with hyphens, no spaces
Topbar nav links use correct relative paths from the post folder
No social share buttons in the post
4
Publish Log
Every post gets a log entry.
Post slug, category, publish date
Images: filename, description, where it was placed in the article
Commit hash and push status
Any manual fixes or issues noted for future sessions
Git workflow
Claude runs git add and git commit directly from Cowork. The final git push origin main runs from the Mac terminal in one command because the Cowork sandbox does not have outbound SSH access to GitHub. Everything else, optimization, HTML, index update, staging, is fully automated.
File Locations
Source content and raw photos:
Dave's World Posts / YYYY-MM-DD [Title] /Optimized images:
website/blog/posts/images/[post-slug]/Post HTML file:
website/blog/posts/[post-slug].htmlBlog index:
website/blog/index.htmlPublish log:
context/Blog_Publishing_Log.mdGit repo root (Mac):
/Users/caio/Documents/Code/aio-content-production/websiteHow We Publish
AI Officer Institute. Human creates, Claude ships.