Quick Start

Make Homio Yours In 30 Minutes

Skill level: Beginner · Time: 30 minutes · You need: the site running with npm run dev (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.

Name your site and set its address

Open src/config/config.toml and edit the [site] block:
```
[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.

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:

[business]
  name  = ""                    # empty uses site.title
  type  = "LocalBusiness"       # or HomeAndConstructionBusiness, GeneralContractor, Plumber, ...
  email = "[email protected]"

  [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 [email protected]. Details: Business Info.

Set your phone number and opening hours

Still in [business]:

[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.

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:
```
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 and Services & What’s Included.
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:
```
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.
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:
```
: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.
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]:
```
[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.
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:
```
[settings]
  contactFormAction   = "https://formsubmit.co/[email protected]"
  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 and Booking Request.
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/:
```
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.
Check, build, and deploy

Stop the dev server and run:
Terminal window
```
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 guide, which has the full launch checklist.

What Next?

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