Module 3: Deploy Live, Build Agents, Connect APIs — The Claude Code Skills Nobody Else Is Teaching
Claude Code Course · 3-Module Series
Module 1
Beginner — Setup & First Commands
Module 2
Intermediate — Real Projects & Workflows
Module 3
Advanced — Agents, APIs & Deployment
Claude Code — Module 3: Advanced Agents, API Integration & Deploying a Live Website
This is where Claude Code goes from a tool you use to a system that works for you. Deploy a live site, automate your publishing workflow, build AI agents, and connect external APIs — all without a DevOps background or a development team.
Modules 1 and 2 covered installation, projects, Git, debugging, and multi-file workflows. Module 3 is about taking everything further: getting your work in front of real people, building automations that run without you touching them, and using Claude Code in ways most people haven't discovered yet.
By the end of this module you'll have a live website deployed, an automated content pipeline running, and a working Claude Code agent that handles tasks on its own. No prior DevOps knowledge needed.
Deploy Your Site Live — Three Options
You've built something. Now get it online. There are three solid deployment options for sites built with Claude Code, depending on what you're building.
Option A
GitHub Pages — Free, Permanent, Zero Config
If your project is a static site (HTML, CSS, JS — no server needed), GitHub Pages deploys it free in under five minutes. Claude Code handles the entire setup.
Claude Code — GitHub Pages Deploy
Set up GitHub Pages deployment for this project. 1. Make sure all files are committed to the main branch 2. Create a gh-pages branch from main 3. Configure the project so index.html serves as the homepage 4. Push everything to GitHub My GitHub repo URL is: https://github.com/yourusername/your-repo After pushing, my site will be live at: https://yourusername.github.io/your-repo
After running this, go to your repo on GitHub → Settings → Pages → select main branch as source. Done.
Option B
Netlify — Automatic Deploys on Every Git Push
Netlify is the best option if you want your site to update automatically every time you push code to GitHub. Once connected, every Claude Code session that ends with a commit and push also deploys your site. No extra steps.
Claude Code — Netlify Setup
Create a netlify.toml configuration file for this project. Set: - Build command: none (static site, no build step) - Publish directory: . (root folder) - Node version: 20 Also create a _redirects file that: - Redirects /blog/* to /index.html for client-side routing - Returns 404.html for unmatched routes - Forces HTTPS on all pages Commit both files: "Netlify configuration added"
After committing, go to netlify.com → New Site → Connect to GitHub → select your repo. Auto-deploys from there.
Once Netlify is connected: every time you make changes with Claude Code, commit, and push — your live site updates within 30 seconds. The workflow becomes: change → commit → push → live.
Option C
Custom Domain — Connect Your Own .com
Whether you use GitHub Pages or Netlify, connecting a custom domain is straightforward. Claude Code generates the exact DNS records you need.
Claude Code — Custom Domain
I want to connect the custom domain kodexon.com to this site hosted on Netlify. Give me: 1. The exact DNS records to add at my domain registrar (A records, CNAME records, or both — whatever Netlify requires) 2. What to set as the custom domain inside Netlify settings 3. How long DNS propagation typically takes 4. How to verify it's working once it propagates Also update the canonical URLs and sitemap in the project to use https://kodexon.com instead of the Netlify subdomain.
Automated Publishing Workflows
This is where Claude Code shifts from tool to system. Instead of running sessions manually every time you want to publish something, you build automated pipelines that handle the repetitive work for you.
Workflow 1
Auto-Generate Blog Post HTML From a Markdown File
Write your post in Markdown (plain text with simple formatting). Claude Code converts it to fully formatted, SEO-ready Blogger HTML automatically — every time.
Claude Code — Markdown to Blogger HTML
Create a script called convert-post.sh that: 1. Reads a Markdown file I specify (e.g., ./drafts/my-post.md) 2. Calls Claude Code to convert it to formatted Blogger HTML using the post template style from our project 3. Adds all required meta tags, schema markup, and share buttons 4. Saves the output as ./posts/[filename].html 5. Prints a summary of what was generated The script should be runnable like: bash convert-post.sh drafts/my-post.md Also create a sample markdown file at drafts/sample-post.md so I can test the script immediately.
Write in Markdown anywhere (Notion, Obsidian, a notes app). Drop the file in /drafts and run the script. Fully formatted post in seconds.
Workflow 2
Batch SEO Audit — Run on Every Post at Once
Instead of auditing posts one by one, run this on your entire /posts folder:
Claude Code — Batch SEO Audit
Audit every HTML file in the /posts folder for SEO issues. For each file, check and report: - Missing or duplicate title tags - Missing meta descriptions (or descriptions over 160 chars) - Missing alt text on images - Missing canonical URL - H1 count (should be exactly 1) - Internal links that point to non-existent pages Output a summary table: filename | issues found | severity Then fix all issues rated "high severity" automatically.
Workflow 3
Auto-Update Internal Links When URLs Change
When a post URL changes, internal links across your whole site break. Claude Code fixes all of them in one pass:
Claude Code — Link Updater
The URL for my ChatGPT tutorial changed from: /2025/01/chatgpt-beginners-guide.html to: /chatgpt-complete-guide-2026.html Find every instance of the old URL across all HTML files in this project and update it to the new URL. Then check for any other internal links pointing to pages that don't exist in this project and report them.
The goal isn't to use Claude Code for everything. It's to use Claude Code to build the systems that handle everything — so you can focus on what only you can do.
Building Claude Code Agents
Claude Code can run in agent mode — where it takes a high-level goal, breaks it into steps, executes each step, checks its own work, and keeps going until the task is complete. This is the most advanced use of Claude Code, and it's where the biggest time savings come from.
Agent Build 1
Content Research and Outline Agent
Give Claude Code a blog post topic and let it do the full research and outlining automatically:
Claude Code — Content Research Agent
Act as a content research agent. I'll give you a blog post topic
and you'll complete this entire workflow without stopping:
Topic: "Best Claude Code prompts for building websites in 2026"
Step 1: Analyze our existing posts in /posts to understand our
writing style, depth level, and section structure
Step 2: Create a detailed outline with H2 and H3 headings,
estimated word counts per section, and key points to cover
Step 3: Write a 150-character SEO meta description
Step 4: Generate 5 headline variations (viral, question, how-to,
listicle, and bold claim format)
Step 5: List 10 internal linking opportunities to existing posts
Step 6: Save everything to /drafts/claude-code-prompts-2026-brief.md
Report back when the full brief is ready.
This is an agent prompt — Claude Code runs all 6 steps sequentially without you having to prompt each one. One message, full research brief delivered.
Agent Build 2
Site Health Monitor Agent
Run this periodically to catch problems before they affect your readers:
Claude Code — Site Health Agent
Run a complete site health check on this project. Work through every step and don't stop until all checks are complete: STRUCTURE CHECKS: - Every HTML file has a valid doctype and charset - All linked CSS and JS files actually exist - No empty href or src attributes SEO CHECKS: - Title tags: present, unique, 50-60 chars - Meta descriptions: present, unique, under 160 chars - All images have alt text - Canonical tags present and correct PERFORMANCE CHECKS: - Images without width/height attributes (causes layout shift) - Render-blocking scripts in head without defer or async - CSS files over 50KB (flag for review) ACCESSIBILITY CHECKS: - All buttons have accessible labels - All links have descriptive text (not "click here") - Heading hierarchy is logical (no H3 before H2) Output: a prioritized list of issues found, then fix all critical and high issues automatically. Save a health report to /reports/site-health-[date].md
Agent Build 3
New Post Publishing Agent
From draft to published in one agent run:
Claude Code — Publishing Agent
Publishing agent — process this draft post end to end: Draft file: /drafts/gemini-vs-chatgpt-2026.md Complete every step without stopping: 1. Convert Markdown to Kodexon-style Blogger HTML (match the template structure in /posts/template.html) 2. Add all SEO: title tag, meta description, Open Graph, Twitter Card, canonical URL, JSON-LD BlogPosting schema 3. Add share buttons, author box, FAQ accordion if applicable 4. Insert 3 internal links to relevant existing posts 5. Generate: viral hook title (5 variations), 150-char SEO description, LinkedIn post, Facebook post, Instagram caption 6. Save the HTML to /posts/gemini-vs-chatgpt-2026.html 7. Update the homepage (index.html) to include this post in the latest posts grid 8. Commit everything: "Published: Gemini vs ChatGPT 2026" Report what was done and flag anything needing manual review.
This is a full publishing pipeline in one prompt. Write the draft, run the agent, push to GitHub, Netlify deploys automatically. That's the full workflow.
Integrating External APIs
Claude Code can build integrations with external services — analytics, email platforms, CRMs, AI APIs. Here are three practical integrations for a content blog.
Integration 1
Email Subscriber Form — Connected to Mailchimp
Claude Code — Mailchimp Integration
Build a newsletter signup form that connects to Mailchimp. Requirements: - Styled input field + submit button matching Kodexon's teal/green palette - Client-side email validation before submission - Calls Mailchimp's embedded form URL (I'll provide the URL) - Shows: loading state during submission, success message on subscribe, error message with friendly copy on failure - Works without a page reload (AJAX submission) - GDPR notice below the form: "No spam. Unsubscribe anytime." Mailchimp form action URL: [PASTE YOUR MAILCHIMP URL HERE] Add this form to the newsletter section in index.html and also as the sidebar widget in post pages.
Integration 2
Google Analytics 4 — Proper Event Tracking
Claude Code — GA4 Setup
Add Google Analytics 4 to every page in this project. GA4 Measurement ID: G-XXXXXXXXXX Include these custom events beyond standard pageviews: - scroll_depth: fire at 25%, 50%, 75%, 100% of post body - copy_prompt: fire when any "Copy Prompt" button is clicked, include the prompt label as event parameter - share_click: fire when any share button is clicked, include platform name (twitter, facebook, linkedin, copy) - newsletter_submit: fire on successful form submission - toc_click: fire when any table of contents link is clicked Implement with consent mode — only fire events after the user accepts analytics cookies in our cookie banner.
Integration 3
Build an AI-Powered Search Feature Using the Anthropic API
Claude Code — AI Search Feature
Build an AI-powered site search feature that: FRONTEND (search-overlay in index.html): - Search input that appears on Ctrl+K keypress - Results appear below the input as user types (300ms debounce) - Shows post title, category, and excerpt for each result - Keyboard navigation through results (arrow keys + enter) - Click a result → navigate to that post BACKEND SIMULATION (for static site): - Create a search-index.json that lists all posts with: title, url, category, tags, and first 200 chars of content - Search function reads this JSON and filters client-side - For "smart search" (semantic matches): show a "Ask AI" option that sends the query to a serverless function SERVERLESS FUNCTION (netlify/functions/ai-search.js): - Receives search query - Calls Anthropic Claude API with the post index as context - Returns the 3 most relevant posts with explanations - Handles CORS and rate limiting Style the search overlay to match our existing design system.
This turns a basic blog search into a feature that actually understands what readers are looking for — not just keyword matching.
Advanced Project — Launch a Complete Blog From Scratch
This is your final module project. You're going to use everything from all three modules to launch a fully functional, live blog — from empty folder to published site — in a single extended Claude Code session.
Final Project
The Complete Launch Prompt
Run this in a fresh project folder. This is a multi-step agent prompt that builds and launches an entire blog:
Claude Code — Complete Blog Launch Agent
Build and prepare a complete blog for deployment. Work through every step sequentially. Report progress after each major step. BLOG DETAILS: Name: [Your Blog Name] Niche: [Your Topic — e.g., AI tutorials for beginners] Author: [Your Name] Color: [Primary color hex — e.g., #10B981] STEP 1 — PROJECT SETUP: Initialize Git. Create full file structure: /index.html, /styles/, /js/, /posts/, /drafts/, /assets/, CLAUDE.md, README.md, netlify.toml, .gitignore Initial commit: "Project initialized" STEP 2 — HOMEPAGE: Build index.html with hero section, navigation, post grid (6 cards), AI tools category section, newsletter form, full footer. Fully responsive. Commit: "Homepage complete" STEP 3 — POST TEMPLATE: Build post-template.html with all features from Module 2 practice: reading progress, TOC, share buttons, author box, related posts, FAQ accordion, sidebar. Commit: "Post template complete" STEP 4 — 3 SAMPLE POSTS: Create 3 complete blog posts as HTML files in /posts/ based on the niche above. Each post: 800+ words, proper headings, code blocks where relevant, FAQs, fully formatted. Commit: "Sample posts added" STEP 5 — SEO PASS: Full SEO on all pages — meta tags, Open Graph, JSON-LD schemas, sitemap.xml, robots.txt, canonical URLs. Commit: "SEO complete" STEP 6 — SEARCH INDEX: Generate search-index.json from all posts. Build the search overlay feature in index.html. Commit: "Search added" STEP 7 — FINAL REVIEW: Run site health check. Fix all critical issues. Final commit: "Launch ready — [Blog Name] v1.0" Report a launch summary: what was built, file count, post count, features included, and next recommended steps.
This is a 30-60 minute agent session. Claude Code will ask for approval on major decisions. Review each step as it completes.
After Claude Code finishes: Push to GitHub, connect to Netlify, add your custom domain. Your blog is live. Everything from that point forward — new posts, design changes, SEO fixes — gets done through Claude Code sessions that end with a commit and push.
Advanced Prompt Techniques — What Separates Experts
Expert Prompt Library
# 1. Force a plan-first approach Before writing any code, write a detailed plan. Include: what files you'll change, what you'll add, what risks exist. Wait for my approval before starting. # 2. Set output constraints Build this feature. Maximum 50 lines of JavaScript. No external libraries. No inline styles. # 3. Generate multiple variants Build 3 different versions of this hero section — minimal, bold, and editorial. Label each clearly. I'll pick one to keep. # 4. Test your own output After building this form, write 5 test cases for it and run them mentally. Report any failures you find. # 5. Explain the tradeoffs I need to add comments on blog posts. Give me 3 different approaches (Disqus, native HTML, third-party), explain the tradeoffs of each, and recommend one for a small blog. # 6. Constraint-driven creativity Redesign the homepage header with only CSS changes — no HTML modifications. Make it look dramatically different. # 7. Reverse engineer a pattern Look at the card design in posts/template.html. Extract the exact pattern and apply it to build a "tools directory" page in the same style. # 8. Build for scale This project currently has 10 posts. Refactor the homepage to work well with 200+ posts — pagination, filtering by category, search integration. # 9. Simulate a user Pretend you are a first-time visitor to this blog. Navigate through it mentally and report everything that is confusing, missing, or doesn't work as expected. # 10. Write the handoff docs Write complete documentation for this project as if handing it to a developer who has never seen it. Include: setup, architecture, how to add posts, how to deploy, and common customizations.
Module 3 — What You've Learned
- Deployment: GitHub Pages, Netlify auto-deploy, custom domain DNS setup
- Automated workflows: Markdown-to-HTML conversion, batch SEO audits, link updaters
- Agents: Content research agent, site health monitor, full publishing pipeline agent
- API integrations: Mailchimp forms, GA4 event tracking, Anthropic-powered search
- Final project: Complete blog launch from empty folder to live site in one agent session
- Expert prompts: 10 advanced techniques that separate power users from casual users
Course Complete
You've Finished the Claude Code Masterclass
Three modules. From installing a tool to launching a live site with automated workflows and AI-powered features. Everything you need to build real things without a development team.
More Claude Code Tutorials →