Skip to content
Type something to search...
to navigateto selectESC to close
Ultimate Astro Theme GuidesDocs
Kivo Theme Documentation

Installation Guide

Skill level: Beginner · Time: 10 minutes

You need two things on your computer: Node.js (the program that runs the theme) and a code editor to open the files. If you have never used a terminal before, read Tools You Need first.

Requirements

  • Node.js 22.12.0 or later (declared in package.json)
  • npm, which comes with Node.js. Kivo ships a package-lock.json, so use npm rather than Yarn or pnpm
  • A code editor. VS Code is a good free choice; Kivo recommends its Astro, TOML, and Tailwind CSS extensions when you open the folder

Install Node.js

Download the LTS installer from nodejs.org and run it. Then open PowerShell and check the version:

Terminal window
node -v

The result must be v22.12.0 or higher.

Run Kivo On Your Computer

  1. Unzip the download. It contains three things:

    • themes/kivo/: the theme itself, the Astro project you work in
    • documentation.html: a shortcut that opens these docs
    • changelog.html: a shortcut that opens the Kivo changelog online

    Move the kivo folder to wherever you keep your projects, then open it in your code editor. It is the folder that contains package.json and README.md.

  2. Open a terminal inside that folder. In VS Code, use Terminal → New Terminal.

  3. Install the dependencies (only needed once, and again after updates):

    Terminal window
    npm ci

    npm ci installs the exact versions listed in package-lock.json. npm install works too.

  4. Start the development server:

    Terminal window
    npm run dev

  5. Open http://localhost:4321/ in your browser.

The theme’s README.md lists these same commands, where the main files live, and a short checklist for launch.

Leave the terminal running while you work. When you save a file, the browser updates on its own. Press Ctrl + C in the terminal to stop the server.

Build And Preview The Production Site

Terminal window
npm run build
npm run preview

npm run build writes the finished site to the dist/ folder. npm run preview builds it again and serves it at http://localhost:4321/, so you can test it exactly as visitors will see it.

Until you set your own address in config.toml, the build prints a yellow [site] warning when the Astro step finishes (before the search index output): the theme ships with the placeholder https://example.com. That is expected on your computer; set the address before you deploy (Quick Start, step 1).

Every Script, In Plain Words

CommandWhat it does
npm run devStarts the local site with live reload
npm run buildBuilds the production site into dist/, creates the search index, and removes drafts from the sitemap. Warns while the site URL is still https://example.com
npm run previewBuilds, then serves the production site locally
npm run astro-checkChecks components and the content files that have a schema for mistakes. It doesn’t check section, contact, FAQ, or pricing files. Run it before you deploy
npm run formatTidies the formatting of files in src/
npm run generate-faviconsCreates every favicon size from [site.favicon] image in config.toml
npm run generate-og-imageRedraws the shared social sharing image from your logo, colors, tagline, and description
npm run remove-multilingualDeletes every language except the default one. Read Internationalization first
npm run generate-multilingual-contentCreates French from the English content and overwrites the existing French files. Don’t use it to add a language: see Internationalization
npm run indexnowTells search engines which pages changed (after you set indexNowKey)
npm run deploy:cfUploads dist/ to Cloudflare Pages. Needs Wrangler installed first (see Deployment)
npm run toml:watchTurns config.toml into .astro/config.generated.json. dev and build already run it

Next: Quick Start, to make the site yours in about 30 minutes.