shadowdao
6a0a461c26
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)
106 lines
3.8 KiB
Plaintext
106 lines
3.8 KiB
Plaintext
---
|
||
title: Getting started
|
||
description: Open Site Builder, pick a template or start from scratch, make your first edits, and publish.
|
||
sidebar:
|
||
order: 2
|
||
---
|
||
|
||
import { Steps, Aside } from '@astrojs/starlight/components';
|
||
import Beta from '~/content/partials/beta-callout.mdx';
|
||
import SignIn from '~/content/partials/signing-in.mdx';
|
||
import Support from '~/content/partials/support-link.mdx';
|
||
|
||
<Beta />
|
||
|
||
## Before you start
|
||
|
||
- A **site** added in WHP that you want Site Builder to manage. Any container type works — Site Builder writes its output to the site's docroot when you publish, so a **Static HTML** site is the cleanest fit.
|
||
- About 10–15 minutes for your first walkthrough.
|
||
|
||
## Sign in to WHP
|
||
|
||
<SignIn />
|
||
|
||
## Open Site Builder
|
||
|
||
<Steps>
|
||
|
||
1. In the sidebar, click **Site Builder**. You'll see a card for each site on your account.
|
||
|
||
|
||
2. Click **Build Site** on the site you want to edit. The visual editor opens.
|
||
|
||
</Steps>
|
||
|
||
## Pick a template (or start blank)
|
||
|
||
The editor opens onto an empty canvas, but the fastest way to get a real-looking site is to start from one of the 16 included templates.
|
||
|
||
<Steps>
|
||
|
||
1. Click **Templates** in the top bar.
|
||
|
||
|
||
2. Browse the categories: **Business**, **Creative**, **Personal**, **Community**, or **All**. Each card shows the template name, a tag (Business / Creative / etc.), a short description, and the page count.
|
||
|
||
3. Click a template to preview and apply. Most templates ship as multi-page sites with their own header, footer, and a few sample pages so you can see structure right away.
|
||
|
||
</Steps>
|
||
|
||
<Aside type="tip">
|
||
Applying a template replaces the current site contents. If you've already made edits, save first (or duplicate the site) so you can roll back.
|
||
</Aside>
|
||
|
||
If you'd rather start from scratch, skip Templates — the empty canvas with just a Header placeholder is the right starting point.
|
||
|
||
## Make your first edit
|
||
|
||
The editor has three panels:
|
||
|
||
- **Left:** the **Blocks** panel (also **Pages**, **Layers**, **Assets**).
|
||
- **Centre:** the canvas — what your visitors will see.
|
||
- **Right:** the **Styles** panel.
|
||
|
||
<Steps>
|
||
|
||
1. From the **Blocks** panel, drag a **Heading** block onto the canvas.
|
||
|
||
2. Click the heading on the canvas. An inline toolbar appears; type to replace the text.
|
||
|
||
3. Drag a **Text** block underneath and add a sentence or two.
|
||
|
||
4. Drag a **Button** block next. Click it, set its label and link in the right-side panel.
|
||
|
||
</Steps>
|
||
|
||
You've built your first page. The header at the top is the **shared header** — every page on the site uses it.
|
||
|
||
## Preview the result
|
||
|
||
The top bar has three device toggles next to the site name: **desktop**, **tablet**, **mobile**. Click each to see how your page looks at that width. The **Preview** button opens a full-window preview without the editor chrome.
|
||
|
||
## Save vs. publish
|
||
|
||
Two distinct actions:
|
||
|
||
- **Save** stores a draft. Your changes are kept on the server but the live site is unchanged.
|
||
- **Publish** writes the rendered HTML and assets to the site's docroot. Your visitors see the new version on the next request.
|
||
|
||
<Aside type="tip">
|
||
Save often as you work — every Save is a checkpoint. Publish only when you're happy with what you've built.
|
||
</Aside>
|
||
|
||
## Get back to the Site Builder list
|
||
|
||
Click **Back to Panel** in the top-left of the editor. You can come back any time and continue from where you left off.
|
||
|
||
## What's next
|
||
|
||
- **[Blocks & pages](/whp/site-builder/blocks-and-pages/)** — the rest of the block library, and how to add more pages.
|
||
- **[Styling your site](/whp/site-builder/styling/)** — set your colours and fonts in one place.
|
||
- **[Publishing & code injection](/whp/site-builder/publishing/)** — add analytics, custom fonts, or global CSS.
|
||
|
||
## Still stuck?
|
||
|
||
<Support />
|