# Quick Start

## Make Homio Yours In 30 Minutes

**Skill level:** Beginner · **Time:** 30 minutes · **You need:** the site running with `npm run dev` ([Installation](/homio/getting-started/installation/))

This page walks through the ten changes almost every site needs, in order. Each step names one file and the exact lines to edit, and links to the page with the details. Save the file and the browser shows the change, `config.toml` included.

<Aside type="tip">
  Before you start, save a copy of the untouched theme (or commit it with git) so
  you can always compare or go back. See [Editing Safely](/homio/beginner/editing-safely/).
</Aside>

<Steps>

1. **Name your site and set its address**

   Open `src/config/config.toml` and edit the `[site]` block:

   ```toml
   [site]
     title       = "Acme Home Services"
     description = "House cleaning, small repairs, windows, and carpets, priced up front."
     tagline     = "Cleaning and home services"
     baseUrl     = "https://www.your-domain.com"
     logoText    = "acme"
   ```

   - `title` is your brand name. The footer copyright and the structured data use it. The homepage's browser title comes from `metaTitle` in `src/content/homepage/english/-index.md`; change it there.
   - `tagline` is added to every page title (`<page> - <tagline>`), so make it a short line about your business.
   - `baseUrl` is your live address. The theme ships with the placeholder `https://example.com`, and `npm run build` prints a `[site]` warning until you change it. Canonical links, the sitemap, `robots.txt`, RSS feeds, `llms.txt`, and social previews all use it.

   Details: [Config Reference](/homio/customization/config-reference/).

2. **Add your business details**

   Your company details live in one place, `[business]` in the same file. The header, footer, contact page, area pages, booking form, and the structured data search engines read all use them:

   ```toml
   [business]
     name  = ""                    # empty uses site.title
     type  = "LocalBusiness"       # or HomeAndConstructionBusiness, GeneralContractor, Plumber, ...
     email = "hello@your-domain.com"

     [business.address]
       show       = true           # false = you visit customers and have no public address
       street     = "12 Example Road"
       locality   = "Your Town"
       region     = "ST"
       postalCode = "00000"
       country    = "US"
   ```

   Every value marked `# sample` in the file is a placeholder: the shipped email is `hello@example.com`. Details: [Business Info](/homio/customization/business-info/).

3. **Set your phone number and opening hours**

   Still in `[business]`:

   ```toml
   [business]
     phone        = "+15550100199"     # digits with country code, for tap-to-call links
     phoneDisplay = "(555) 010-0199"   # how the number is shown
     timezone     = "America/New_York" # for "Open now" and booking dates
     closedDates  = ["2026-12-25", "2027-01-01"]

     [business.hours]
       mon = "07:30-18:00"
       sat = "08:00-14:00"
       sun = ""                        # empty = closed
   ```

   The shipped number is a fictional `555` number: replace it. Leave `phone` empty to hide every call link. Hours use the 24-hour clock, and `"08:00-12:00,13:00-17:00"` gives a lunch break. A wrong value prints a `[business]` warning in the terminal and is ignored, so watch the terminal after you save.

4. **Set your services and prices**

   Prices are not typed into pages. They come from one file, `src/content/pricing/english/-index.md`, which feeds the estimator, the booking form, the plans, the add-ons, and the "from" prices on service cards:

   ```yaml
   frequencies:
     - id: "biweekly"
       label: "Every 2 weeks"
       discount: 15 # percent, sample

   rateCards:
     - id: "standard-cleaning"
       label: "Standard clean"
       mode: "rooms" # rooms | hourly | units
       base: 70 # sample
       perBedroom: 20 # sample
       perBathroom: 25 # sample
       minimum: 110 # sample
   ```

   Every number in this file is a sample: replace them all with your own rates. Copy the same numbers into `src/content/pricing/french/-index.md`: `npm run build` warns when the two files differ. The currency is `currency` under `[settings.estimator]` in `config.toml` (default `USD`).

   The services themselves are one file each in `src/content/services/english/`, with what each visit includes. Details: [Pricing & Estimator](/homio/customization/pricing-estimator/) and [Services & What's Included](/homio/customization/services-included/).

5. **Replace the sample service areas**

   The four areas in `src/content/areas/english/` (North Harbor, Elm Park, Westfield Heights, Old Mill) are fictional. Rename one file per real area and set its postal codes:

   ```yaml
   title: "North Harbor"
   zips: ["55501", "55502", "55503"] # sample
   neighborhoods:
     - "Harbor Point"
   ```

   The area finder matches visitors against `zips`, `neighborhoods`, and `aliases`; the booking form checks the postal code against `zips`. The **Areas** menu and the footer areas column list your area files on their own. If your postal codes are not 5 digits, change `zipPattern` under `[settings.booking]` in `config.toml` (the comment there has a UK example). Details: [Service Areas](/homio/customization/service-areas/).

6. **Set your brand colors**

   Open `src/styles/theme.css`. The light colors are in the `:root` block, and the dark-mode colors in the `:root.dark` block below it:

   ```css
   :root {
     --theme-primary: #217b2c; /* brand green: links, icons, checks */
     --theme-deep: #24842f;    /* the brand-green block */
     --theme-accent: #ffd23f;  /* sunflower: the main pill buttons */
   }
   ```

   Change the matching lines in `:root.dark` too, then check both modes with the light/dark button in the header. Details: [Colors & Fonts](/homio/customization/colors-fonts/).

7. **Add your logo**

   Homio draws a built-in mark (a green tile with a check) next to `logoText`. To use your own logo file instead, put it in `public/` or `src/assets/images/` and set it in `[site]`:

   ```toml
   [site]
     logo       = "/images/my-logo.svg"
     logoText   = ""      # empty if your logo already has the name in it
     logoWidth  = "116px"   # your logo's width at 28 px tall
     logoHeight = "28px"
   ```

   Then set `[site.favicon] image` to a square version of your logo and, with `npm run dev` running, run `npm run generate-favicons`. Details: [Site Identity & Logo](/homio/customization/site-identity-logo/).

8. **Connect the forms**

   The contact form and the booking form post to a placeholder address until you change it in `config.toml`. The dev server shows a warning inside each form, and `npm run dev` and `npm run build` print a `[forms]` line, until you do:

   ```toml
   [settings]
     contactFormAction   = "https://formsubmit.co/you@your-domain.com"
     contactFormProvider = "formsubmit.co"   # formsubmit.co | formspree | netlify

   [settings.booking]
     formAction = ""   # empty sends booking requests to contactFormAction
   ```

   The newsletter sign-up needs your Mailchimp address in `formAction` under `[settings.subscription]`. Details: [Forms](/homio/customization/forms/) and [Booking Request](/homio/customization/booking-request/).

9. **Replace the photos**

   The sample photos are in `src/assets/images/`, grouped by area (`heroes/`, `services/`, `areas/`, `projects/`, `people/`, and so on). Content files point at them with paths that start with `/images/`:

   ```yaml
   image: "/images/people/camera-install.jpg"
   imageAlt: "A technician in work clothes fitting a fixture to a wall"
   ```

   Put your own photo in the same folder and change the path and the alt text, in both `english/` and `french/`. `IMAGE-CREDITS.md` lists every sample photo, so you can tick them off. Details: [Icons & Images](/homio/customization/icons-images/).

10. **Check, build, and deploy**

    Stop the dev server and run:

    ```bash
    npm run astro-check
    npm run build
    ```

    Fix anything `astro-check` reports. Read the yellow lines in the build output: `[site]` means `baseUrl` is still the placeholder (step 1), `[forms]` means a form still posts to a placeholder (step 8), and `[pricing]` means the English and French price files differ (step 4). Then follow the [Deployment](/homio/deployment/) guide, which has the full launch checklist.

</Steps>

### What Next?
- Pick your homepage: Homio has four (`/`, `/home-cleaning/`, `/home-commercial/`, `/home-handyman/`). See [Homepages](/homio/customization/homepages/).
- Only need English? See [Internationalization](/homio/customization/internationalization/).
- Point the header button and menus at your pages, and hide the **Pages** demo menu: [Header](/homio/customization/header/) and [Menus](/homio/customization/menus/).
- Replace the demo content page by page: [Pages](/homio/customization/pages/) lists every page and its file.
- Replace the sample reviews and projects: [Reviews & Projects](/homio/customization/reviews-projects/).
- Try the other layouts of your sections: [Section Layouts](/homio/customization/section-layouts/).
- Let an AI assistant do the repetitive work: [Prompt Library](/homio/ai-customization/prompt-library/).