The Git Qi path · 气

You've got the key.
Now understand the Qi.

This is the advanced path. You've used GitQi and you want to know how it works, why it's built the way it is, and how to extend it. The source is yours to read.

The philosophy

Local-first is not a feature.
It's a stance.

Most website tools rent you an experience. GitQi gives you back the page.

Your HTML is the database. Your Git repo is the history. Your machine is the only place your credentials ever live. No servers. No accounts. No vendor relationship.

Git is infrastructure, not the interface. The interface is the page itself — clicked, typed, styled, lived in. The plumbing is Git, and you never have to think about it if you don't want to.

You should have the Right to Repair your website. Own it completely. Move it anywhere. Read every line. Fork it without asking.

How GitQi works

One file. Two modes. Zero magic.

GitQi is a single JavaScript file that activates only when secrets.js is present beside your HTML. In public mode, it doesn't exist — it's been stripped. Nothing to serve, nothing to load.

Edit mode vs public mode

Edit mode activates only when secrets.js is detected — meaning only on your machine. Public mode is the default: the published HTML contains no editor code and no credentials. Your visitors see a static page; you see a toolbar.

🏷

The attribute system

Editable regions are marked with data-zone (whole sections), data-editable (text), and data-editable-image (images). The HTML is the schema — there's no separate config.

🔁

Multi-page sync

A tiny manifest called gitqi-pages.json lists every page in your site. When you add a page, rename a link, or restyle the nav, GitQi propagates the change to every other page on save.

🪟

File System Access API

GitQi writes your edits directly to your local folder using the browser's File System Access API. That's why Chrome, Edge, or any Chromium-based browser is required for editing — Safari and Firefox haven't shipped the API yet. The published site works everywhere.

The publish pipeline

When you click Publish, GitQi serializes the current DOM, strips the editor code and secrets.js, then pushes the result via the GitHub Contents API. GitHub Pages does the rest.

1. SerializeSnapshot the live DOM.
2. StripRemove editor & credentials.
3. PushGitHub Contents API.
4. ServeGitHub Pages deploy.
Self-hosting

Pin your own gitqi.js.

Loading gitqi.js from swill.github.io/gitqi is the easiest default, but it's not the only option. Fork, version-pin, and self-host — you own the whole stack.

Fork & host on your own Pages

  • Fork swill/gitqi.
  • Enable GitHub Pages on your fork.
  • Point your HTML at https://your-user.github.io/gitqi/gitqi.js.

Pin a specific version

Each release publishes a versioned copy — gitqi-1.2.0.js alongside the evolving gitqi.js. Pin for stability; upgrade on your own schedule.

🔒 Pinning protects you from upstream changes. The version you pin is the version you run, until you move it.

Release workflow

Cutting a release is a single make target. Versioned file is written, VERSION is bumped, a git tag is pushed:

make release VERSION=1.2.0
# writes gitqi-1.2.0.js
# updates VERSION
# tags v1.2.0
# pushes to origin

The evolving gitqi.js always mirrors the newest release. If you don't pin, you get the latest.

Contributing

The source is yours to read — and to shape.

GitQi is a single, annotated file. No build step. No transpiler. What you read is what ships. That's the whole invitation.

🐞

Bug fixes

Reproduce locally against the single-file source, write the fix in plain JS, open a PR. Every line should earn its place.

New features

Open an issue first with the user story. Small, focused changes that preserve the zero-dependency ethos land quickly.

📚

Documentation

The README is canonical. Corrections, clarifications, and better examples are always welcome — especially from Get Key users who got stuck.

The bootstrap prompt as a system

Your site isn't generated from a template. It's generated from you.

The bootstrap prompt is a structured brief: vibe, sections, tone, a few inspiration images. You paste it into Claude, attach the images, and get back a complete index.html with data-zone attributes in the right places — ready to edit in GitQi on first open.

How the prompt shapes the output

  • Inspiration images drive color, typography, and mood.
  • Section list drives structure and flow.
  • Vibe words drive motion, spacing, and embellishment.
  • Business details drive copy voice and CTAs.

Tips for better output

  • Use specific vibe words. "Warm, handcrafted, terracotta" beats "nice".
  • Attach more reference images, not fewer. 4–5 is a sweet spot.
  • List sections explicitly, in order. Say no to what you don't want.
  • Don't sweat the copy — you'll rewrite every word on the page.

Going further with Claude Code

Claude.ai with a free account is enough for most people to bootstrap a site. If you're comfortable paying for tooling, Claude Code gives you improved models inside a terminal with file-system access — ideal for larger refactors, multi-page regenerations, or automating updates across a whole site.

💡 If you're already a Get Key user who upgraded to a Claude subscription, Claude Code can edit your local index.html directly — a natural complement to GitQi's in-browser editor.

The prompt file itself

The bootstrap prompt lives in the repo as a markdown file. It's versioned, diffable, and forkable. Swap it for your own house-style prompt if you want every new site to feel familiar.

Own the stack

Read it. Fork it. Make it yours.

Everything GitQi does lives in one annotated file. No build step. No dependencies. The plumbing is Git; the interface is the page.