# Quick Start

## Make Margo Yours In 30 Minutes

**Skill level:** Beginner · **Time:** 30 minutes · **You need:** the site running with `npm run dev` ([Installation](/margo/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](/margo/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       = "Ana Lima Studio"
     description = "Brand identities, packaging, and print for small makers."
     tagline     = "Brand designer in Lisbon"
     baseUrl     = "https://www.your-domain.com"
     logoText    = "Ana Lima"
   ```

   - `title` is your name or your studio's name. Social previews, the structured data, the RSS feed, and the footer copyright use it.
   - `tagline` is added to every page title (`<page> - <tagline>`), so keep it short. The comment beside it suggests under about 55 characters.
   - `description` is the default description for search engines and social previews.
   - `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.

   French and Arabic have their own tagline and description, in `site.tagline` and `site.description` of `src/i18n/fr.json` and `src/i18n/ar.json`. Change them too, or empty them to use the values above. Details: [Config Reference](/margo/customization/config-reference/).

2. **Say who runs the site**

   Still in `config.toml`, the `[seo]` block names the author, and `[seo.identity]` tells search engines whether the site belongs to a person or to a studio:

   ```toml
   [seo]
     author = "Ana Lima"

     [seo.identity]
       type     = "Person"           # Person | Organization
       name     = ""                 # empty uses [site] title
       jobTitle = "Brand designer"   # Person only
   ```

   Use `Organization` for a studio and `Person` for one named designer or photographer. Details: [SEO & AI Visibility](/margo/customization/seo-ai-visibility/).

3. **Set your email and booking link**

   The **Copy email** and **Book a call** buttons read `[settings.contactInfo]`:

   ```toml
   [settings.contactInfo]
     email   = "[hello@your-domain.com](mailto:hello@your-domain.com)"
     booking = "https://cal.com/your-name"   # or a page of your site, such as "/contact/"
   ```

   `booking` is where every **Book a call** button goes. The shipped value, `/contact/`, sends visitors to the contact form until you set a scheduling link.

   The email and phone shown in the footer, beside the contact form, and in the call to action are written in the section files, so they can differ per language: `footer.md`, `contact-section.md`, and `call-to-action.md` in `src/content/sections/english/` (and `french/`, `arabic/`). Search the whole project for `hello@example.com` and `555` to find every sample address and phone number. Details: [Contact & Booking](/margo/customization/contact-booking/) and [Footer](/margo/customization/footer/).

4. **Choose your header and footer**

   Margo has three header layouts and three footer layouts. Pick the site-wide ones in `config.toml`:

   ```toml
   [settings.layout]
     header = "bar"     # pill | bar | overlay
     footer = "email"   # wordmark | columns | email
   ```

   A page can pick its own with `headerLayout` and `footerLayout` in its frontmatter. The studio and photographer homepages do this. Details: [Header](/margo/customization/header/) and [Footer](/margo/customization/footer/).

5. **Set your brand colors**

   Open `src/styles/theme.css`. The light colors are in the first `@theme static` block, and the dark-mode colors in the `:root.dark` block further down:

   ```css
   @theme static {
     --color-paper: #f7f7fb; /* page background */
     --color-ink: #14122b;   /* headings, body, primary buttons */
     --color-aurora-violet: #c7b6ff; /* the soft colour fields behind every page */
   }
   ```

   Change the matching lines in `:root.dark` too, then check both modes with the light/dark button in the header. To turn the colour fields off, set `aurora = false` under `[settings.layout]` in `config.toml`. Details: [Colors & Fonts](/margo/customization/colors-fonts/).

6. **Add your logo**

   Margo shows `logoText` as a text wordmark. 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 for the image only
     logoWidth  = "24px"
     logoHeight = "36px"
   ```

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

7. **Connect the forms**

   The contact form posts 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
   ```

   The newsletter sign-up needs your Mailchimp address in `formAction` under `[settings.subscription]`, or `enable = false` there if you don't send a newsletter. Details: [Forms](/margo/customization/forms/).

8. **Replace the sample projects**

   Each project is one file in `src/content/projects/english/`, and its photos are in a folder of the same name in `src/assets/images/projects/` (case studies) or `src/assets/images/series/` (photo series). Content files point at photos with paths that start with `/images/`:

   ```yaml
   title: "Marrow Kiln"
   client: "Marrow Kiln"
   year: "2025"
   image: "/images/projects/ceramic-forms/cover.jpg"
   imageAlt: "Six ribbed and marbled ceramic vases on a wooden board."
   options:
     layout: "default" # default | gallery | split
   ```

   Copy a sample file, rename it, and change the text, the photos, and the alt text. Do the same in `french/` and `arabic/`. The hero on the main homepage shows four projects by file name: change the `cards` list under `heroSection` in `src/content/homepage/english/-index.md`. Details: [Projects](/margo/customization/projects/).

9. **Replace the other sample content**

   The services, team members, testimonials, client logos, prices, FAQ, and journal posts are samples. Replace them, or delete the ones you don't need. Details: [Collections](/margo/customization/collections/), [Pricing & FAQ](/margo/customization/pricing-faq/), and [Icons & Images](/margo/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), and `[forms]` means a form still posts to a placeholder (step 7). Then follow the [Deployment](/margo/deployment/) guide, which has the full launch checklist.

</Steps>

### What Next?
- Pick your homepage: Margo has three (`/`, `/home-studio/`, `/home-photo/`). See [Homepages](/margo/customization/homepages/).
- Only need English? See [Internationalization](/margo/customization/internationalization/).
- Point the menus at your pages, and hide the **Pages** demo menu: [Menus](/margo/customization/menus/).
- Replace the demo content page by page: [Pages](/margo/customization/pages/) lists every page and its file.
- Try the other layouts of your sections: [Section Layouts](/margo/customization/section-layouts/).
- Let an AI assistant do the repetitive work: [Prompt Library](/margo/ai-customization/prompt-library/).