Static Starter

Build beautiful static websites with AI assistance. No complicated setup required.

What is This?

Static Starter is a template for building websites. It gives you:

• Ready-to-use CSS - Professional styling without writing CSS from scratch
• Organized structure - Know exactly where every file goes
• AI assistance - Claude Code understands this project and helps you build
• Best practices - Security, SEO, and accessibility built-in
• Easy deployment - Host for free on Cloudflare Pages, Netlify, or GitHub Pages

Perfect for: portfolios, business sites, landing pages, blogs, and more!

---

Prerequisites

Before you start, you'll need:

1. A code editor - We recommend VS Code (free)
2. Git - For version control (Download Git)
3. A GitHub account - For hosting your code (Sign up free)

New to these tools? Check out our beginner guides:

• Git for Beginners
• VS Code for Beginners
• Claude Code for Beginners

---

Quick Start (5 minutes)

Step 1: Get the Code

Option A: Use as Template (Recommended)

1. Click the green "Use this template" button on GitHub
2. Name your repository (e.g., "my-websites")
3. Click "Create repository"
4. Clone your new repository:

   git clone https://github.com/YOUR-USERNAME/my-websites.git
   cd my-websites

Option B: Clone Directly

git clone https://github.com/YOUR-USERNAME/static-starter.git
cd static-starter

Step 2: Open in VS Code

code .

Or: Open VS Code → File → Open Folder → Select the folder

Step 3: Create Your First Website

Copy the template folder and give it your domain name:

Windows (Command Prompt):

xcopy _template my-website.com /E /I

Mac/Linux:

cp -r _template my-website.com

Step 4: Copy the CSS

Copy the CSS files to your project:

Windows:

copy @css\main.css my-website.com\css\
copy @css\variables.css my-website.com\css\

Mac/Linux:

cp @css/main.css my-website.com/css/
cp @css/variables.css my-website.com/css/

Step 5: Customize Your Colors

Open my-website.com/css/variables.css and change the colors:

:root {
  --primary: #3498db;      /* Your main brand color */
  --secondary: #2c3e50;    /* Your secondary color */
  --action: #e74c3c;       /* Button/CTA color */
}

Step 6: Edit Your Content

Open my-website.com/index.html and start editing!

Replace the placeholder text:

• [Project Name] → Your website name
• [Page Title] → Page title
• [CDN_URL] → Your image hosting URL (or use placeholder images for now)

Step 7: Preview Your Site

Install the "Live Server" extension in VS Code, then:

1. Right-click index.html
2. Select "Open with Live Server"
3. Your site opens in the browser!

---

Project Structure

Here's what each folder is for:

static-starter/
│
├── @docs/                  📚 Documentation & guides
│   ├── git/                   Git for beginners
│   ├── vscode/                VS Code for beginners
│   ├── claude-code/           Claude Code for beginners
│   ├── accessibility/         Making sites accessible
│   ├── seo/                   Search engine optimization
│   └── ...                    More guides
│
├── @css/                   🎨 CSS Framework
│   ├── main.css               The complete CSS (don't edit)
│   └── variables.css          Your customizations
│
├── @images/                🖼️ Image hosting guide
│
├── _template/              📁 Starting point for new sites
│
├── my-website.com/         🌐 Your website (example)
│   ├── css/                   CSS files
│   ├── fonts/                 Custom fonts
│   ├── js/                    JavaScript
│   ├── legal/                 Privacy policy, terms
│   ├── index.html             Homepage
│   └── _headers               Security settings
│
├── CLAUDE.md               🤖 AI instructions
├── README.md               📖 This file
└── .gitignore              🚫 Files Git should ignore

---

Customizing Your Site

Changing Colors

Edit your-site/css/variables.css:

:root {
  /* Brand Colors - change these! */
  --primary: #your-color;     /* Main brand color */
  --secondary: #your-color;   /* Secondary color */
  --action: #your-color;      /* Buttons, links */

  /* These work automatically */
  --success: #22c55e;         /* Green - success messages */
  --warning: #f59e0b;         /* Yellow - warnings */
  --danger: #ef4444;          /* Red - errors */
}

Using CSS Classes

The CSS framework uses simple class names:

Layout:

<!-- 3 column grid -->
<div class="grid grid--3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

<!-- 2 columns on desktop, 1 on mobile -->
<div class="grid grid--2 grid--1-m">
  <div>Left</div>
  <div>Right</div>
</div>

Spacing:

<section class="padding--l margin-bottom--xl">
  Content with large padding and extra-large bottom margin
</section>

Text:

<h1 class="text--xxl text-align--center">Big Centered Heading</h1>
<p class="text--m text--neutral">Medium gray text</p>

Buttons:

<button class="btn btn--primary">Primary Button</button>
<button class="btn btn--action btn--outline">Outline Button</button>

---

Using AI Assistance

This project is designed to work with Claude Code. When you open this project in VS Code with Claude Code installed:

1. Claude automatically reads CLAUDE.md and understands the project
2. Ask Claude to help you build features
3. Claude knows how to use the CSS framework correctly

Example requests:

"Create a hero section with a heading, description, and CTA button"
"Add a 3-column features section"
"Make a contact form using Web3Forms"
"Fix the mobile layout"

See @docs/claude-code/README.md for more tips.

---

Deploying Your Site (Free!)

Option 1: Cloudflare Pages (Recommended)

1. Push your code to GitHub
2. Go to Cloudflare Pages
3. Click "Create a project"
4. Connect your GitHub repository
5. Set build output directory to your site folder (e.g., my-website.com)
6. Click "Save and Deploy"

Done! Your site is live at your-project.pages.dev

Option 2: Netlify

1. Go to Netlify
2. Drag and drop your site folder
3. Done! Your site is live

Option 3: GitHub Pages

1. Go to your repo on GitHub
2. Settings → Pages
3. Select source: main branch, folder: your site folder
4. Done! Your site is live at username.github.io/repo-name

---

Adding a Contact Form

Use Web3Forms for free, no-backend forms:

1. Get your access key at https://web3forms.com
2. Add this form to your HTML:

<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <label for="name">Name</label>
  <input type="text" name="name" required>

  <label for="email">Email</label>
  <input type="email" name="email" required>

  <label for="message">Message</label>
  <textarea name="message" required></textarea>

  <button type="submit" class="btn btn--primary">Send</button>
</form>

See @docs/web3forms/README.md for more details.

---

Managing Multiple Sites

This structure lets you manage multiple websites in one repository:

static-starter/
├── @css/                   # Shared CSS
├── @docs/                  # Shared documentation
├── _template/              # Template for new sites
│
├── portfolio.com/          # Site 1
├── business-name.com/      # Site 2
├── side-project.com/       # Site 3
└── ...

Each site deploys independently. Just point your hosting to the right folder.

---

Need Help?

Documentation

• Git for Beginners - Version control basics
• VS Code for Beginners - Editor setup
• Claude Code for Beginners - AI assistance
• Accessibility - Making sites accessible
• SEO - Search optimization
• Security - Keeping your site safe

External Resources

• MDN Web Docs - HTML, CSS, JavaScript reference
• web.dev - Web development best practices
• CSS-Tricks - CSS tutorials and guides

Ask Claude!

If you have Claude Code installed, just ask:

"How do I add a new page?"
"What's the best way to make this responsive?"
"Explain how the grid system works"

---

License

MIT License - free to use for personal and commercial projects.

---

Contributing

Found a bug? Have an improvement? Contributions are welcome!

1. Fork this repository
2. Make your changes
3. Submit a pull request

---

Happy building! 🚀