docs(site-builder): add 5-article Site Builder section (Beta)
Build and deploy / deploy (push) Successful in 23s

Adds /whp/site-builder/ with overview, getting-started, blocks-and-pages,
styling, and publishing. Wired as a 'Site Builder' sidebar group with a
Beta badge.

- Captured real screenshots via the demo account through a redaction
  step (server names, domain, demo-user all swapped for placeholders)
- New beta-callout partial shared across all 5 articles
- capture-site-builder.ts is local-only (uses tools/screenshots/.env
  for demo creds, never runs in CI)
This commit is contained in:
2026-05-17 18:40:47 -07:00
parent ebbb75d7f5
commit 6a0a461c26
14 changed files with 574 additions and 0 deletions
@@ -0,0 +1,79 @@
---
title: Publishing & code injection
description: Drafts vs. publish, device previews, and adding analytics, custom fonts, or global CSS via the custom head code panel.
sidebar:
order: 5
---
import { Aside } from '@astrojs/starlight/components';
import Beta from '~/content/partials/beta-callout.mdx';
import Support from '~/content/partials/support-link.mdx';
<Beta />
## Drafts vs. publish
Site Builder separates "save my edits" from "make these edits live."
- **Save** stores your edits as a draft on the server. You can close the editor and come back; your work is preserved. The live site doesn't change.
- **Publish** renders the site, writes the resulting HTML and assets to the site's docroot, and serves it to visitors on the next request.
The two buttons are in the top right of the editor.
<Aside type="tip">
Treat **Save** as your "ctrl-S" and **Publish** as your release button. Save liberally; publish when you're ready.
</Aside>
## Preview before publishing
Two previews are available, both without affecting the live site:
- **Inline preview** — the desktop/tablet/mobile toggle on the top bar swaps the canvas viewport so you can see how the page reflows.
- **Full-window preview** — click **Preview** at the top to see your draft rendered without the editor chrome. Use this to read the page like a visitor.
If you want to share a preview with someone outside your account, save the draft, then publish to a staging site (a separate WHP site you keep around for review).
## Custom head code
The **Code** button at the top of the editor opens a modal where you can paste content into the `<head>` of every page on the site.
![Custom head code editor](~/assets/screenshots/whp/whp-site-builder-code.png)
Common uses:
- **Google Analytics, Plausible, Fathom, or other analytics** — paste the tracking snippet they give you.
- **Custom fonts** — `<link>` tags pointing at Google Fonts, Fontsource, or your own hosted font.
- **Global CSS overrides** — inline `<style>` blocks for tweaks the Styles panel can't reach.
- **Verification tags** — `<meta>` tags for Google Search Console, Bing Webmaster, etc.
Click **Done** to close the modal. The code is injected on the next publish.
<Aside type="caution">
Whatever you paste here runs on every page. Test analytics in your browser's dev tools before publishing widely, and keep any inline `<script>` content small — slow scripts make every page slower.
</Aside>
## Undo / redo
The two arrows in the top toolbar (left of **Templates**) walk your edit history backwards and forwards. They cover the current editing session — once you close the editor and come back, the undo stack resets.
## Reverting a published version
Site Builder writes a clean copy on each publish, so there's no built-in "rollback" button. If you publish a version you regret:
- Make the corrective edits and publish again — usually the fastest fix.
- For more serious mistakes, restore from a [WHP backup](/whp/how-to/backups/). The site's domain folder is included in your scheduled site backups.
## Submitting feedback
Site Builder is in beta. The top bar has a **Submit feedback** link — please use it for anything weird, missing, or broken. The team reads every report.
## Related
- [Getting started](/whp/site-builder/getting-started/)
- [Blocks & pages](/whp/site-builder/blocks-and-pages/)
- [Styling your site](/whp/site-builder/styling/)
- [Backups](/whp/how-to/backups/)
## Still stuck?
<Support />