# First Named Page Exercise

This exercise follows one page, **About**, from the editor to the public site and back to its history. It reuses the existing guides rather than repeating them: each step names the guide that holds the screenshots and field detail. No time estimate is given because none has been measured with a new user.

## Before you start

- A Capell site is installed and you can open `/admin`. If not, use [the developer start](https://docs.capell.app/start-here/#i-install-or-build-a-site) first, or [ask your administrator](https://docs.capell.app/start-here/editors/#when-to-ask-your-administrator).
- Your account can create or edit **Pages** for the site you are working on.
- You know which site is selected in the **site switcher**.
- You can open a private browser window, which has no admin session.

## The exercise

Page to create: title `About`, slug `about`, no parent, so the public path is `/about`.

| Step | Do this | You should see | Guide |
| --- | --- | --- | --- |
| 1. Start | Open **Pages**, check the selected site, choose **New page** and a page type. | A form whose fields come from the page type's blueprint. | [Start from Pages](https://docs.capell.app/core/getting-started/create-your-first-page/#start-from-pages) |
| 2. Place it | Leave **Parent Page** empty. Set the title to `About` and keep the slug `about`. | The URL preview shows the site domain followed by `/about`. | [Understand parents and URLs](https://docs.capell.app/core/getting-started/create-your-first-page/#understand-parents-and-urls) |
| 3. Write | Add a short opening sentence and one paragraph of body copy. | Your text in the page type's content field. | [Write the content](https://docs.capell.app/core/getting-started/create-your-first-page/#write-the-content) |
| 4. Choose the layout | Keep the default **Layout** unless your project registered another. Leave **Visible From** empty. | A Layout selection that is separate from the page's Blueprint and content. | [Pick a layout and publish timing](https://docs.capell.app/core/getting-started/create-your-first-page/#pick-a-layout-and-publish-timing-optional) |
| 5. Save a draft | Choose **Save as draft**. | A saved page that anonymous visitors cannot see. Checking `/about` in a private window should not show your text yet. | [Save as draft first](https://docs.capell.app/core/getting-started/create-your-first-page/#save-as-draft-first) |
| 6. Preview | Reopen the draft and choose **Preview draft**. | Your text in the real theme, in another tab. This is a signed preview and it is not public. | [Preview and publish](https://docs.capell.app/core/getting-started/create-your-first-page/#preview-and-publish) |
| 7. Publish | Choose **Save and Publish**, or the **Publish** action your workflow provides. | No remaining validation or approval message. | [Preview and publish](https://docs.capell.app/core/getting-started/create-your-first-page/#preview-and-publish) |
| 8. Check the public page | Open the site's `/about` in a private window. | Your text, without an admin login. | [Preview and publish](https://docs.capell.app/core/getting-started/create-your-first-page/#preview-and-publish) |
| 9. Change and recheck | Edit one sentence, save, and reload the private window. | The new sentence reaches visitors. | [Troubleshooting](https://docs.capell.app/core/operations/troubleshooting/#published-pages-still-show-old-content) if it does not |
| 10. Find the history | Open the About page's **Page History** and read the entries for your saves. | One entry per save, with rollback available from a preview. Rollback adds a new entry and does not erase later ones. | [Page event history](https://docs.capell.app/core/development/page-event-history/) |

If an image is wanted, add it after step 8 with [Add an image](https://docs.capell.app/core/getting-started/create-your-first-page/#add-an-image-optional).

## What each result tells you

| What you saw | What it shows |
| --- | --- |
| The fields in step 1 | A page type's blueprint decides the editing fields. See [Blueprints](https://docs.capell.app/core/getting-started/types/). |
| The URL in step 2 | A page's URL is built from its place in the page tree. |
| The preview in step 6 | A draft can be reviewed in the real theme without being published. |
| The private-window page in steps 8 and 9 | Publishing and cache refresh worked, because anonymous visitors see the change. |
| The entries in step 10 | Every save is recorded, so a Page change can be undone from Page History. |

Next lesson: [the four distinctions](https://docs.capell.app/understand-core/model-and-terms/) explain what you would be changing if this page used blocks, a Layout Builder layout or a shared section.

## Developer continuation: one safe bespoke public result

Use this after the exercise if the About page needs a bespoke design. It stays inside Capell's normal public response path.

1. Read [Build a page](https://docs.capell.app/core/getting-started/building-pages/#4-custom-blade-rendering-developers). A page has no `view_file` of its own. Create a dedicated layout and assign it only to About.
2. In the layout's **Files** section set `master_file` to a Blade view name for the page body and, if you need a different document shell, `layout_file`. The renderer renders `master_file` first and passes the result to `layout_file` as its `slot`. Without values it uses `capell::livewire.page.page` and `capell::app`.
3. In the body view, read prepared data from `\Capell\Frontend\Support\Render\PublicRenderDataScope::current()`. It returns the prepared render DTO during a response render and `null` outside one. See [Render hooks and prepared render data](https://docs.capell.app/packages/frontend/extending-render-hooks/#prepared-layout-render-data). Do not query models or lazy-load relationships in the view.
4. Print one sentence that comes from the About page's content, for example its title.
5. Publish, then open `/about` in a private window and view the page source. The sentence should be present, and the source should show no admin IDs, selectors, permissions, package internals or signed editor URLs. [Public HTML safety](https://docs.capell.app/core/frontend/public-html-safety/) lists what must stay out.

That result proves the body and shell contract for one page: the dedicated layout selected your view, the view used prepared data, and anonymous HTML stayed free of authoring state. Packages that add behaviour around this path start at [Extend Capell](https://docs.capell.app/extend-capell/).

[Editors: your start](https://docs.capell.app/start-here/editors/)
  [Developers: install and build](https://docs.capell.app/start-here/#i-install-or-build-a-site)