No technical background needed. Each step tells you what you're doing and why — so you understand it, not just copy it. Estimated time: about 30 minutes the first time.
On this page, you will get setup with the following...
Your website will be live at
<user>.github.io/<site>, with the ability
to customize your domain later.
Your website lives on your computer, edit by clicking in your browser, or create content with AI.
Click Publish to push the changes from your computer to the live site.
All the pieces you need before you start. Everything is free, nothing requires a credit card, and each account is set up in the steps below.
Chrome, Edge, Brave, Arc — any Chromium browser works, as we
depend on the File System Access API.
Edits are
made to local files through an editor in the browser.
Where your site's files live and from which GitHub Pages serves
your website, for free, forever.
Setup below.
Li
<username>.github.io/<site>
(can customize)
Google AI Studio provides the free API key GitQi uses to generate new sections and pages for your site. Setup below.
Where you run the bootstrap prompt that generates the first version of your website's HTML. Setup below.
One-time setup for all required tools and security.
secrets.js file
One-time setup — create the accounts, generate the keys, save them into a single local file that never leaves your computer.
Create and manage your website with AI, then publish with a click.
Leverage AI to generate your initial site structure from a prompt, then refine and expand its content directly in your browser with intuitive editing. Add new sections with AI prompts and publish your polished HTML to GitHub with a single click for instant deploys.
Four short setup tasks. Do each once, keep the credentials safe, and
you're done with setup forever. The final sub-step collects
everything into a single
secrets.js file used in the next section.
What you're doing: making a home on GitHub for your site's files to live, then giving GitQi narrow permission to push files into that one repository.
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 GitHub Pages — for free, forever, with no subscription. To push on your behalf, GitQi needs a Personal Access Token — scoped only to this one site repository, with no access to anything else on your account.
Create the repository:
+ icon →
New repository.
my-pro-site.
.gitignore, or a
license — GitQi will populate the repository for you.
Create the access token:
gitqi-my-pro-site so future-you remembers what it's
for.
ghp_.
You have an empty repository created and a token string starting
with ghp_ copied somewhere safe (a notes app is fine —
you'll move it into secrets.js shortly).
What you're doing: grabbing a free key from Google AI Studio so GitQi can generate new sections and pages for your site.
GitQi uses AI to help you add new content — describe a section and it appears, styled to match your site. 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.
AIza.
You have a key string starting with
AIza copied somewhere safe.
What you're doing: creating a free Claude.ai account — the AI you'll use to build the first version of your website from the GitQi bootstrap prompt.
GitQi doesn't use templates. Instead, it uses your ideas plus an AI to generate an HTML file (or multiple) that matches your business, your tone, and your visual taste — from the ground up. Claude.ai's free tier is well-suited to running the GitQi bootstrap prompt and producing a complete starter page. You describe it; Claude builds it. Everything it produces, you can edit word-by-word on the page later.
You're signed in at claude.ai and can see the chat interface. You'll come back here in the Building & Editing section to paste the GitQi bootstrap prompt.
What you're doing: saving your keys into one small file that lives only on your computer. It is never published.
GitQi needs to know your GitHub token, your Gemini key, and which
repository to publish to. Rather than asking you every time, it
reads these values 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.
my-pro-site/). This is where
secrets.js and your index.html (and
any other html files) will live side by side.
// 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-pro-site", // your GitHub username / repo name branch: "main" };
username/repository.
secrets.js in the folder you
created.
Your folder contains secrets.js with your real keys in
place. You'll add index.html next to it in the first
sub-step of Building & Editing.
secrets.js entirely before pushing anything
to GitHub. Your credentials are never in your repository and never
on the internet.
With setup done, everything from here on is just editing and publishing. Generate your starter HTML, link the folder, click to edit, and publish when you're ready.
What you're doing: writing a description of your site so Claude can build the first version for you.
This is the creative spark — a single prompt that becomes your starting HTML. Don't try to make it perfect here; establish a starting theme you're happy with. Everything it produces, you can edit word-by-word on the page later.
index.html, along with any other pages that may have
been generated.
You have an index.html file — your site's starting
point.
secrets.js and index.html in the
same folder.
What you're doing: placing the two files next to each other so GitQi can find your keys when the page loads.
GitQi activates only when it finds
secrets.js sitting next to your HTML file. This is how
it stays local-first — there's nothing to configure in a dashboard,
no server to talk to. Your folder is the whole setup.
index.html and any additional pages you
just saved into the same folder that holds
secrets.js (the folder you created in Setup, for
example my-pro-site/).
Your folder looks like this:
my-pro-site/ ├── index.html └── secrets.js ← stays on your machine, forever
What you're doing: loading your local
index.html in a Chromium-based browser so the GitQi
toolbar appears.
GitQi runs entirely in the browser. When it detects
secrets.js next to your HTML, it turns the page into an
editor — a toolbar appears at the top, and every element becomes
clickable. No install, no build step.
index.html file into a browser window — or
use File → Open File, or right-click the file and choose
Open With.
my-pro-site/ folder. This links GitQi to your
files so changes save automatically as you edit.
The GitQi toolbar is visible at the top of the page and your folder is linked. You're now in edit mode.
What you're doing: changing text, formatting, and images directly on the page — no forms, no dashboards, just the page itself.
The AI-generated HTML is a starting point. Almost nothing on the page will match your voice perfectly out of the gate, and that's by design. GitQi lets you adjust it in place — see your change, keep what works, change what doesn't.
The page reads the way you want it to read, in your own words.
What you're doing: using your Gemini key to generate new sections, reformats, or whole pages — styled to match the rest of your site.
Adding "a testimonials section" or "an FAQ about shipping" usually means fighting a template or writing HTML by hand. In GitQi you describe it in a sentence and a matching section appears. The site grows with your business, not against it.
The site has the sections and pages you need, styled consistently with the rest of the page.
main.
What you're doing: telling GitHub to serve the
main branch of your repository as a live website. A
one-time step.
GitHub Pages is the free service that turns the files in your
repository into a live website. You tell it which branch to serve
from — we'll point it at
main, which the first publish (next sub-step) creates.
Once configured, every subsequent publish automatically redeploys.
main and
Folder to / (root).
Pages is set to deploy from main. If
main doesn't exist yet (brand-new repo), Pages will
start serving the moment your first publish creates it.
What you're doing: clicking Publish, which pushes your clean HTML to GitHub. GitHub Pages serves it as a live website.
This is the moment everything becomes real. GitQi strips the editor
code and your secrets.js, then pushes the clean HTML to
GitHub. The first publish also creates the main branch
Pages needs to serve from — so the very first click is what brings
the site online.
main in your repo.
https://<username>.github.io/<my-pro-site>/. The first deploy takes about a minute — refresh if it's not
live yet.
Your site loads at the GitHub Pages URL. 🎉
index.html in Chrome whenever you want to change
something — click, type, click Publish.
What you're doing: using your own domain
(e.g. my-pro-site.com) instead of the
free username.github.io
URL.
Using a custom domain enhances your site's branding and professionalism, making it more memorable and potentially improving SEO.
CNAME file:
Create a file named CNAME (no extension) in your
src folder. This file should contain only your
domain name (e.g., my-pro-site.com). If you want
www.my-pro-site.com, put
www.my-pro-site.com
in it.
CNAME file, to GitHub Pages.
my-pro-site.com):
Create an A record pointing to GitHub Pages IP
addresses: 185.199.108.153,
185.199.109.153, 185.199.110.153,
185.199.111.153.
www Subdomain (www.my-pro-site.com):
Create a CNAME record pointing
www to
<username>.github.io
(e.g., swill.github.io).
Your site loads at your custom domain (e.g.,
https://my-pro-site.com
or
https://www.my-pro-site.com). 🚀
The editor has more tricks — reformatting, AI-generated sections, multi-page sync, favicon swap. A guided tour of what's possible.
You've got the key — now go deeper. The local-first philosophy,
self-hosting gitqi.js, the OSS source you can read
and fork.