Build the Static Site#

The Acme UI Docs project now has Pages, user-owned site data, a docs layout wrapper, menu structure, brand assets, and the first documented component.

Run the production build#

npm run build

Rocket writes the static output to dist/.

Inspect the output#

Check that the important Pages exist:

ls dist
ls dist/components/button
ls dist/brand

Then preview the built files:

npm run preview

Visit these paths in the preview server:

• /
• /getting-started
• /brand
• /components/button

Final project shape#

Your project should now look like this:

acme-ui-docs/
├── package.json
├── rocket-config.js
└── src/
    ├── assets/
    │   ├── acme-mark.svg
    │   └── acme-wordmark.svg
    ├── components/
    │   └── AcmeButton.js
    ├── docsLayout.js
    ├── pages/
    │   ├── brand.rocket.md
    │   ├── getting-started.rocket.md
    │   ├── index.rocket.md
    │   └── components/
    │       ├── button.rocket.md
    │       └── index.rocket.md
    └── siteData.js

Where to go next#

• Continue with Component Loading when you document components that need browser behavior.
• Continue with Request-time JavaScript Pages when part of the Acme UI Docs site should respond to request params.
• Use Pages when you add sections, guides, and API reference.
• Use Menus when the navigation order needs refinement.
• Use Assets when Pages need more images or CSS.
• Use Deploy when you are ready to publish.

Checkpoint#

The static-site chapter ends with complete static documentation output. Every file under src/ is owned by the Acme UI Docs project, while Rocket supplies the build pipeline and reusable atlas docs layout.