Skip to content
Sign inJoin waitlist

Install and run — Ciketo Astro

Ciketo is a standard Astro project: unzip it, install the packages and start the development server, then edit while the page updates by itself.

Node.js 22.12 or newer (node -v). Download at https://nodejs.org — the LTS build is fine.
A package manager npm comes with Node. pnpm, yarn and bun work too.
A code editor VS Code with the Astro extension is the smoothest; any editor works.
A browser Chrome, Edge, Firefox or Safari.

No database, no account, no paid service. The site builds to static files you can host anywhere.

Unzip the template, open the folder in a terminal and run:

Terminal window
npm install
npm run dev

Open http://localhost:4321. Save a file and the page updates by itself.

Command What it does
npm run dev Development server with live reload
npm run build Builds the static site into dist/
npm run preview Serves dist/ locally, exactly as a host would
npm run check Checks types, content schemas and Astro files

Run npm run build and npm run preview before publishing. The preview is the real thing: the development server is more forgiving, and a few behaviours (clean URLs, the active menu item) are only worth trusting in the build.

src/
pages/ one file per URL
index.astro home
about.astro /about
services.astro /services; services/[slug].astro is one page per service
blog.astro /blog; blog/[slug].astro is one page per post
contact.astro /contact
legal/[slug].astro one page per legal text: /legal/privacy-policy, /legal/terms-conditions, /legal/cookie-policy
404.astro the page shown for an unknown address
sitemap.xml.ts the sitemap, built from routes and collections
robots.txt.ts robots.txt
style-guide.astro every component with examples (noindex; delete the file to remove it)
layouts/Layout.astro the <head>, header and footer of every page
components/
sections/ the sections pages are made of (HomeHeroSection, ServiceLanesSection, …) and the quote form
site/ header (with the phone menu and the clock) and footer
style-guide/ a helper of the style guide page
content/
site.json name, description, domain, menu, contact details, footer, the quote form and the parts several pages share
pages/*.json the copy of one page each, including its title and description
collections/*.json services, trade lanes, posts, testimonials, clients, legal pages
routes.ts the URL of every page, used by the components' links
schemas.ts the fields each kind of item has, and which are required
content.config.ts how the collections are loaded (the file to change for a CMS)
design-system/ tokens, components and browser scripts — see its own README
integrations/forms.ts adds the form route when the forms run in server mode
lib/
content.ts the only way pages read collections
forms/ form delivery (static and server modes)
format.ts dates, descriptions cut to length, phone links
to-ui.ts turns posts into card data
assets/images/ photos and client logos used by the content; Astro resizes and compresses the photos
styles/global.css imports Tailwind and the theme
public/ files served as they are: the icons and the share image
astro.config.mjs the site's address (from site.json), the font, the forms integration
.env.example the form settings, to copy to .env

Delete src/pages/style-guide.astro (and src/components/style-guide/) if you don’t want the component gallery on your site; nothing else depends on it.

  • Install the Astro and Tailwind CSS IntelliSense extensions. VS Code suggests the first when you open the folder (.vscode/extensions.json).
  • npm run check reads your collections against the schemas: a missing field is reported with the collection, the item and the field, before you open the browser.
  • Search across files (Ctrl/Cmd + Shift + F) for a phrase you see on the demo site to find the file that holds it.

Keep your edits in src/content/, src/assets/images/, public/ and theme.css where possible. When a new version of the template ships, copy those into the new release instead of re-applying changes by hand. CHANGELOG.md lists what changed.