Build and Launch a Real Website With AI
Direct a free AI coding agent from your terminal to build a real website, track it with Git, and publish it live at your own GitHub Pages address.
What You're Building
By the end of this two-session guide, you'll have a real website — plain HTML, CSS, and JavaScript files you can open, read, and edit yourself — built almost entirely by directing an AI coding agent from a terminal, previewed locally on your own computer, put under version control with Git, pushed to a GitHub repository you own, and published live at your own https://<your-username>.github.io address. Nothing here is a hosted snapshot inside someone else's chat interface — it's a real project on your machine that you can keep opening and improving for as long as you want.
How This Is Different From Build Your First Website With AI
If you haven't built a website with AI yet
Level185 has a faster, no-terminal guide: Build Your First Website With AI. It uses Claude's chat interface to plan, build, and publish a page as a public Claude Artifact — no terminal, no Git, no GitHub account, no real project files to manage. If that's what you're after, start there instead; it's a genuinely complete guide on its own, not a prerequisite for this one.
What this guide adds
This is a materially bigger technical step. Instead of a chat interface, you'll direct an AI coding agent (OpenAI's Codex CLI) from a real terminal. Instead of a hosted Artifact, you'll get real project files sitting on your own computer, under real version control with Git. Instead of a Claude-hosted link, you'll push your own GitHub repository and publish it yourself through GitHub Pages, at an address you control.
Why that difference matters
A Claude Artifact is a frozen snapshot — to change it, you publish a brand-new link, and the old one is gone for good. A GitHub Pages site backed by a real Git repository is a project you keep editing, one commit at a time, across as many future sessions as you want, using the exact same skills you practice here.
Get Your Accounts Ready
Two free accounts, no credit card for either. This guide realistically takes two sittings — a first session to set up and build, a second to version and publish — so don't feel rushed to finish it all today.
Create or confirm your ChatGPT account
Go to chatgpt.com and sign in, or sign up for a free account if you don't already have one.
This is the account Codex CLI — the AI coding agent you'll direct from the terminal — signs in with. Codex is included on ChatGPT's Free plan, no credit card required.
You can sign in at chatgpt.com and see a chat box.
Stuck?
If you're asked to verify an email or phone number, that's normal account setup — not a sign you need a paid plan.
A quick note on Codex's free usage
Codex's usage on the Free ChatGPT plan is real, but OpenAI doesn't publish an exact daily or session limit — it's described only as "limited access." If you ever see a message saying you've hit a usage limit partway through this guide, that's expected, not a sign something broke. Wait for it to reset, or simply pick this guide back up in your next session — which fits how this guide is already structured.
Nothing in this guide requires paying for anything, as long as you stay inside Codex's free ChatGPT usage and GitHub Pages' free public-repository tier.
Create or confirm your GitHub account
Go to github.com and sign in, or sign up for a free account if you don't already have one.
GitHub is where your project's code will live once you push it, and GitHub Pages — a free feature of GitHub — is what will actually publish it to a real public URL.
You can sign in at github.com and see your GitHub dashboard.
Stuck?
GitHub may ask you to choose a username during signup — pick one you're fine having in a public URL later, since it becomes part of your site's address (https://<your-username>.github.io).
Install Git and Connect GitHub
Five tools, installed once. You'll reuse all of them every time you come back to this project.
Install Git
On macOS: open Terminal and run xcode-select --install, then click Install in the dialog that appears — this installs Apple's developer tools, which include Git, with no Homebrew required. (If you already have Homebrew installed, brew install git works too.) On Windows: go to git-scm.com, download the installer, and run it, accepting the defaults — this also installs Git Bash, a terminal you can use for the rest of this guide.
Git is the version-control tool that will track every change you make to your project, one commit at a time.
Open a terminal (Git Bash on Windows, Terminal on macOS/Linux) and type git --version — you should see a real version number, not an error.
Stuck?
If the command isn't recognized, close and reopen your terminal (or restart your computer) — the installer needs a fresh terminal session to pick up the change.
Set your Git identity
In your terminal, run these two commands, replacing the example name and email with your own:
Git requires an identity attached to every commit. Skip this, and depending on your machine, Git will either refuse the commit with an error telling you it doesn't know who you are, or silently guess a name and email from your computer's username and hostname — which may not be what you want attached to your commits. Setting it explicitly avoids both problems.
Both commands run with no error output.
git config --global user.name "Your Name" git config --global user.email "you@example.com"
Set Git's default branch name to main
In the same terminal, run:
Many current Git installations still default to master, and some newer ones already default to main — this command guarantees main either way, so the rest of this guide can consistently say main. That matters later, since GitHub Pages expects to publish from a branch named main.
The command runs with no error output.
git config --global init.defaultBranch main
Install GitHub CLI (gh)
Install GitHub's official command-line tool, using the command for your OS.
gh is what lets you create GitHub repositories and authenticate Git pushes from your terminal, without ever typing a GitHub password.
Run gh --version in your terminal — you should see a real version number.
Stuck?
If brew isn't recognized on macOS, install Homebrew first by pasting the install command from brew.sh into Terminal, then re-run brew install gh. If winget isn't recognized on Windows, see cli.github.com for an alternate installer for your system.
macOS: brew install gh Windows (PowerShell): winget install --id GitHub.cli
Authenticate gh with your GitHub account
Run gh auth login. When it asks, choose GitHub.com, choose HTTPS as your preferred protocol, and answer Yes when asked whether to authenticate Git with your GitHub credentials.
This is what prevents a common later failure: GitHub no longer accepts your account password for pushing code. Answering HTTPS + Yes here sets up gh to handle authentication automatically, so you'll never need to create or paste a manual access token.
The terminal reports you're logged in as your GitHub username.
Stuck?
gh will show a one-time code in your terminal and open your browser to a real GitHub sign-in and authorization page — this is a genuine account-linking step, not simulated. Confirm the code shown in your terminal matches the one shown in the browser, sign in if asked, and approve access.
Install Codex CLI and VS Code
Two more installs, then you're ready to actually build something.
Install Codex CLI
In your terminal, run the standalone install command for your operating system.
This installer doesn't require Node.js or any extra setup, and Codex runs natively on Windows without needing WSL.
Open a new terminal window and type codex — it should start Codex instead of showing a "command not found" error.
Stuck?
On Windows, make sure you're running the command in PowerShell, not Command Prompt — the prompt should read PS C:\... before you paste it. Pasting a PowerShell command into the wrong terminal produces a confusing error.
macOS/Linux (Terminal): curl -fsSL https://chatgpt.com/codex/install.sh | sh Windows (PowerShell): powershell -ExecutionPolicy ByPass -c "irm https://chatgpt.com/codex/install.ps1 | iex"
Install VS Code
Go to code.visualstudio.com and download the build for your OS (the page detects it automatically). On macOS: open the downloaded .dmg file and drag Visual Studio Code into your Applications folder — there's no installer wizard. On Windows: run the downloaded installer, accepting the defaults.
VS Code is the code editor you'll use to browse the files Codex creates, run your terminal from inside one window, and preview your site.
VS Code opens to a welcome screen.
Install the Live Preview extension
In VS Code, open the Extensions view (the square icon in the left sidebar), search for "Live Preview," and install the one published by Microsoft — extension ID ms-vscode.live-server.
This adds a "Show Preview" command that shows your site running locally with auto-reload, so you don't need to run your own local server or touch Node.js just to see your work.
"Live Preview," published by Microsoft, appears in your Installed extensions list.
The Loop You'll Practice
Before you open a project folder, see the shape of the whole workflow — five stages you'll repeat and reuse.
Direct: describe what you want
You tell Codex, in plain language, what the site is for, who it's for, and what it needs — the same clarity any good brief needs, just typed into a terminal instead of a chat box.
Build: Codex writes the real files
Codex reads your instruction and creates actual project files — index.html, a stylesheet, and anything else it needs — directly inside your project folder.
Preview: see it running, for real
VS Code's Live Preview shows your actual site running locally, in a real preview pane, updating automatically as files change.
Iterate: give specific follow-ups
You review what Codex built and describe exactly what's wrong or missing — the same discipline of precise instructions over vague ones that any AI-directing skill needs.
Publish: make it real, and keep it yours
Once you're happy with it, Git, GitHub, and GitHub Pages turn your local project into a real, owned, publicly reachable website — one you can keep updating the same way, indefinitely.
Create Your Project and Start Codex
This is where the terminal and Codex actually come in — a genuinely new kind of interaction if you've never used a terminal before.
Create a project folder and open it in VS Code
On your computer, create a new, empty folder — for example, my-website, somewhere easy to find like your Desktop or Documents. Then open VS Code and use File → Open Folder to open that folder.
Every file Codex creates for this project will live inside this one folder — that's what makes it a real, self-contained project you can find again later.
VS Code's file explorer (left sidebar) shows your folder's name at the top, with no files inside yet.
Open the integrated terminal
In VS Code, go to Terminal → New Terminal. If the terminal doesn't already show your project folder's path, run cd followed by your folder's path (you can drag the folder into the terminal window to paste its path).
The integrated terminal opens inside your project folder by default — this is where you'll type every command in this guide from now on, including codex itself.
Running pwd prints a path ending in your project folder's name, like .../my-website. This works the same way in macOS/Linux Terminal, Windows PowerShell, and Windows Git Bash.
Stuck?
If the printed path doesn't end in your project folder's name, run cd followed by the correct path before continuing — commands run in the wrong folder will create files in the wrong place.
Run codex and sign in
In the terminal, type codex and press Enter. On first run, it will prompt you to sign in — choose Sign in with ChatGPT.
This opens a real ChatGPT sign-in and authorization page in your browser — a genuine account-linking step, not simulated.
After you log in and approve access in the browser, control returns to your terminal automatically, and Codex is ready for your first instruction.
Stuck?
If the browser doesn't open automatically, check your terminal for a link to open manually.
What Codex will and won't do without asking
By default, Codex can freely read, create, and edit files, and run commands, inside your project folder — no approval needed for any of that. But it will always pause and explicitly ask before doing anything that needs network access (like installing something, or pushing code) or before touching anything outside your project folder. If Codex ever pauses with a question instead of continuing, that's this safety behavior working as intended — read what it's asking, and approve it, rather than assuming it's frozen.
Direct Codex to Build Your Site
Time for your first real instruction.
Describe your site in one clear message
At Codex's prompt, type a clear description of the site you want and press Enter. Fill in this template with your own details:
The more specific your subject, audience, sections, and tone, the less Codex has to guess — the same principle behind any good AI brief.
Codex acknowledges your request and begins working.
Build me a simple, modern website using plain HTML, CSS, and JavaScript. What it's for: [subject — you, a small business, or a project] Who it's for: [your audience] What visitors should understand immediately: [main message] Sections I want, in this order: [e.g. Hero, About, Services, Contact] Tone: [e.g. friendly, professional, playful] Create the actual project files (index.html, a stylesheet, and any other files you need) directly in this folder.
Wait for Codex to build it
Watch the terminal while Codex works — it will narrate what it's doing and create files directly in your project folder.
This can take anywhere from under a minute to a couple of minutes, depending on how much you asked for.
Codex reports that it finished, and your VS Code file explorer now shows real files — at minimum an index.html and a stylesheet.
Stuck?
If the file explorer doesn't update on its own, click once inside it, or use its refresh icon, to force VS Code to re-read the folder's contents.
Preview your site locally
In VS Code's file explorer, right-click index.html and choose Show Preview (or open the Command Palette and search for the Live Preview extension's Show Preview command).
This opens your actual site, running locally, in a real preview pane or browser tab — with auto-reload, so it updates automatically whenever a file changes.
You see your real site rendered — headline, sections, and styling — not a blank page or an error.
Iterate with specific instructions
Look at the preview, then tell Codex exactly what's wrong or missing — for example, a section that's out of order, wording that doesn't fit, or a color that's off — one instruction at a time, checking the preview again after each change.
Specific instructions get specific fixes. "Make it better" gives Codex nothing to act on; naming the exact problem does.
After each instruction, the preview updates to reflect the change, without you needing to manually reload it.
Stuck?
If Codex reports it's hit a usage limit partway through, that's a real, expected limit on the free ChatGPT plan, not a bug — wait for it to reset, or simply continue from here in your next session. Your files are already saved on disk either way.
Stop here for now, or keep going
If you're at a natural stopping point, this is a good one: your site exists as real files on your computer, and closing VS Code won't lose any of it. To pick this back up later, reopen VS Code, open the same project folder, open a new terminal, and run codex again — it reads your project's current files fresh each time, rather than depending on a remembered chat. The next part — putting this under version control and publishing it — is a natural second session.
Put Your Project Under Version Control
Starting your second session? Reopen your project folder in VS Code and open a new terminal before continuing.
Ask Codex to make your first commit
Run codex if it isn't already running, then give it this instruction:
This stays entirely inside your project folder and doesn't touch the network, so it should run without triggering an approval prompt.
Codex reports that it initialized a Git repository and created a commit.
Stuck?
Don't just trust the chat message — the next step verifies this for real.
Initialize a git repository here and make an initial commit of all these files.
Verify the commit yourself
In your terminal (not through Codex), run git status, then git log --oneline.
Checking this directly, instead of trusting Codex's summary, is the same healthy skepticism worth applying to any AI-reported result.
git status reports no uncommitted changes, and git log --oneline shows at least one real commit with a message.
Stuck?
If git log shows nothing, ask Codex to actually run git init and then git add -A followed by a commit in this folder, and check again afterward.
Push to GitHub
Next, your project becomes a real, owned GitHub repository.
Create your GitHub repository and push, in one command
In your terminal, run this command, replacing <your-github-username> with your actual GitHub username:
Naming the repository exactly <your-github-username>.github.io is deliberate — GitHub treats this exact naming pattern as a personal "user site," publishing at the clean root address https://<your-username>.github.io with no extra sub-path. The --public flag is required, not optional: GitHub Pages only works on public repositories on a free personal account.
The command finishes, and visiting https://github.com/<your-github-username>/<your-github-username>.github.io in a browser shows your repository with your real project files inside it.
Stuck?
You can also ask Codex to run this exact command for you instead of typing it yourself. Because it needs network access to create a public repository and push code, Codex will pause and ask you to approve it first — read the approval request and confirm it.
gh repo create <your-github-username>.github.io --public --source=. --remote=origin --push
Publish With GitHub Pages
Open your repository's Pages settings
On github.com, open your new repository, click the Settings tab, then click Pages in the left sidebar, under "Code, planning, and automation."
GitHub Pages is a free feature of every public GitHub repository — this is where you turn it on.
You're on a page titled Pages, with a "Build and deployment" section.
Choose Deploy from a branch
Under Build and deployment → Source, choose "Deploy from a branch" if it isn't already selected.
Branch and folder dropdowns appear below the Source selector.
Set the branch and folder, then save
If the Branch dropdown doesn't already show main and the folder dropdown doesn't already show / (root), set them and click Save.
This tells GitHub Pages exactly which branch and folder to publish from — main and the project root, matching the default branch name you set all the way back when installing Git. For a <your-username>.github.io repository, GitHub commonly sets this up automatically the moment you push, before you touch anything on this screen.
The Branch dropdown shows main and the folder shows / (root).
Stuck?
Save button greyed out and won't click? That's not broken — it means main and / (root) are already set correctly, so there's nothing left to save. Move on to the next step.
Wait for it to actually publish
Don't check yet — wait several minutes before moving on.
GitHub's own documentation states a change can take up to 10 minutes to actually go live after being pushed. Checking immediately and seeing nothing doesn't mean something's broken.
You've genuinely waited before checking.
GitHub Pages publishing can take up to 10 minutes — this is documented, expected behavior, not a sign something failed.
Visit your real, live site
Open https://<your-github-username>.github.io in an incognito/private browser window, or on a different device.
An incognito window (or a second device) proves the site is genuinely public — reachable by anyone, not just you while logged into something.
Your real site loads — the same one you saw in your local preview — with no login required.
Stuck?
If it 404s or looks broken: confirm your repository is Public in Settings (Pages silently doesn't work on private repos on the free plan); confirm you've waited the full ~10 minutes; and confirm your repository is named exactly <your-github-username>.github.io, not something else.
What You Learned + Where to Go Next
The skill behind this guide
You didn't just ask an AI for a website — you directed a real coding agent from a terminal, reviewed and iterated on what it built, and took real ownership of the result through Git and GitHub. That loop — direct, build, review, iterate, own the result — is the same skill Level185's other guides teach in different settings, just with more real infrastructure underneath it this time.
What's actually yours now
A real project folder on your computer, a full commit history in Git, a GitHub repository you own, and a live public URL you control. Unlike a Claude Artifact, none of this is a frozen snapshot — reopen the folder, run codex, make a change, and repeat the same commit-and-push pattern from Part C whenever you want to update it.
Ideas to try next
Add a second page and link to it from your homepage, ask Codex to improve the mobile layout, or swap in your own real content and images. Each change follows the exact same loop you just practiced: direct, build, preview, iterate, then commit and push when you're happy with it.
Open https://<your-github-username>.github.io in an incognito window or on a different device — you should see your real site, live and publicly reachable, matching what you built and previewed locally.
- The live URL loads without logging into anything
- The site matches what you saw in your local preview
- Your GitHub repository shows a real commit history, not just one placeholder file
- You know how to reopen the project and keep working: open the folder, run codex, make a change, then commit and push again
Recommended before this guide