# Pages

## Pages

**Skill level:** Beginner to edit, light code to add a page made of sections

Every page has two parts: a **route file** in `src/pages/[...lang]/`, which decides which sections the page shows and in what order, and a **content file** in `src/content/`, which holds its title, SEO fields, page header, and named blocks. You edit the content file; you only touch the route to add, remove, or reorder sections.

### Every Page And Its File
Paths are for English. French uses the same files in `french/`, served under `/fr/` (for example `/fr/pricing/`).

#### Homepages
| Page | URL | Route (`src/pages/[...lang]/`) | Content (`src/content/`) |
| --- | --- | --- | --- |
| Main homepage | `/` | `index.astro` | `homepage/english/-index.md` |
| Cleaning company | `/home-cleaning/` | `home-cleaning.astro` | `homepage/english/home-cleaning.md` |
| Commercial cleaning | `/home-commercial/` | `home-commercial.astro` | `homepage/english/home-commercial.md` |
| Handyman | `/home-handyman/` | `home-handyman.astro` | `homepage/english/home-handyman.md` |

The three extra homepages are demos: they ship with `robots: "noindex, follow"` and `excludeFromSitemap: true`. See [Homepages](/homio/customization/homepages/) to pick one as your home.

#### Services, Prices, And Booking
| Page | URL | Route | Content |
| --- | --- | --- | --- |
| Services | `/services/` | `services/index.astro` | `services/english/-index.md` |
| Service page | `/services/<file>/` | `services/[single].astro` | `services/english/<file>.md` |
| Industries | `/industries/` | `industries/index.astro` | `industries/english/-index.md` |
| Industry page | `/industries/<file>/` | `industries/[single].astro` | `industries/english/<file>.md` |
| Pricing | `/pricing/` | `pricing.astro` | `pricing/english/-index.md` |
| How it works | `/how-it-works/` | `how-it-works.astro` | `pages/english/how-it-works.md` |
| Book | `/book/` | `book.astro` | `pages/english/book.md` and `sections/english/booking-section.md` |
| Booking sent | `/book/thanks/` | `book/thanks.astro` | `pages/english/book-thanks.md` |
| Service areas | `/areas/` | `areas/index.astro` | `areas/english/-index.md` |
| Area page | `/areas/<file>/` | `areas/[single].astro` | `areas/english/<file>.md` |

#### Company And Trust
| Page | URL | Route | Content |
| --- | --- | --- | --- |
| About | `/about/` | `about.astro` | `about-us/english/-index.md` |
| Team | `/team/` | `team/index.astro` | `team/english/-index.md` and one file per member |
| Reviews | `/reviews/` | `reviews.astro` | `pages/english/reviews.md`, reviews from `reviews/english/` |
| Projects | `/projects/` | `projects/index.astro` | `projects/english/-index.md` |
| Project page | `/projects/<file>/` | `projects/[single].astro` | `projects/english/<file>.md` |
| Our guarantee | `/guarantee/` | `guarantee.astro` | `guarantee/english/-index.md` |
| Careers | `/careers/` | `careers/index.astro` | `careers/english/-index.md` |
| Job page | `/careers/<file>/` | `careers/[single].astro` | `careers/english/<file>.md` |

#### Help, Offers, And Blog
| Page | URL | Route | Content |
| --- | --- | --- | --- |
| FAQ | `/faq/` | `faq.astro` | `faq/english/-index.md` |
| Contact | `/contact/` | `contact.astro` | `contact/english/-index.md` and `sections/english/contact-section.md` |
| Gift cards | `/gift-cards/` | `gift-cards.astro` | `pages/english/gift-cards.md` |
| Referral | `/referral/` | `referral.astro` | `pages/english/referral.md` |
| Blog | `/blog/`, `/blog/page/<n>/` | `blog/index.astro`, `blog/page/[slug].astro` | `blog/english/-index.md` |
| Blog post | `/blog/<file>/` | `blog/[single].astro` | `blog/english/<file>.mdx` |
| Category and tag lists | `/blog/category/<name>/`, `/blog/tag/<name>/` | `blog/category/`, `blog/tag/` | built from the posts' `categories` and `tags` |
| RSS feed | `/blog/rss.xml` | `blog/rss.xml.ts` | built from the posts |

#### Text Pages, Tools, And Files
| Page | URL | Route | Content |
| --- | --- | --- | --- |
| Privacy policy, terms, cookie policy, cancellation policy | `/privacy-policy/`, `/terms-conditions/`, `/cookie-policy/`, `/cancellation-policy/` | `[page].astro` | `pages/english/<file>.md` |
| Shortcode demo | `/components/` | `[page].astro` | `pages/english/components.mdx` |
| Layout gallery | `/elements/` | `elements.astro` | `pages/english/elements.md` |
| 404 | any missing URL | `404.astro` (and `src/pages/404.astro`) | `sections/english/not-found-section.md` |
| AI and search files | `/llms.txt`, `/llms-full.txt`, `/robots.txt`, `<page>.md` | `llms.txt.ts`, `llms-full.txt.ts`, `src/pages/robots.txt.ts`, `src/pages/[...path].md.ts` | built from your content and `config.toml`. See [SEO & AI Visibility](/homio/customization/seo-ai-visibility/) |

Every file in `src/content/pages/` becomes a page at `/<file name>/` through `[page].astro`, except `elements`, `book`, `book-thanks`, `how-it-works`, `reviews`, `gift-cards`, and `referral`, which have their own routes.

Four older addresses are kept as redirects in `astro.config.mjs`: `/testimonials/` goes to `/reviews/`, `/customers/` to `/projects/`, `/security/` to `/guarantee/`, and `/solutions/` to `/industries/`. You can delete those lines on a new site.

Each collection (services, areas, industries, projects, reviews, careers, team, blog) is explained in [Collections](/homio/customization/collections/).

### Sample Pages To Replace Or Remove
Homio ships with a full demo business. Before launch:

| Replace with your own | Where |
| --- | --- |
| The 10 sample services, their prices, and add-ons | `src/content/services/`, `src/content/pricing/` |
| The 4 sample service areas (fictional places and ZIP codes) | `src/content/areas/` and the areas menus |
| The 19 sample reviews and the rating figures | `src/content/reviews/`, `src/content/sections/*/trust-strip.md` |
| The 6 sample projects and their photos | `src/content/projects/` |
| The 8 team members, 6 job openings, 6 posts, and 2 authors | `team/`, `careers/`, `blog/`, `author/` |
| The 6 industries | `src/content/industries/` (or remove the pages) |
| The placeholder legal texts | `privacy-policy.md`, `terms-conditions.md`, `cookie-policy.md`, `cancellation-policy.md` in `src/content/pages/` |

| Remove if you don't need it | Files |
| --- | --- |
| The three demo homepages | `home-cleaning.astro`, `home-commercial.astro`, `home-handyman.astro` and their files in `src/content/homepage/` |
| The shortcode demo `/components/` | `src/content/pages/english/components.mdx` (and `french/`) |
| The layout gallery `/elements/` | `src/pages/[...lang]/elements.astro` and `pages/english/elements.md` (and `french/`) |
| Gift cards, referral, industries | Their route files and content files |

Sample facts are marked `# sample` in the content files: search the project for `# sample` to find them all. The job openings in particular feed `JobPosting` data for search engines: keep only real, open roles.

The **Pages** menu in the header (in `src/config/menu.en.json` and `menu.fr.json`) lists every page of the theme for the demo. Remove it, or set its `"enable"` to `false` in both files, before launch. See [Menus](/homio/customization/menus/).

### Page Header
Most inner pages open with a page header. Its title is the page's `title`; everything else is in a `pageHeader` block of the page file:

```yaml
# src/content/faq/english/-index.md
title: "Questions before you book"
pageHeader:
  breadcrumb: true
  eyebrow: ""
  description: "Short answers about prices, the visit, your crew, and changes. Each one links to the detail."
  image: "/images/steps/book-on-phone-hands.jpg"
  options:
    layout: "split" # default | intro | centered | split
```

The four layouts and all fields are in [Section Layouts](/homio/customization/section-layouts/#page-header). The about page and the homepages open with their own hero section instead. Service pages use the service hero, whose look follows the service's template.

### Fields Every Page Accepts
These frontmatter fields work on page and entry files. `src/content/_file_format.md` explains most of them; the full list is the `page` schema in `src/content.config.ts`.

| Field | What it does |
| --- | --- |
| `title`, `description` | The page title and summary |
| `metaTitle`, `metaDescription` | Replace the title and description in search results only |
| `image`, `imageDark` | Social preview image for this page (and the photo on cards, for entries); `imageDark` is an optional dark mode version |
| `draft` | `true` leaves the page out of the built site (it still shows in `npm run dev`) |
| `customSlug` | A different URL segment than the file name. Use the same value in every language |
| `canonical`, `robots`, `keywords` | SEO overrides |
| `excludeFromSitemap`, `excludeFromAi` | Leave the page out of the sitemap, or out of `llms.txt` and the Markdown copies |
| `excludeFromCollection` | Keep an entry's page but leave it out of lists (services, industries, projects) |
| `disableTagline` | Don't add the site tagline to this page's title |
| `date`, `updated` | Publish date and last meaningful edit, used in structured data and the sitemap |
| `headerLayout` | `default`, `simple`, `centered`, or `utility`: another header on this page. See [Header & Mobile Bar](/homio/customization/header/) |
| `footerLayout` | `default`, `minimal`, `large`, or `columns`: another footer on this page. See [Footer & CTA Band](/homio/customization/footer/) |
| `primaryCta` | The main button on this page only (`label`, `url`, `announcement`) |
| Named blocks | `pageHeader`, `ctaSection`, `questionsSection`, … See [Sections](/homio/customization/sections/#blocks-each-page-reads) |

### Add A Page
<Tabs>
  <TabItem label="A text page (no code)">

    For policies, guides, or any page of text. Homio renders every file in `src/content/pages/` as a page.

    <Steps>

    1. Copy `src/content/pages/english/cancellation-policy.md` to a new file, for example `src/content/pages/english/pet-policy.md`. The file name becomes the URL: `/pet-policy/`.

    2. Change `title`, `description`, `date`, and the Markdown body. The `contentPage` block adds an optional `notice` above the text and a `summary` ticket of key facts beside it; delete it if you don't need them.

    3. Create the French version in `src/content/pages/french/` with the **same file name**.

    4. Add a link to it in `src/config/menu.en.json` and `menu.fr.json`, for example in the footer's **Legal** column.

    </Steps>

  </TabItem>
  <TabItem label="A page made of sections (light code)">

    For landing pages that reuse Homio's sections. The demo homepages are the model: their route reads one file from the `homepage` collection and lists its sections in order.

    <Steps>

    1. Copy `src/pages/[...lang]/home-handyman.astro` to `src/pages/[...lang]/spring-offer.astro`. The file name becomes the URL: `/spring-offer/`.

    2. In the new route, change `"home-handyman"` in `getEntryCTM("homepage", ...)` to `"spring-offer"`, and edit the `sections` list to the blocks you want, in order.

    3. Create `src/content/homepage/english/spring-offer.md` with a `title`, a `metaDescription`, and one named block per section, each with `enable: true`. Copy blocks from the other homepage files.

    4. Create the French file in `src/content/homepage/french/`, add the page to the menus, and run `npm run astro-check`.

    </Steps>

    Don't build a section page from a file in `src/content/pages/`: every file there is also built as a text page at the same URL.

  </TabItem>
</Tabs>

### Remove A Page
1. Delete its route file in `src/pages/[...lang]/` and its content (file or folder) in `src/content/`, in every language.
2. Remove its links from `src/config/menu.en.json`, `menu.fr.json`, and any content file or button that links to it (search the project for the URL, for example `/gift-cards/`).
3. Run `npm run astro-check`, then `npm run build`, to make sure nothing still points to it.

To hide a page without deleting it, set `draft: true` in its content file.

<Aside type="note">
  The four homepages don't read `draft`. To remove a demo homepage, delete its
  route and content files. A `draft: true` in a collection's `-index.md` hides
  the whole collection: the list page and every entry.
</Aside>

### Do It With AI
```text
Remove the pages I don't need from my Homio site: [LIST, e.g. /gift-cards/, /referral/,
/home-commercial/]. For each one, delete its route in src/pages/[...lang]/ and its content in
src/content/ (english and french), remove every link to it from src/config/menu.en.json,
menu.fr.json, and content files, then run npm run astro-check and npm run build and fix anything
that still points to it.
```