Make Kivo 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. Save the file and the browser shows the change.

1. Name your site and set its address

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

   [site]
     title       = "Acme Cloud"
     description = "Deploy apps and APIs without managing servers."
     tagline     = "The developer cloud"
     baseUrl     = "https://www.acme.dev"

   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 URLs, the sitemap, robots.txt, RSS feeds, llms.txt, and social previews all use it, so set it before you launch.

2. Decide on languages

   Kivo ships every page in English and French. If you only need English, set enable = false under [settings.multilingual] in the same file. The French files stay on disk but are no longer built. Restart npm run dev after this change. See Internationalization to add or remove languages for good.

3. Add your logo

   With no logo image, Kivo draws its built-in mark next to logoText. To use your own file, put it in src/assets/images/ and point logo at it:

   [site]
     logo       = "/images/my-logo.svg"
     logoText   = "Acme Cloud"   # set to "" if your logo already contains the name
     logoWidth  = "28px"
     logoHeight = "28px"

   Then set [site.favicon] image to a square version of your logo and run npm run generate-favicons. Details: Site Identity & Logo.

4. Set your brand color

   Open src/styles/theme.css and change --theme-primary in both palettes, the light one (:root) and the dark one (:root.dark):

   :root {
     --theme-primary: #2563eb;      /* buttons, links, highlights */
     --theme-primary-soft: #eff6ff; /* light tint behind badges and icons */
   }
   :root.dark {
     --theme-primary: #60a5fa;
     --theme-primary-soft: #172036;
   }

   Every button, link, and accent in the theme updates. Details: Colors, Fonts & Dark Mode.

5. Write your homepage hero

   Open src/content/sections/english/hero-saas.md and change title, rotatingWords, description, and the two buttons (primaryButton, secondaryButton). Do the same in src/content/sections/french/hero-saas.md if you kept French.

6. Point the header button and menus at your pages

   The header button is in config.toml:

   [settings.navigationButton]
     enable = true
     label  = ""          # empty uses "Get started" from src/i18n/en.json
     url    = "/signup/"

   The menu links are in src/config/menu.en.json (and menu.fr.json). Set "enable": false on anything you don’t need. The Pages menu exists to show off the demo, so most sites turn it off. Details: Menus.

7. Connect the forms

   The contact form and the newsletter forms post to placeholder addresses until you change them in config.toml:

   [settings]
     contactFormAction   = "https://formsubmit.co/[email protected]"
     contactFormProvider = "formsubmit.co"   # formsubmit.co | formspree | netlify
   
   [settings.subscription]
     formAction = "https://your-account.us1.list-manage.com/subscribe/post?u=...&id=..."

   Until you do, npm run dev shows a warning inside each form. Details: Forms.

8. Change the footer text

   The footer description and copyright line are in src/i18n/en.json under footer (and fr.json). In copyright, {year} becomes the year of the build and {brand} your site.title. Social links are in src/config/social.json.

9. Pick your section layouts (optional)

   14 sections have more than one layout. Open http://localhost:4321/elements/ to compare 13 of them and the page header (the contact section’s sales layout is on /contact/), then set the one you like with options.layout in the section file. Details: Section Layouts.

   The floating Change layout button is a demo feature, and it is off in the theme you downloaded. To try layouts in place on the homepages, turn it on while you choose, and set it back to false before you launch:

   [settings.layoutSwitcher]
     enable = true   # the theme ships with false

10. Check and build

    Stop the dev server, then run:

    npm run astro-check
    npm run build

    Fix anything astro-check reports. If the build prints a yellow [site] warning (it appears when the Astro step finishes, before the search index output), baseUrl is still the placeholder (step 1). Then follow the Deployment guide.

What Next?

• Replace the demo content page by page: Pages lists every page and its file.
• Try other looks for your sections: Section Layouts.
• Let an AI assistant do the repetitive work: Prompt Library.