Building Websites with Claude Code

Over the past couple of weekends I have built and published five complete websites and a complex interactive page for this site. I had the content already handy, but all of the work of making the websites, and a substantial amount of their deployment, was handled exclusively by Claude Cowork and Claude Code.

In this post, I’ll demonstrate the approaches I used to develop the websites, as well as providing Claude skills which can be downloaded and used right out of the gate to build your own websites.

This is not as technical as it sounds, but I will also spend some time exploring what’s going on under the hood. As with any coding with AI, there’s a certain amount of risk involved, so I’d call this an intermediate-advanced article and urge you to experiment with caution.

Claude Code and Agent Teams

For the most part, I used Claude Code in these examples. When Opus 4.6 was released I upgraded to the Max ($100USD) tier to test it out, which also gives extra access to Claude Code and Cowork. Claude Code runs in the terminal and might look a little intimidating to non-coders. That’s quite possibly why it loads with a friendly looking… crab… thing.

A terminal interface displaying Claude Code version 2.1.42, welcoming the user 'Leon' with a message in green text. It includes tips for getting started and shows 'No recent activity'. An animated pink pig icon is also present.

Running in the terminal, Claude Code can be given direct access to folders and files on your hard drive. This is, of course, safety issue number one: if you don’t know what you’re doing (or even if you do, but you’re not paying attention) you can inadvertently delete files, including critical system files. I strictly use Claude Code in project folders set up for discrete tasks, rather than just letting it go rogue.

Claude Code is really good at… code. It can install other tools, including Python libraries, and it gets right to work. So, if a task involves converting a PDF to a text document, extracting data, reformatting it and producing a new Word Document, it can deploy all of the required tools to complete the task.

As of February 5th 2026, and the release of Opus 4.6, Claude Code also has the agent-teams capability. Agent teams is basically what it sounds like: Claude Code spins up a team of “agents” that can complete different parts of the task at hand, including agents for researching, writing, and reviewing code. Following Simon Willison’s example I’m defining AI Agents as follows:

An AI Agent is a semi-autonomous, Large Language Model-based application that can use other tools in a loop to complete a task.

Screenshot of Claude Code version 2.1.32 displaying the new Agent Teams feature, highlighting differences between Subagents and Agent Teams in context, communication, token usage, and task complexity. It also includes instructions for enabling the feature in settings.json.
Claude spins up some agent teams to explain how agent teams works
Screenshot of a terminal window displaying code tasks related to a software development project, including creating tasks, spawning teammates, and adding a Table of Contents sidebar.
“Spawning” apparently

With Claude Code fired up, and agent-teams ready to range across the tasks, let’s take a look at the process of putting together these websites.

Overview of the Building Process

This is a high level overview of the process using the Teaching AI Ethics site as the model. I’ll follow with examples of the completed sites, and at the end of this article will include some of the more technical nitty-gritty for anyone planning on following along.

This process actually began when I stumbled across this collection of resources from Albert Bozesan on Gumroad. Bozesan’s guide focuses on using Claude Code to move a WordPress site (like this one) into a fast-loading, static site hosted on GitHub. I don’t want to move this site, but I am interested in how GitHub can be used and the inner workings of a website project using Astro. And I’ve had a lot of ideas for websites bouncing around in my head for the past few years.

Reading through Bozesan’s advice, this seemed like something that could be adapted for building a new website out of existing content. Not moving a whole website, but creating one from the various eBooks, articles, and journals I’ve published over the years. The Teaching AI Ethics collection, started in 2023 and updated in 2026, would be the perfect test: I have thousands of words of content, and have always wanted to turn those materials into a website for educators.

So, I pared back Bozesan’s article, kept the bits I thought would be most useful, and fired up Claude Code.

Step One: Content

First of all, I created a new folder which just contained a couple of documents: the PDF versions of the 2023 and 2026 Teaching AI Ethics eBooks. I opened Claude Code in the terminal at this folder, and began with a simple prompt:

Using the books in this folder, create an Astro-based website that will be deployed on GitHub/Cloudflare. Choose your own design but avoid obvious “tech” colours and fonts. Use placeholders for images for now.

After giving permissions (frequently, since I have not turned off asking for permissions), Claude Code chewed its way through the task, creating all of the required files and folders. It produced a passable version one: enough to convince me to carry on.

Step Two: Iterate

To iterate through the website, it’s obviously helpful to be able to see the website. This can be done without publishing by asking Claude Code to start the dev server. There’s more technical info at the end of the post, but essentially this starts a version of the website running locally. From here it’s a case of asking for changes either in bulk or one at a time.

When asking for multiple changes, I found it useful to invoke agent-teams and have them running in parallel, as with the example in the Teaching AI Ethics section below. Prompts might look something like this:

Colours are not high contrast enough in the body text, and there are a few layout issues with images on the resources page. Also, swap out the text in the following areas <list areas>

Step Three: Deploy

Eventually it will look and feel like it’s done, and the only thing left is to hit send. In this case, and following Bozesan’s example, I decided to push the entire site to a GitHub repo. I then transferred domains I already owned (I am a chronic hoarder of domain names…) over to Cloudflare and created Cloudflare Pages pointed at the repos. Again, this sounds more technical than it is, and much of it can be handled directly from the terminal in Claude Code if you’re happy to authorise and connect accounts.

Step Four: Automate

Once I’d done this a few times, I knew some of the pitfalls, and a few ways to speed up the setup. This is also the perfect time to turn the process itself into a Claude “skill”, which is essentially a markdown file with instructions that can be called in any future Claude Code chat using /skill-name. I’ll include more about that in the technical part at the end.

Here are the five websites created in the past couple of weeks, each of which I’ll explain in more detail including any specific changes to the process:

Website 1: Teaching AI Ethics

The new Teaching AI Ethics website is available here. It contains all 18 of the 2023-2026 articles in full, as well as separate pages for the inquiry questions and case studies which formed the backbone of those articles. This is a project I’ve wanted to complete since 2023: getting the materials from the blog posts and books into a format that is readily usable by teachers.

Homepage of 'Teaching AI Ethics' featuring the title and description about exploring the ethical dimensions of artificial intelligence in education.
Light mode and dark mode

While developing this website, I ran a few interesting experiments with Claude Code, including a Web Content Accessibility Guidelines (WCAG) audit, a security audit, and a fact checker. These ran as simultaneous agents using the agent-team function, completing tasks in the background. They were very successful, and I now run some variation of this with every site.

Screenshot of a project task management summary, displaying a list of tasks with status updates and completion notes.
10 tasks running in the background with a final wrap-up

For the website, as with the original articles, I used images from betterimagesofai.org. These are available under a generous CC BY 4.0 license, and the team has provided a clear set of guidelines on attribution. I added the attribution guide to the project folder so Claude Code had access, and one of its agents dealt with the attribution. For the sake of completeness (and sanity) I also checked with a real life human: BIOAI’s Tania Duarte. Tania flagged a couple of issues with attribution presented as plain text and not links, which were easily corrected.

Screenshot of a webpage titled 'Teaching AI Ethics' featuring a search bar, subject categories, ethics topics, and three highlighted teaching ideas related to English, Geography, and Legal Studies.
All of the resources are now searchable and sortable

All of the resource pages and case studies – extracted from the main articles – were created by Claude Code in one of the iterations. The only content that went into the site was the two eBooks and a folder containing .png files of the images (which Claude converted to .webp to improve load times).

Like the original articles, the posts on this site, and the eBooks, the code for the website is released under a CC BY NC SA 4.0 license (or an MIT License for the Astro, JS, etc.). If you’re so inclined, you can check out the repo here.

Visit teachingaiethics.com to explore the full site.

Website 2: Teaching AI Writing

Once I’d built the TAIE website, I wanted to see if I could speed up and replicate the process. Another of my free eBooks, Teaching AI Writing seemed like a good place to find content. This time, I had Claude write its own instructions at the end of the TAIE chat, essentially summarising everything done during that process.

This website isn’t as polished as the first, but it took less than 20 minutes from idea to publication (not including the hours spent writing the articles in the first place).

Visit teachingaiwriting.com here.

Website layout showcasing 'The Writing Process' framework for teaching writing with AI, featuring sections for each stage of the writing cycle.

Website 3: Auspicious Skies

Honestly, by the time I’d made Teaching AI Ethics and Teaching AI Writing, I think I was becoming a bit manic. My mind started churning, dredging up long-forgotten ideas for websites and projects. I looked at my various domains (again… hoarder), and noticed auspiciousskies.com, registered in 2022.

I had this idea, back in the days before GenAI, of running a speculative fiction and sf journal on a platform like Discord, and decentralising the publication… somehow. Anyway, suffice it to say the idea wasn’t fully cooked. But, have domain name, will travel. Off to Claude Code with you:

A screenshot showing a programming environment with text about a fictional narrative involving a character named Khai, discussing themes of integrity, exams, and dystopian elements.

The finished site looks suitably dark and brooding, and even features some stock galaxy images in the background (correctly attributed too, thanks to the earlier experiences). Interestingly, Claude Code developed its own riff on an “AI policy” as part of the submissions – of course it is happy to accept AI generated content…

This is the only site where I attempted the build with zero context. No context existed for this idea, other than a couple of pieces of my own flash fiction which I copy/pasted in, and which it now features on the home page in a carousel.

The main thing I learned from this one was that context really is incredibly important. The other sites (including the ones that follow) all leaned heavily on existing content, and were much richer and more interesting with fewer prompting back and forth.

Homepage of 'Auspicious Skies', a speculative fiction journal featuring short fiction and poetry.

Visit auspiciousskies.com here. Maybe one day I’ll start accepting submissions.

Websites 4 and 5: Practical Reading Strategies and Practical Writing Strategies

I had a week off from building websites. Well, five days. Well… I only made a couple I didn’t publish. OK just three.

I find something strangely compelling about conjuring websites into existence using my already-published work. It’s like seeing an idea of my own take on a life of its own. On LinkedIn, educator Matt Wemyss flagged the same issue, calling it “seductive”. I’ve also become aware, proof reading this article, that I’ve used far more “magical” language than I ever normally would. In fact, I’ve openly criticised magical and metaphorical language around AI in past articles, and yet here I am “conjuring” and frequently writing about Claude as if it is actually agentic.

Buyer beware.

A week after publishing the above three sites, I was back into it. This time, I decided to bring to life two of my published books: Practical Reading Strategies and Practical Writing Strategies. Ignore for a second my inability to name books anything other than Practical X Strategies or Teaching AI X. These are double or triple the size of the PDFs used for the earlier sites, and I thought perhaps I would hit a token limit or timeout. Nope.

Claude Code spent exactly 23 minutes turning Practical Reading Strategies into a functional, useful, and fully on-brand website. Having learned a little from my Teaching AI Ethics attempt, I went in prepared and set up a folder containing:

  • A markdown document of specific instructions for this site, including external links such as the publisher’s website
  • A brand-pack document with fonts, colours, and requirements
  • Images of the book cover
  • A PDF of the full book

Most of the 23 minutes was actually me manually setting up the domain transfer from GoDaddy to Cloudflare.

I repeated the process for Practical Writing Strategies, which I coauthored with Benjamin White and published originally in 2023. In both instances, and after only two additional prompts, Claude Code created a very useful page of activities which can be downloaded as nicely formatted PDFs and used as student handouts – something we didn’t even manage for the original books.

Website homepage for 'Practical Reading Strategies' by Leon Furze, featuring a book cover and descriptions of reading strategies for secondary students.
Homepage of 'Practical Writing Strategies' book by Leon Furze and Benjamin White, featuring engaging activities for secondary students and options to buy the book or browse activities.

I honestly think that both of these websites are useful for English teachers, or anyone who teaches reading and writing. And it’s great to see my 2022 and 2023 revitalised like this.

Visit practicalreadingstrategies.com and practicalwritingstrategies.com.

Bonus: The AI Iceberg

This last one was a bit of fun, but alongside Teaching AI Ethics is probably the most useful of the websites created. It’s not an entire website: rather, it’s a single scrolling explainer of how AI works, using my “AI Iceberg” analogy from the first Practical AI Strategies book.

The build was slightly different. Right away, I included requests in the prompt to have a single, scrolling, semi-interactive page. I gave examples of articles I’ve read online in this format: often journalism presented in a beautiful fashion. Annie Schugart has a great list of some of the best on Medium, and I promise you’ll get lost in them.

Given enough time, and a team of graphic designers and photographers, I might be able to pull off something a quarter as impressive as the New York Times or Reuters. But, alas, it’s just me and my 6am before-the-kids-wake-up Saturday slot, so instead I decided on a simple approach with clear explanations for how large language models work.

An illustration of an iceberg with a snowman on top, symbolizing AI applications like ChatGPT, Claude, and Gemini. Below the waterline, a shark represents the underlying large language model and its complexities, while system messages and reinforcement learning from human feedback influence interactions.

I was pleased with the result, and decided to host it right here on leonfurze.com. Since this is a WordPress.com website and can’t handle anything too fancy, I used a similar approach to the other sites and pushed it to GitHub, hosting the subdomain iceberg.leonfurze.com on Cloudflare. Check it out here: iceberg.leonfurze.com

Getting Technical

This is the part where stuff might get broken if you’re not paying attention. So either pay attention, or skip ahead to the end. I haven’t broken my own computer or exposed myself to any horrible security issues yet, but I can’t guarantee I won’t do something stupid at some point…

What follows is a step-by-step walkthrough of the process I used to build all five sites. You’ll also find my Claude Code skill for building Astro websites, which contains the specific design patterns, component templates, and project conventions I’ve settled on. If you install that skill, Claude Code will follow the same architecture automatically.

Prerequisites

You’ll need four things before you start:

  1. Node.js (version 20 or later). Download from nodejs.org. To check if it’s already installed, open Terminal and type node --version.
  2. A Claude subscription with Claude Code access. I use the Max plan ($100 USD/month), which includes Claude Code and Cowork. Install Claude Code by following the instructions at docs.anthropic.com.
  3. A GitHub account. Free tier works fine. Sign up at github.com.
  4. A Cloudflare account. Also free. Sign up at cloudflare.com.

If you want a custom domain (like teachingaiethics.com), you’ll need one. I buy mine from various registrars and transfer them to Cloudflare, but you can also purchase directly through Cloudflare.

Step 1: Set Up Your Project Folder

Create a new, empty folder for your site. Drop your source content into it: PDFs, markdown files, eBooks, text files, whatever you’re working from. This folder becomes your project root, and Claude Code will work within it.

Open Terminal, navigate to your folder, and start Claude Code:

bash

cd ~/Projects/my-new-site
claude

Step 2: The First Prompt

This is where Claude does the heavy lifting. Give it your content and a clear brief. Here’s roughly what I used for Teaching AI Ethics:

Using the books in this folder, create an Astro-based website that will
be deployed on GitHub/Cloudflare. Choose your own design but avoid
obvious "tech" colours and fonts. Use placeholders for images for now.

Claude Code will ask for permission to install packages and create files. It initialises an Astro project, processes your content, builds out pages, and generates a working site. For the later sites, I included more upfront context (a brand pack, specific instructions, image files) and got better results with fewer iterations.

Under the hood, this is what Claude Code sets up:

  • Astro 5 as the static site framework (fast, zero-JS by default)
  • TypeScript data files rather than a CMS (your content lives in typed arrays in src/data/)
  • Scoped CSS with custom properties (no Tailwind, no frameworks)
  • @astrojs/sitemap for automatic SEO sitemaps
  • marked and sanitize-html for rendering markdown content safely

Step 3: Preview and Iterate

Once the initial build is done, ask Claude Code to start the dev server:

Start the dev server so I can see the site.

It’ll run npm run dev and give you a local URL (usually http://localhost:4321). Open that in your browser and you can see the site live as you make changes.

From here, iterate. Some examples of prompts I used across the five sites:

  • The body text contrast is too low. Fix it to meet WCAG AA standards.
  • Create a separate page for each case study, with cards linking to them from the main resources page.
  • Run a WCAG accessibility audit, a security audit, and a fact-check on all content. Use agent teams to run these in parallel.
  • Convert all PNG images to WebP and update the references.
  • Add a downloadable PDF handout generator to each activity page.

For multi-part changes, invoking agent teams (/agent-teams or just describing parallel tasks) lets Claude spin up multiple agents working simultaneously. This is where the 10-tasks-running-in-the-background screenshot from earlier comes in.

Security is not a huge issue on static sites like this, but it will check for a number of obvious problems like: Exposed secrets (API keys, tokens, or credentials accidentally left in the codebase), insecure external resource loading (HTTP instead of HTTPS, scripts from untrusted CDNs), missing security headers (Content-Security-Policy, X-Frame-Options, etc., which Cloudflare can handle but aren’t always configured), dependency vulnerabilities (outdated npm packages with known CVEs), and any user-input handling that could create XSS vectors (less of an issue on a truly static site, but relevant if there are search features or form elements).

Step 4: Push to GitHub

When you’re happy with the site, it’s time to put the code on GitHub. You can do this directly from Claude Code:

Initialise a git repo, create a GitHub repository called my-new-site,
and push the code.

Claude Code will run the git commands and use the GitHub CLI (gh) to create the repo. If you haven’t authenticated with GitHub before, it’ll walk you through it. Alternatively, do it manually:

bash

git init
git add -A
git commit -m "Initial commit"
gh repo create my-new-site --public --push --source .

Step 5: Set Up Cloudflare Pages

  1. Log into dash.cloudflare.com.
  2. Go to Workers & Pages in the sidebar.
  3. Click CreatePages tab → Connect to Git.
  4. Select your repository.
  5. Set the build configuration:
    • Framework preset: Astro
    • Build command: npm run build
    • Build output directory: dist
  6. Click Save and Deploy.

Cloudflare builds your site in about a minute and gives you a live URL like my-new-site.pages.dev. Check it works.

Step 6: Add a Custom Domain

If you have a domain, there are two parts to this: pointing the domain at Cloudflare, and telling Cloudflare Pages to use it.

In Cloudflare Pages: go to your project → Custom domainsSet up a custom domain → enter your domain. Cloudflare will configure the DNS records automatically if the domain is already on Cloudflare.

If your domain is elsewhere (GoDaddy, Namecheap, WordPress.com, etc.): you’ll need to either transfer the domain to Cloudflare (recommended, and free), or update the nameservers at your current registrar to point to Cloudflare’s nameservers. Cloudflare walks you through this when you add a domain to your account.

DNS propagation takes anywhere from a few minutes to 48 hours. Usually it’s under an hour.

Step 7: Updates

Every future update follows the same pattern:

bash

cd ~/Projects/my-new-site
claude

Make your changes via Claude Code, then:

bash

git add -A
git commit -m "Description of changes"
git push

Cloudflare detects the push and rebuilds automatically. Site’s live in about a minute.

The Skill File

For anyone using Claude Code regularly, I’ve published the Astro website skill I now use for all of these builds. It contains the full project setup, design system conventions, component patterns, and deployment config so Claude Code follows a consistent architecture every time. You can find it on GitHub here and drop it into your Claude Code skills directory.

With the skill installed, instead of starting from scratch each time, Claude Code already knows the stack, the folder structure, the CSS approach, and the deployment pipeline. It just needs your content.

These applications are genuinely impressive, and the websites I’ve built are genuinely useful. But use with caution. It is seductive to watch a website materialise from a PDF in 23 minutes. It’s also worth remembering that every one of these sites is built on years of writing, thinking, and teaching. Claude Code didn’t create the content, the ideas, or the pedagogical framework behind any of them. It turned existing work into a new format, quickly and well. That’s a meaningful capability, but it’s not magic, and it’s not a substitute for having something worth saying in the first place.

Want to learn more about GenAI professional development and advisory services, or just have questions or comments? Get in touch:

← Back

Thank you for your response. ✨

Leave a Reply