From zero to your own live website. Step by step.

Why it matters

GitQi doesn't use templates. Instead, it uses your ideas and AI to generate an HTML file (or multiple) that matches your business, your tone, and your visual taste — from the ground up. You describe it; AI builds it. Everything it produces, you can edit word-by-word on the page later.

How to do it

1. Open the Bootstrap Prompt from the GitQi repository.
2. Fill in the bracketed fields: your name, your business, a tagline, the sections you want, and the vibe or feel you're going for. Be specific — "warm, earthy, handcrafted" is more useful than "nice".
3. Gather 2–5 screenshots or photos of sites, palettes, or designs you like. These are attached to the prompt, not uploaded anywhere permanent.
4. Open Claude.ai (a free account works), paste the prompt, attach your images, and send it.
5. Copy the HTML it produces and save it as index.html in a new folder on your desktop (e.g. my-site/).

Done when

You have an index.html file in a folder on your computer.

Why it matters

GitHub is where your site will live. GitQi publishes by pushing your HTML file to a GitHub repository, and GitHub then serves it as a live website through a feature called GitHub Pages — for free, forever, with no subscription. Your site is just a file in a folder on GitHub. You can always download it, move it, or delete it.

How to do it

1. Go to github.com and create a free account if you don't have one.
2. In the top-right, click the + icon → New repository.
3. Name it something simple and lowercase with hyphens, like my-clinic-site.
4. Set it to Public (required for free GitHub Pages).
5. Leave every other option at its default. You do not need to add a README, a .gitignore, or a license — GitQi will populate the repository for you.
6. Click Create repository.

Done when

You land on a page that says something like "Quick setup — if you've done this kind of thing before". The repository exists but is empty. That's exactly what we want. We'll come back and turn on GitHub Pages in Step 7, once there's a file in the repo for Pages to serve.

Why it matters

When you click Publish in GitQi, the tool needs to write your HTML file to GitHub. To do that, it needs permission. A Personal Access Token is how you grant that permission — scoped only to this one site repository, with no access to anything else on your account.

How to do it

1. On GitHub, click your profile photo (top-right) → Settings.
2. Scroll to the bottom of the left sidebar → Developer settings.
3. Click Personal access tokens → Fine-grained tokens.
4. Click Generate new token.
5. Give it a name like gitqi-my-site so future-you remembers what it's for.
6. Set expiration to not expire, or expire in 1 year (in which case you'll repeat this step once a year).
7. Under Repository access, choose Only select repositories and pick the repository you just created.
8. Under Permissions → Repository permissions, find Contents and add it, then set it to Read and write.
9. Click Generate token and copy the token immediately — GitHub only shows it once. It starts with ghp_.

Done when

You have a token string starting with ghp_ copied somewhere safe (a notes app is fine — we'll move it into a file in Step 5).

Why it matters

GitQi uses AI to help you add new content — describe a section and it appears, styled to match your site. To do this, it needs access to an AI model. Google AI Studio provides a free API key with a generous usage limit — no billing, no credit card, no payment details required. It's the easiest free AI key on the internet.

How to do it

1. Go to aistudio.google.com and sign in with your Google account (Gmail works fine).
2. Accept the terms of service if prompted.
3. Click Get API key in the left sidebar (or at aistudio.google.com/api-keys).
4. Click Create API key. If AI Studio asks you to pick a Google Cloud project, let it create a new one for you — you don't need to configure it.
5. Copy the key that appears. It starts with AIza.

Done when

You have a key string starting with AIza copied somewhere safe.

Why it matters

GitQi needs to know your GitHub token, your AI key, and which repository to publish to. Rather than asking you every time, it reads this from a file called secrets.js that sits next to your HTML. This file is the only thing you configure. It never gets uploaded — GitQi is specifically designed to strip it out before publishing.

How to do it

1. Open a plain-text editor (Notepad on Windows, TextEdit on Mac — on Mac, switch to plain-text mode under Format → Make Plain Text).
2. Paste the following exactly:

// secrets.js — lives beside your HTML, never published
window.SITE_SECRETS = {
  geminiKey:   "AIza...",              // your Google AI key
  githubToken: "ghp_...",              // your GitHub token
  repo:        "username/my-site",     // your GitHub username / repo name
  branch:      "main"
};

3. Replace the placeholder values with your actual keys and repository details.
4. Save the file as secrets.js in the same folder as your index.html.

Done when

Your folder looks like this:

my-site/
├── index.html
└── secrets.js    ← stays on your machine, forever

Why it matters

GitQi activates automatically when it detects secrets.js next to your HTML file. You'll see a toolbar at the top of the page. From here you edit everything directly on the page — no forms, no dashboards, just the page itself. When you click Publish, your file lands in GitHub. That first publish is also what creates the main branch in your repository — which is a thing we'll need for the last step.

How to do it

1. Open Chrome, Edge, or another Chromium-based browser. Safari and Firefox don't support the required File System Access API yet.
2. Drag your index.html file into a browser window — or use File → Open File, or right-click the file and choose Open With.
3. You'll see the GitQi toolbar appear at the top of the page.
4. Click Select Folder and choose your my-site/ folder. This links GitQi to your files so changes save automatically as you edit.
5. Click any text to edit it. Select text to bring up formatting options (bold, italic, fonts, colors, links).
6. Click any image to swap it for one from your computer.
7. When you're ready, click Publish. GitQi strips the editor code and your secrets.js, then pushes the clean HTML to GitHub.

Done when

You see a "Published ✓" confirmation. If you now go to your GitHub repository, you'll see your index.html file in the file list — and the repository will show a main branch. That's new. The empty repository now has a branch and a file, which means we can finally turn Pages on.

Why it matters

This is the step we deferred from Step 2. We couldn't do it earlier because GitHub Pages needs a branch to serve from — and a brand-new empty repository has no branches. Your first publish in Step 6 created the main branch. Now we can point GitHub Pages at it and your site goes live.

How to do it

1. Go to your repository on GitHub.
2. Click Settings (in the repository's own menu bar — not your account settings).
3. In the left sidebar, click Pages.
4. Under Source, choose Deploy from a branch.
5. Set Branch to main and Folder to / (root).
6. Click Save.
7. GitHub shows a banner like "Your site is live at https://your-username.github.io/your-repo-name/". The first deploy takes about a minute.

Done when

You can visit the URL GitHub showed you, and your site loads. 🎉