Start a site

A kit site starts as a copy of one of the kit's examples. The copy is the site's own from the first commit: its content, its settings and its design. The kit's code stays in the npm package, and the site takes its updates with npm install.

Before you start

Node.js 24 or later, with npm.
git and a GitHub account.

1. Create the site

Create the site from the basics example of release v0.7.0, the latest when this page was written:

npm create astro@latest my-site -- --template hostsmith/site-kit-astro/examples/basics#v0.7.0 --no-ai

my-site is the folder it creates. When create-astro asks, install the dependencies and initialize a git repository. --no-ai keeps the example's AGENTS.md, which points AI agents to the kit's rules: without it, create-astro replaces the file with its own.

2. Run it

cd my-site
npm run dev     # a local preview at http://localhost:4321, reloaded as files change
npm run build   # the static site, written to dist/

3. Put it on GitHub

create-astro made the site's first commit. Create an empty repository on GitHub, private or public, then push the site to it:

git branch -M main
git remote add origin git@github.com:OWNER/REPOSITORY.git
git push -u origin main

main is the branch that deploys to the production site, once you set up deploys.

4. Make it the client's

Change	Where
The production URL	`url` in `src/site.config.ts`, such as `https://www.example.com`
Site name, logo, navigation, phone number and other facts	`src/content/settings/site.en.yml`
Pages	`src/content/pages/`, one Markdown file per page, such as `about.en.md`
Blog posts and other collections	`src/content/news/` and the other folders in `src/content/`
Photos and other media	`public/assets/`. The example's photos are under their own licenses, listed in `CREDITS.md`: replace them
Colors, fonts and spacing	the theme's tokens in `src/styles/theme/tokens/`. See Design
The old site's URLs, when the site replaces one	`.hostsmith/old-urls.txt`. See Keep old URLs

The .en in each file's name is the site's language. A site in more languages has a file per language, as Languages explains.

Run npm run build after each change: the build fails on content that breaks its schema, and names the file and the field. Content explains what each file holds.

The kit's README lists everything a site holds.

License

The example's code is under MIT-0, so the site owes no notice for it, and its owner picks the site's license. The photos and fonts keep their own licenses: a site keeps a font's license text beside the font.

Content - pages, sections, collections and settings.
Deploy with Hostsmith - a preview of every branch, then production.

Hostsmith