Quick Start

Make Margo 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       = "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.
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:
```
[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.
Set your email and booking link

The Copy email and Book a call buttons read [settings.contactInfo]:
```
[settings.contactInfo]
  email   = "[[email protected]](mailto:[email protected])"
  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 [email protected] and 555 to find every sample address and phone number. Details: Contact & Booking and Footer.
Choose your header and footer

Margo has three header layouts and three footer layouts. Pick the site-wide ones in config.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 and Footer.
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:
```
@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.
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]:
```
[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.
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:
```
[settings]
  contactFormAction   = "https://formsubmit.co/[email protected]"
  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.
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/:
```
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.
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, Pricing & FAQ, and 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), and [forms] means a form still posts to a placeholder (step 7). Then follow the Deployment guide, which has the full launch checklist.

What Next?

Pick your homepage: Margo has three (/, /home-studio/, /home-photo/). See Homepages.
Only need English? See Internationalization.
Point the menus at your pages, and hide the Pages demo menu: Menus.
Replace the demo content page by page: Pages lists every page and its file.
Try the other layouts of your sections: Section Layouts.
Let an AI assistant do the repetitive work: Prompt Library.