Mar 1, 2026

Your First Assignment

This is your homework. By the end of it you will have a real website, live on your own domain, automatically deployed every time you push code to GitHub. The interesting part: you will do almost none of the legwork yourself. Claude Code will do the research, write the configuration, set up the repository, and guide you through the parts only you can click.

Your job is to make decisions and press buttons in browser dashboards. Claude Code handles everything else.

What you will end up with

A domain you own (e.g. yourname.com)
A static blog built with a modern framework
Code hosted on GitHub with a CI check on every push
Automatic deploys to a hosting provider whenever you push to main
HTTPS working automatically, no manual certificate management

Total recurring cost: $0/month (plus whatever your domain costs per year, typically $10–15).

Before you start

You need accounts on four services. All are free to sign up.

Service	Purpose	URL
Anthropic	Run Claude Code	claude.ai
GitHub	Host your code	github.com
Cloudflare	Manage your domain’s DNS	cloudflare.com
Render	Host and deploy your website	render.com

You also need a domain. If you do not have one yet, buy it anywhere (Namecheap, Porkbun, Google Domains, etc.) and then add it to Cloudflare by following their “Add a site” flow — Cloudflare will give you nameservers to paste into your registrar. The domain does not need to be registered through Cloudflare, it just needs to point to Cloudflare’s nameservers.

Step 1 — Install Claude Code

Claude Code is a CLI tool that runs in your terminal and has access to your filesystem, can run shell commands, search the web, and talk to APIs like GitHub. It is the only tool you need to drive this entire project.

Follow the installation instructions at claude.ai/code. Once installed, launch it in an empty directory where you want your project to live:

mkdir my-blog && cd my-blog
claude

Everything from this point forward should be done by talking to Claude Code inside that session. The instructions below describe what to ask for — phrase them however feels natural, Claude Code will figure out the rest.

Step 2 — Research your stack

Before writing any code, ask Claude Code to research your options and explain them to you. A good starting prompt:

“I want to build a static blog and deploy it to a hosting provider. I have a domain on Cloudflare. Research what static site frameworks work well for a blog, what hosting options exist that have a free tier and support custom domains with automatic HTTPS, and explain the trade-offs. I’m open to suggestions.”

Claude Code will search the web, compare options, and come back with a recommendation. Read it. Ask follow-up questions if anything is unclear. When you are ready, tell it which direction you want to go.

What Claude Code will likely recommend:

Framework: Astro — ships zero JavaScript by default, has native Markdown support, and outputs plain HTML files that are trivially cheap to host
Hosting: Render — free static site hosting with automatic deploys from GitHub, supports custom domains and auto-issues TLS certificates. Vercel is a solid alternative if you want to explore that instead; the tradeoff is that Render can also host a backend later (Node, Python, etc.) if you ever need one, while Vercel is more frontend-focused

Step 3 — Set up the GitHub repository

Ask Claude Code to create the repository for you:

“Create a new GitHub repository called [your-repo-name] under my account [your-github-username]. Initialize a new Astro blog project in this directory, commit everything, and push it.”

Claude Code will:

Authenticate with the GitHub CLI
Create the repo via the GitHub API
Scaffold the Astro project
Write a render.yaml Blueprint file so your hosting config lives in version control
Set up a .github/workflows/ci.yml that runs a build check on every push and pull request
Make the initial commit and push to main

If it hits any snags (expired tokens, missing tools) it will tell you what to do — usually just running a single auth command in your terminal.

Step 4 — Connect Render to GitHub

This step happens in your browser. Claude Code cannot click buttons on your behalf, but it can tell you exactly what to do:

“Walk me through connecting my GitHub repository to Render.com and creating a Static Site service.”

The short version:

Log in to render.com
Click New → Static Site
Authorize the Render GitHub App and select your repository
Set build command to npm run build and publish directory to dist
Add an environment variable: NODE_VERSION = 20.3.0
Click Create Static Site

Render will run your first build. When it goes green, your site is live on a *.onrender.com subdomain.

Step 5 — Point your domain at Render

This is the most technical-feeling step, but Claude Code will walk you through it precisely. Ask it:

“My site is deployed on Render at [your-service-name].onrender.com. I own [yourdomain.com] and it’s on Cloudflare. Walk me through setting up the custom domain so that newolabs.com serves my Render site with HTTPS.”

Claude Code will give you the exact sequence. The key things that will happen:

Add yourdomain.com and www.yourdomain.com as custom domains in the Render dashboard
In Cloudflare, set the SSL/TLS mode to Full (not Flexible — Flexible breaks things)
Add two CNAME records in Cloudflare pointing both the root and www to your Render subdomain, with the proxy disabled (gray cloud) initially
Wait for Render to verify the domain and issue the TLS certificate — usually a few minutes
Optionally re-enable the Cloudflare proxy (orange cloud) after the cert is issued

Once the Render dashboard shows the domain as Verified, your site is live at your domain with HTTPS.

Step 6 — Write your first post

Back in Claude Code:

“Delete the sample blog posts and write me a first real post. The post should be [describe what you want it to be about].”

Claude Code will delete the placeholder content, write your post as a Markdown file in src/content/blog/, commit it, and push. Render detects the push and redeploys automatically — your post is live within a minute.

Step 7 — Add a hero image to your post

Every blog post can have a hero image displayed at the top. Claude Code cannot generate images, but it can wire one up once you have it.

Generate an image using a tool like Ideogram, Adobe Firefly, or DALL-E — describe what you want and download the result. Then drop the file into src/assets/ in your project.

Tell Claude Code:

“I added an image called [filename.png] to src/assets/. Set it as the hero image for my latest blog post.”

Claude Code will add the heroImage field to the post’s frontmatter:

---
title: 'My Post'
description: '...'
pubDate: '2026-03-01'
heroImage: '../../assets/filename.png'
---

Astro will automatically optimise the image (resize, compress, convert to WebP) at build time — you do not need to do anything else.

The workflow going forward

Every time you want to publish something new:

cd my-blog
claude

Then tell it what you want:

“Write a new blog post about [topic].”

Or write the Markdown file yourself and just ask Claude Code to commit and push it.

Checklist

Good luck. Ask Claude Code when you get stuck — it has read the documentation so you do not have to.