# Publish a Website with GitHub and Vercel

## Outcome

You will publish the supplied practice site to a private GitHub repository, create a Vercel preview, promote a tested build to production, and save proof that the public site works.

## Before you begin

Complete Guides 00 through 05. Download and extract `first-website-starter.zip` into your course projects folder.

You need GitHub and Vercel accounts. A custom domain is optional; Vercel provides a public `vercel.app` address.

## Security rules

- Keep the GitHub repository private for this lesson.
- Never commit `.env` files, API keys, tokens, customer data, or private assets.
- Use browser login. Never paste access tokens into commands or screenshots.
- A local preview is not a deployment. An HTTP status alone is not a working website.

## Step 1: Verify the starter site

```bash
cd "$HOME/Documents/19Keys-AI-Course/projects/first-website-starter"
./verify.sh
git status --short 2>/dev/null || true
```

Open `index.html` locally. Confirm the heading, button, privacy link, mobile layout, and keyboard focus work.

## Step 2: Install GitHub CLI

```bash
brew install gh
gh --version
gh auth login
gh auth status
```

Choose GitHub.com, an approved Git protocol, and browser authentication. Do not choose insecure credential storage.

## Step 3: Scan for secrets before Git

```bash
find . -maxdepth 3 -type f \( -name '.env*' -o -name '*.pem' -o -name '*.key' \) -print
git check-ignore .env .env.local 2>/dev/null || true
```

Expected result: no secret file is present. `.gitignore` excludes `.env*` except the safe example file. Stop and rotate any exposed credential before continuing.

## Step 4: Create the private GitHub repository

```bash
git init
git add .
git status --short
git commit -m "Initial practice website"
git branch -M main
gh repo create first-website-starter --private --source=. --remote=origin --push
git remote -v
gh repo view --web
```

Review `git status --short` before committing. Pass only when the remote repository contains the expected starter files and no secrets.

## Step 5: Install and authenticate Vercel CLI

```bash
pnpm i -g vercel
vercel --version
vercel login
```

Use browser login. Tokens are for controlled automation, not this beginner lesson.

## Step 6: Link the project

```bash
cd "$HOME/Documents/19Keys-AI-Course/projects/first-website-starter"
vercel link
```

Create or select the practice project. Review the generated `.vercel` folder. It must stay ignored by Git.

## Step 7: Create and test a preview

```bash
vercel deploy
```

Save the printed HTTPS address. Open it in a private browser window. Test:

- page loads without login;
- heading and button appear;
- button reaches the expected section;
- privacy link works;
- mobile width has no horizontal overflow;
- browser console has no blocking error.

Then run:

```bash
curl -I https://YOUR-PREVIEW-ADDRESS
```

If Vercel authentication or SSO blocks the private window, the preview is not publicly shareable yet.

## Step 8: Publish production

Only after preview passes:

```bash
vercel deploy --prod
```

Open the production HTTPS address in a private window and repeat every browser test. Record the exact production address.

## Step 9: Save deployment evidence

Record:

- Git commit hash from `git rev-parse HEAD`;
- GitHub repository address and privacy state;
- Vercel project name;
- preview address and test time;
- production address and test time;
- desktop and mobile screenshots;
- actual button and link outcomes;
- any environment variable names, never their values.

## Step 10: Know the rollback path

If production breaks, promote a known-good deployment:

```bash
vercel promote DEPLOYMENT_URL_OR_ID
```

Vercel dashboard also supports eligible instant rollbacks. A rollback does not roll back environment variables. Verify them separately.

## Optional custom domain

```bash
vercel domains add example.com PROJECT_NAME
vercel domains inspect example.com
```

Add only the DNS records Vercel shows. Recheck HTTPS after DNS finishes updating.

## Verification checkpoint

Pass when GitHub authentication works, private repository matches the local commit, preview passes real browser tests, production passes the same tests, and rollback target is recorded.

## Official references

- [GitHub CLI authentication](https://cli.github.com/manual/gh_auth_login)
- [Create a GitHub repository](https://cli.github.com/manual/gh_repo_create)
- [Vercel CLI](https://vercel.com/docs/cli)
- [Vercel deployments](https://vercel.com/docs/cli/deploying-from-cli)
- [Vercel environment variables](https://vercel.com/docs/environment-variables)
- [Vercel rollback](https://vercel.com/docs/instant-rollback)