Static Site Deploy Starter

Two small files that sit at the top of your project before you deploy. Neither one is complicated, and both save you a specific failure you would otherwise meet on the live URL rather than on your machine.

You do not have to type either of these by hand. The deploy prompts ask Claude to write them for you, and Claude checks what is already in your folder before it changes anything. Keep this page for the day you want to read what those files are actually doing.

The .gitignore

Git takes a snapshot of your project every time you commit. This file is the list of things you are telling it to skip.

The point is not tidiness. The point is that some of what sits in a project folder is not your work, and some of it should never go online at all.

# Machine-local settings
.DS_Store
Thumbs.db
.vscode/
.idea/

# Secrets. Never commit these
.env
.env.*
secrets/

# Dependencies and build clutter, if the project ever grows into them
node_modules/
dist/
build/

# Local Claude Code approvals, which stay on your machine
.claude/settings.local.json

Two lines earn special mention.

.env and .env.* hold API keys. A key committed to a public repository is a key that is now public, and rotating it afterwards is a worse afternoon than adding this line was.

.claude/settings.local.json is where your Always allow clicks get written. Claude Code adds it to git's ignore list itself the first time it saves there, so it never leaves your machine. It is listed here so you know why it is missing when a teammate clones your project.

The vercel.json

A plain HTML, CSS and JavaScript site barely needs configuration at all. Nothing in this file is something the deploy depends on. What it adds is caching rules and a couple of small security headers, which are protective settings the browser reads before it shows your page.

{
  "cleanUrls": true,
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "Referrer-Policy", "value": "strict-origin-when-cross-origin" }
      ]
    },
    {
      "source": "/(.*)\\.(css|js|png|jpg|jpeg|svg|webp|woff2)",
      "headers": [
        { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" }
      ]
    }
  ]
}

The two things that break a first deploy

File name capitalization. Your computer treats Hero.png and hero.png as the same file. The server hosting your live site does not. So a link that worked locally points at nothing once it is live. Ask Claude to audit your file names against your code before you push, and it catches this in seconds.

A change you saved but never sent. The fix lived on your machine, and the deployed site is still running the old version, because the new code was never committed and pushed. Committing is saving locally. Pushing is sharing. You can commit ten times before you push once, and only the push reaches the internet.

After the first deploy

Vercel switches on a protection setting by default that puts a login wall in front of your site, including in front of the link previews on LinkedIn and Slack. Check the live address yourself before you send it to anyone. If it asks for a login, turn that protection off in the project's settings, or ask Claude to do it and recheck.

This resource is part of

Claude Code: From Beginner to Pro Agentic AI Engineer

by Arun Nagarathanam

Take your skills to the next level with

AI GEO 2026: Get Recommended by ChatGPT, Google, Perplexity

by Arun Nagarathanam