Quick Deploy

Ready to make the template your own and deploy to production? This guide walks you through personalization, deployment, and verification in under an hour.

Prerequisites: You should have completed the Launch Demo and have the site running locally.

🚦 Pre-Deployment Readiness Check

Before starting this guide, ensure you have:

Completed Launch Demo successfully
Site runs locally without errors (pnpm run dev)
No console errors in browser (F12 → Console)
pnpm run build succeeds locally
Git basics understood (commit, push, remote)
Hosting platform account created (or will create during guide)

Why this matters: Deploying a broken local site wastes time. Fix issues locally first.

Test your local build:

pnpm run preview  # Builds and serves production build locally

Open http://localhost:4321 - if this works, you’re ready to deploy.

🎯 What You’ll Accomplish

Time Required: 45-75 minutes (first-time users)

Site personalized with your branding
Deployed to production
Live at your custom URL
Verified and tested

✅ Prerequisites

Required

Completed Launch Demo - Local site running successfully
GitHub account (sign up)
Hosting platform account (see Platform Selection below)
Basic Git knowledge (commit, push)

Platform Selection

Choose your hosting platform before starting:

Platform	Best For	Free Tier	Setup Time	Auto HTTPS	Recommendation
Cloudflare Pages ⭐	Performance, global CDN	Unlimited sites	10-15 min	✅ Instant	Best for most
Vercel	Next.js ecosystem, teams	100GB/month	10-15 min	✅ Instant	Great for existing Vercel users
Netlify	Forms, split testing, CMS	100GB/month	10-15 min	✅ Instant	Good for marketing sites

📦 Understanding Your Build

When you run pnpm run build (or pnpm run build:full), here’s what happens:

Token Compilation (build:tokens)
- Reads tokens/base.json and tokens/semantic.json
- Generates CSS custom properties
- Outputs to src/styles/tokens.css
Astro Build (astro build)
- Compiles .astro components to HTML
- Bundles JavaScript (only interactive islands)
- Optimizes CSS (removes unused styles)
- Processes images (AVIF + WebP)
- Generates sitemap
Output (dist/)
- Static HTML files
- Optimized assets (CSS, JS, images)
- Public files (favicon, fonts, etc.)

The dist/ folder is what gets deployed - not your source code.

The template’s build script automatically runs build:tokens first, so you don’t need to chain commands manually.

Available build commands:

pnpm run build       # Full build (tokens + Astro) - automated
pnpm run preview     # Build + serve locally for testing

Note: pnpm run build:full exists as an explicit alias for build, but it’s not necessary since token compilation is already automated in the main build script.

📋 Deployment Checklist

Copy this into your notes and check off as you go:

- [ ] Prerequisites verified
- [ ] Platform account created
- [ ] Repository created on GitHub
- [ ] Site configuration updated
- [ ] Metadata personalized
- [ ] Favicons replaced
- [ ] Design tokens customized (optional)
- [ ] Changes committed to Git
- [ ] Pushed to GitHub
- [ ] Connected to hosting platform
- [ ] Build successful
- [ ] Live site verified
- [ ] Mobile tested

🎨 Step 1: Personalize Your Site (20-30 min)

1.1 Site Configuration

File: astro.config.mjs (project root)
Why: Defines your site URL for SEO, sitemaps, and asset linking
Lines: ~15-20

Before

export default defineConfig({
  site: 'https://example.com', // ← Change this
  // ...
});

After

export default defineConfig({
  site: 'https://your-domain.com', // Your actual domain
  // OR use Cloudflare Pages URL initially:
  // site: 'https://your-project.pages.dev',
  // ...
});

Action Steps

Open astro.config.mjs in your editor
Find the site property (around line 15-20)
Replace with your domain or https://your-project.pages.dev
Save the file

1.2 Site Metadata & SEO

File: src/layouts/BaseLayout.astro
Why: Controls site title, description, and social sharing
Lines: ~5-30 (frontmatter and head section)

Quick Checklist: What to Update

Open src/layouts/BaseLayout.astro and find these lines:

Line ~8: Default title in Props interface → 'Your Site Name'
Line ~9: Default description → 'Your site description'
Line ~15: <title> tag → Your Brand
Line ~17: <meta name="description"> content
Lines ~20-25: Open Graph tags
Lines ~27-30: Twitter Card tags

Show full diff with before/after

What to Change

---
interface Props {
  title?: string = 'Astro Starter Template';
  title?: string = 'Your Site Name';
  description?: string = 'A performance-focused Astro starter';
  description?: string = 'Your site description for SEO';
  // ...
}

const { title, description } = Astro.props;
---

<head>
  <title>{title} | Astro Starter</title>
  <title>{title} | Your Brand</title>

  <meta name="description" content="A performance-focused Astro starter template" />
  <meta name="description" content="Your compelling site description" />

  <!-- Open Graph / Facebook -->
  <meta property="og:title" content={title} />
  <meta property="og:title" content="Your Site Name" />
  <meta property="og:description" content={description} />
  <meta property="og:description" content="Your site description" />

  <!-- Twitter -->
  <meta property="twitter:title" content={title} />
  <meta property="twitter:title" content="Your Site Name" />
  <meta property="twitter:description" content={description} />
  <meta property="twitter:description" content="Your site description" />
</head>

1.3 Visual Branding

Favicon Replacement

Files: public/favicon.svg (and variants)
Why: Your site icon in browser tabs and bookmarks

Specifications:

SVG: Recommended, scalable, supports dark mode
PNG: Fallback, 32×32px minimum, 512×512px ideal
ICO: Legacy support, 16×16 and 32×32 sizes

Action Steps

Create your favicon (use Favicon.io or design tool)
Replace public/favicon.svg with your SVG
(Optional) Add public/favicon.ico for legacy browsers
(Optional) Add public/favicon-32x32.png and public/favicon-16x16.png

Verify:

# Check files exist
ls -la public/favicon*

# Should show:
# favicon.svg (required)
# favicon.ico (optional)
# favicon-32x32.png (optional)

1. Create adaptive SVG (public/favicon.svg):

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    @media (prefers-color-scheme: dark) {
      .icon { fill: white; }
    }
    @media (prefers-color-scheme: light) {
      .icon { fill: black; }
    }
  </style>
  <circle class="icon" cx="16" cy="16" r="14"/>
</svg>

2. Update BaseLayout.astro to reference it:

Open src/layouts/BaseLayout.astro and add these lines in the <head> section (around line 12-15):

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Favicons -->
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
  <link rel="alternate icon" href="/favicon.ico" />

  <title>{title}</title>
  <!-- ... rest of head -->
</head>

Logo & Brand Colors (Optional)

Files:

tokens/semantic.json - Brand colors
src/components/structural/Header.astro - Logo text

Quick Color Change:

{
  "color": {
    "brand": {
      "primary": {
        "value": "#your-primary-color",
        "description": "Primary brand color"
      },
      "secondary": {
        "value": "#your-secondary-color",
        "description": "Secondary brand color"
      }
    }
  }
}

Rebuild tokens:

pnpm run build:tokens  # Compile tokens only
# Or rebuild everything:
pnpm run build

Update logo text:

<a href="/" class="logo">
-  Astro Starter
+  Your Brand
</a>

1.4 Verify Changes Locally

Before deploying, verify everything looks correct:

# Restart dev server
pnpm run dev

# Open http://localhost:4321

Verification checklist:

New title appears in browser tab
New favicon displays
Updated metadata (view page source: Ctrl/Cmd+U)
Logo text updated (if changed)
Colors updated (if changed)
No console errors (F12 → Console)

🚀 Step 2: Deploy to Production (15-20 min)

2.1 Save Your Changes (Git)

Check your Git status first:

# Check if Git is already initialized
git status

# If you see "not a git repository", initialize it:
git init

If you already have commits

git add .
git commit -m "feat: personalize site configuration and branding"
git push

If this is your first commit

# Stage all changes
git add .

# Commit with message
git commit -m "feat: personalize site configuration and branding"

Create GitHub repository:

Go to github.com/new
Name your repository (e.g., my-astro-site)
Choose Public or Private
Do NOT initialize with README (you already have files)
Click Create repository

Connect and push:

# Add remote (replace with your GitHub username and repo name)
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git

# Rename branch to main (if needed)
git branch -M main

# Push to GitHub
git push -u origin main

2.2 Platform Configuration

Option A: Cloudflare Pages (Recommended)

Step 1: Create Cloudflare Account

Go to dash.cloudflare.com/sign-up
Enter email and create password
Verify email address

Step 2: Connect GitHub Repository

In Cloudflare dashboard, navigate to Workers & Pages
Click Create Application
Select Pages tab
Click Connect to Git
Choose GitHub and authorize Cloudflare
Select your repository from the list

Step 3: Configure Build Settings

Project name: your-project-name
Production branch: main
Build command: pnpm run build
Build output directory: dist
Root directory: (leave empty)
Environment variables: (see below if needed)

Step 4: Deploy

Click Save and Deploy
Wait 2-5 minutes for build to complete
Your site will be live at https://your-project-name.pages.dev

Step 5: Update Site URL & Redeploy

Your site is now live, but it’s using the placeholder URL from Step 1. Let’s fix that:

Copy your actual URL from Cloudflare (e.g., https://my-project-abc.pages.dev)

Update config:

export default defineConfig({
  site: 'https://my-project-abc.pages.dev', // ← Your actual Cloudflare URL
});

Commit and push:

git add astro.config.mjs
git commit -m "fix: update site URL with Cloudflare Pages domain"
git push

Wait for rebuild (1-2 min) - Cloudflare auto-deploys on push
Verify the new build succeeded in Cloudflare dashboard

2.3 Environment Variables (Optional)

When and How to Use Environment Variables

When you need environment variables:

API keys for third-party services
Analytics tracking IDs
CMS endpoints
Feature flags

Astro v5.x Type-Safe Environment Variables:

Astro v5 includes built-in type-safe environment variable handling via astro:env.

1. Define in astro.config.mjs:

import { defineConfig, envField } from 'astro/config';

export default defineConfig({
  site: import.meta.env.SITE_URL || 'https://example.com',
  experimental: {
    env: {
      schema: {
        SITE_URL: envField.string({
          context: 'server',
          access: 'public',
          default: 'https://example.com',
        }),
        API_KEY: envField.string({
          context: 'server',
          access: 'secret',
        }),
      },
    },
  },
});

2. Add to your hosting platform:

Cloudflare Pages:

Go to Settings → Environment Variables
Add SITE_URL, API_KEY, etc.
Separate variables for Production and Preview environments

Vercel:

Go to Settings → Environment Variables
Add variables with environment selection (Production, Preview, Development)

Netlify:

Go to Site settings → Environment variables
Add variables (applies to all deploys by default)

3. Use in your code:

---
import { SITE_URL, API_KEY } from 'astro:env/server';

const response = await fetch(`${API_KEY}/endpoint`);
---

Security best practices:

Never commit .env files to Git (already in .gitignore)
Use access: 'secret' for sensitive data (API keys, tokens)
Use access: 'public' for non-sensitive config (site URL, feature flags)

Option B: Vercel

See Vercel Deployment Guide for detailed instructions.

Quick steps:

Go to vercel.com/new
Import your GitHub repository
Build command: pnpm run build
Output directory: dist
Deploy

Option C: Netlify

See Netlify Deployment Guide for detailed instructions.

Quick steps:

Go to app.netlify.com/start
Connect to GitHub
Build command: pnpm run build
Publish directory: dist
Deploy

More Platform Options

Option D: Render

Best for: Full-stack apps, databases, background workers

Go to render.com
Click New → Static Site
Connect GitHub repository
Build command: pnpm run build
Publish directory: dist
Deploy

Pros: Free SSL, global CDN, preview environments

Option E: GitHub Pages

Best for: Open source projects, documentation sites

Setup with GitHub Actions:

Create .github/workflows/deploy.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
      - uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'pnpm'
      - run: pnpm install --frozen-lockfile
   - run: pnpm run build
   - uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  deploy:
    needs: build
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/deploy-pages@v4
        id: deployment

Enable GitHub Pages:
- Repo → Settings → Pages
- Source: GitHub Actions

Update astro.config.mjs:

export default defineConfig({
  site: 'https://username.github.io',
  base: '/repo-name', // Only if not using custom domain
});

Note: GitHub Pages requires base path if using username.github.io/repo-name format.

2.4 Custom Domain (Optional, +15 min)

Cloudflare Pages

In your Pages project, go to Custom domains
Click Set up a custom domain
Enter your domain (e.g., yourdomain.com)
Follow DNS configuration instructions:
- Add CNAME record pointing to your-project.pages.dev
- Or use Cloudflare nameservers (recommended)
Wait for DNS propagation (5-30 minutes)

Update astro.config.mjs:

export default defineConfig({
  site: 'https://yourdomain.com', // ← Your custom domain
  // ...
});

Commit and push:

git add astro.config.mjs
git commit -m "fix: update site URL with custom domain"
git push

2.5 CI/CD Integration (Optional, Advanced)

Custom Deployment Pipelines with GitHub Actions

Why use GitHub Actions instead of native Git integration?

Most platforms (Cloudflare Pages, Vercel, Netlify) automatically deploy when you push to Git. GitHub Actions gives you more control for advanced use cases.

Use cases for GitHub Actions:

Run tests before deployment - Prevent broken builds from going live
Custom build steps - Complex preprocessing, code generation
Multi-environment deploys - Staging, preview, production from one workflow
Service integrations - Slack notifications, database migrations, cache invalidation
Monorepo deployments - Deploy multiple projects from one repo

If you just need “push to deploy,” stick with native Git integration. GitHub Actions adds complexity.

Setup:

Create workflow file .github/workflows/deploy.yml:

name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      deployments: write

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup pnpm
        uses: pnpm/action-setup@v3
        with:
          version: 9

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '22'
          cache: 'pnpm'

      - name: Install dependencies
        run: pnpm install --frozen-lockfile

      - name: Build site
        run: pnpm run build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: your-project-name
          directory: dist
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

Add secrets to GitHub:
- Go to your repo → Settings → Secrets and variables → Actions
- Add CLOUDFLARE_API_TOKEN (get from Cloudflare dashboard)
- Add CLOUDFLARE_ACCOUNT_ID (found in Cloudflare URL)
Get Cloudflare credentials:
- API Token: Cloudflare dashboard → My Profile → API Tokens → Create Token
- Use “Edit Cloudflare Workers” template
- Account ID: In Cloudflare Pages project URL

Alternative: Vercel GitHub Integration

Vercel automatically deploys on push without additional configuration. Just connect your repo.

Alternative: Netlify GitHub Integration

Netlify also auto-deploys on push. Configure in netlify.toml:

[build]
  command = "pnpm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "22"
  PNPM_VERSION = "9"

✓ Step 3: Verify Your Deployment (5-10 min)

Deployment Checklist

Visit your live site and verify:

Site loads without errors
Correct title in browser tab
Correct favicon displays
Homepage displays correctly
Example landing page works (/examples/landing)
Dark mode toggle works
Mobile responsive (test on phone or DevTools)
No console errors (F12 → Console)
No 404 errors for assets

Performance Check

Run a Lighthouse audit to verify performance:

Option 1: Chrome DevTools

Open your live site
Press F12 → Lighthouse tab
Click Analyze page load
Check scores

Option 2: PageSpeed Insights

Go to pagespeed.web.dev
Enter your live URL
Click Analyze

Option 3: Accessibility Testing

WCAG AA Compliance Check:

WAVE Browser Extension
- Install: wave.webaim.org/extension
- Click WAVE icon on your live site
- Review errors, alerts, and contrast issues
Axe DevTools
- Install: Chrome Web Store
- Open DevTools (F12) → Axe DevTools tab
- Click Scan ALL of my page
- Fix any critical or serious issues
Lighthouse Accessibility Audit
- Already included in Lighthouse (see Option 1)
- Target: 100/100 score

Common accessibility checks:

All images have alt text
Heading hierarchy is logical (h1 → h2 → h3)
Color contrast meets WCAG AA (4.5:1 for text)
Keyboard navigation works (Tab, Enter, Escape)
Focus indicators are visible
Form inputs have labels
ARIA attributes used correctly

Target Scores (Fresh Deploy)

These scores assume:

No additional content yet
No third-party scripts (analytics, ads)
No custom fonts beyond system fonts
No large images

Metric	Target	Why This Score
Performance	95+	Astro’s static output is blazing fast
Accessibility	100	Semantic HTML + ARIA best practices
Best Practices	100	HTTPS, modern standards, no deprecated APIs
SEO	100	Meta tags, sitemap, semantic structure

As you add content, scores will change. This is normal. Focus on:

Image optimization (use Astro’s <Image /> component)
Lazy loading for non-critical content
Keeping third-party scripts minimal

Common score impacts:

Performance drops to 85-90 - After adding 10+ images, custom fonts, or analytics
Accessibility drops to 95-98 - Missing alt text on new images, contrast issues in custom designs
Best Practices drops to 95 - Third-party scripts (Google Analytics, ad networks)
SEO stays 100 - Unless you forget meta descriptions or have broken internal links

Goal: Keep Performance > 85, everything else > 95 as you add content.

Test on Multiple Devices

Quick Wins:

Chrome DevTools Device Mode (Ctrl/Cmd+Shift+M)
- Test iPhone 14 Pro, Pixel 7, iPad Pro
- Toggle device toolbar, rotate orientation
- Good enough for most cases
Free Real Device Testing
- LambdaTest - 100 minutes/month free
- BrowserStack - Free trial, then $29-99/month
- Use if you need cross-browser testing on real devices
Your Own Devices (Recommended)
- iOS Safari (iPhone/iPad)
- Android Chrome
- Desktop browsers (Chrome, Firefox, Safari)
- Most reliable for catching real issues

Test Checklist:

🔎 Advanced Configuration

Staying Updated with Astro Releases

Current version: Astro v5.x (as of 2025)

Monitoring updates:

Astro releases new versions regularly. Stay informed to benefit from improvements and avoid breaking changes.

Update strategy:

Follow release channels:
- Astro changelog
- Astro blog for major announcements
- @astrodotbuild on Twitter/X
Before upgrading:
- Review Astro upgrade guide
- Check for breaking changes in the changelog
- Test in a separate branch first
Safe upgrade process:
- Create a new branch: git checkout -b upgrade-astro
- Update dependencies: pnpm update astro
- Run build: pnpm run build
- Test locally: pnpm run preview
- Fix any breaking changes
- Merge when stable

Staying updated:

# Check for updates
pnpm outdated

# Update Astro (minor versions)
pnpm update astro

# Update all dependencies
pnpm update

# Major version upgrade (test first!)
pnpm add astro@latest

🆘 Troubleshooting

Build Fails on Platform

Error: `pnpm: command not found`

Cause: Platform doesn’t have pnpm installed

Fix: Update build command to install pnpm first:

npm install -g pnpm && pnpm run build

Or use npm instead:

npm install && npm run build

Error: `build:tokens failed`

Cause: Missing token files in repository

Fix:

Verify tokens/base.json and tokens/semantic.json exist locally
Ensure they’re committed to Git:

git add tokens/
git commit -m "fix: add token files"
git push

Error: `Module not found: @/components/...`

Cause: Path aliases not resolved

Fix: Ensure tsconfig.json has proper paths configuration (should be default in template). If missing, add:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@layouts/*": ["src/layouts/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

Site Deploys But Shows Blank Page

Cause 1: Incorrect `site` URL

Fix: Verify URL in astro.config.mjs matches deployment URL exactly (including https://)

// ✅ Correct
site: 'https://my-project.pages.dev'

// ❌ Incorrect
site: 'my-project.pages.dev'  // Missing https://
site: 'http://my-project.pages.dev'  // Wrong protocol

Cause 2: Build output directory mismatch

Fix: Ensure platform build settings use dist as output directory

Cause 3: Base path issue

Fix: If deploying to subdirectory, add base to config:

export default defineConfig({
  site: 'https://yourdomain.com',
  base: '/subdirectory', // Only if deploying to subdirectory
});

Images Not Loading

Cause: Incorrect asset paths

Fix: Use Astro’s image component and relative imports:

---
// ✅ Correct
import { Image } from 'astro:assets';
import myImage from '@/assets/image.jpg';
---
<Image src={myImage} alt="Description" />

<!-- ❌ Incorrect -->
<img src="/src/assets/image.jpg" alt="Description" />

Styles Look Broken

Cause: Design tokens not built

Fix: The build script automatically compiles tokens. If styles are still broken:

# Test locally first
pnpm run build
pnpm run preview

If it works locally but not on the platform, check:

Build logs for token compilation step
Ensure tokens/ directory is committed to Git
Verify platform is using pnpm run build (not a custom command)

Fonts Not Loading

Cause: Font files not in public directory or incorrect paths

Fix: Verify font imports in BaseLayout.astro:

<link rel="preload" href="/fonts/your-font.woff2" as="font" type="font/woff2" crossorigin />

Ensure font files are in public/fonts/ directory.

Still Stuck?

Check build logs on your platform dashboard for detailed error messages
Review deployment guide: Phase 10: Deployment
Common issues: FAQ
Search existing issues: GitHub Issues
Ask for help: GitHub Discussions

🎓 What’s Next?

Now that you’re deployed, choose your path based on your goals:

Path A: Content-First (Recommended)

Best for: Blogs, portfolios, marketing sites

Creating Your First Page
Content Collections Guide
Add blog posts or projects
Customize page layouts

Time: 1-2 hours to first content page

Path B: Design Customization

Best for: Unique branding, custom themes

Design Tokens Guide
Customize colors, typography, spacing
Create custom components
Build design system

Time: 2-4 hours for basic customization

Path C: Advanced Features

Best for: Complex sites, interactive elements

Component Patterns
Phase 5: Components
Add interactive islands
Implement advanced features

Time: 4-8 hours for advanced features

Path D: Full Implementation

Best for: Production-ready, feature-complete sites

MVP Track Guide (2-3 weeks)
Showcase Track Guide (4-6 weeks)
Complete all 12 phases
Production optimization

Time: 2-6 weeks depending on track

📊 Time Breakdown

Actual times for this guide:

Phase	Time
Setup & Personalization	20-30 min
Git & Repository Setup	5-10 min
Platform Deployment	10-20 min
Verification & Testing	5-10 min
Custom Domain (optional)	+15 min
Total	45-75 min

🎉 Congratulations

Your site is now live! You’ve successfully:

✅ Personalized your branding
✅ Deployed to production
✅ Verified performance
✅ Tested across devices

We’d love to see what you’ve built:

Twitter/X - Tag @clownware
GitHub - Open a Show & Tell discussion
Discord - Share in Astro Discord

Keep Building

Your deployment is just the beginning. Explore the implementation guides, customize the design system, and let’s build something amazing.

Quick Deploy

🚦 Pre-Deployment Readiness Check

🎯 What You’ll Accomplish

Time Required: 45-75 minutes (first-time users)

✅ Prerequisites

Required

Platform Selection

📦 Understanding Your Build

📋 Deployment Checklist

🎨 Step 1: Personalize Your Site (20-30 min)

1.1 Site Configuration

Before

After

Action Steps

1.2 Site Metadata & SEO

Quick Checklist: What to Update

What to Change

1.3 Visual Branding

Favicon Replacement

Action Steps

Logo & Brand Colors (Optional)

1.4 Verify Changes Locally

🚀 Step 2: Deploy to Production (15-20 min)

2.1 Save Your Changes (Git)

If you already have commits

If this is your first commit

2.2 Platform Configuration

Option A: Cloudflare Pages (Recommended)

Step 1: Create Cloudflare Account

Step 2: Connect GitHub Repository

Step 3: Configure Build Settings

Step 4: Deploy

Step 5: Update Site URL & Redeploy

2.3 Environment Variables (Optional)

Option B: Vercel

Option C: Netlify

Option D: Render

Option E: GitHub Pages

2.4 Custom Domain (Optional, +15 min)

Cloudflare Pages

2.5 CI/CD Integration (Optional, Advanced)

Alternative: Vercel GitHub Integration

Alternative: Netlify GitHub Integration

✓ Step 3: Verify Your Deployment (5-10 min)

Deployment Checklist

Performance Check

Option 1: Chrome DevTools

Option 2: PageSpeed Insights

Option 3: Accessibility Testing

Target Scores (Fresh Deploy)

Test on Multiple Devices

🔎 Advanced Configuration

🆘 Troubleshooting

Build Fails on Platform

Error: pnpm: command not found

Error: build:tokens failed

Error: Module not found: @/components/...

Site Deploys But Shows Blank Page

Cause 1: Incorrect site URL

Cause 2: Build output directory mismatch

Cause 3: Base path issue

Images Not Loading

Cause: Incorrect asset paths

Styles Look Broken

Cause: Design tokens not built

Fonts Not Loading

Cause: Font files not in public directory or incorrect paths

Still Stuck?

🎓 What’s Next?

Path A: Content-First (Recommended)

Path B: Design Customization

Path C: Advanced Features

Path D: Full Implementation

📊 Time Breakdown

🎉 Congratulations

Share Your Success

Keep Building

Error: `pnpm: command not found`

Error: `build:tokens failed`

Error: `Module not found: @/components/...`

Cause 1: Incorrect `site` URL