Going live — Kalme Astro
Before the site goes public, replace the demo’s details and pictures and point the form at you; then build it and upload the static files to any host, and check it once more on the live address.
Before you deploy
Section titled “Before you deploy”| Where | |
|---|---|
Your domain in site.url |
src/content/site.json — share links, sitemap.xml and robots.txt are built from it |
| Name, title, description | src/content/site.json |
Contact details (hello@example.com, the phone number and the address are placeholders) |
contact in src/content/site.json |
Your booking link instead of https://cal.com/ |
footer.action and cta.actions in src/content/site.json, action in src/content/pages/service.json |
| Social links | socials in src/content/site.json |
| Logo replaced | src/assets/images/logo.svg, logo-white.svg |
| Browser icons replaced | public/icon.svg, public/apple-icon.png |
| Share image replaced and described | public/opengraph-image.png, its description in src/layouts/Layout.astro |
| Demo text and photos replaced | src/content/pages/, src/content/collections/, src/assets/images/ |
| The three videos replaced (or removed) | Editing the content |
| Prices and what they include | plans of each service in src/content/collections/services.json |
| Page titles and descriptions written for your business | the meta of each file in src/content/pages/, the legal descriptions in legal.json |
| Terms of Service and Privacy Policy replaced with your own | src/content/collections/legal.json |
| The form delivers to you | Forms |
| Style guide kept or deleted | src/pages/style-guide.astro |
npm run build passes and npm run preview looks right |
— |
The demo content is there to be replaced: leaving “Kalme”, the sample address or the sample case studies on a live site is the most common mistake. The legal texts are examples, not legal advice — have yours written or reviewed for your country.
Deploy
Section titled “Deploy”npm run build writes a complete static site to dist/: HTML files, one stylesheet, a few small scripts, optimised
images. Any host that serves files can run it — no Node.js needed on the server (unless you chose server-mode forms).
Vercel, Netlify or Cloudflare Pages (free for most sites)
Section titled “Vercel, Netlify or Cloudflare Pages (free for most sites)”- Push the project to GitHub, GitLab or Bitbucket.
- Import the repository. Astro is detected: build command
npm run build, output folderdist. - Add your form variables (
PUBLIC_FORM_ENDPOINT, …) in the host’s environment settings, then deploy. - Add your domain in the host’s Domains settings and follow the DNS instructions.
Pages are built as files (about.html) and served at clean addresses (/about). Netlify and Cloudflare Pages do that
by default; on Vercel, the vercel.json next to package.json has "cleanUrls": true — keep it.
Any other host (shared hosting, S3, a VPS)
Section titled “Any other host (shared hosting, S3, a VPS)”npm run buildUpload the contents of dist/ to the web root. For clean addresses, make the server try <path>.html:
- Apache (
.htaccess):RewriteEngine OnRewriteCond %{REQUEST_FILENAME}.html -fRewriteRule ^(.+)$ $1.html [L]ErrorDocument 404 /404.html - nginx:
try_files $uri $uri.html $uri/ =404;anderror_page 404 /404.html;
Server-mode forms
Section titled “Server-mode forms”If you set PUBLIC_FORM_MODE=server, add your host’s adapter first (npx astro add vercel, netlify,
cloudflare or node). Only the form route runs on the server; every page stays static.
After it is live
Section titled “After it is live”- Check the pages. Click through every page on a phone and a laptop: the menu, the services accordion, the pricing switch on a service page, the videos, the Contact form.
- Send yourself a submission from the live site and reply to it.
- Verify the share card. Paste the URL of the home page and of a project into https://www.opengraph.xyz or a chat window and confirm the image and title.
- Tell Google. Add the site to Search Console, verify ownership and
submit
https://yourdomain.com/sitemap.xml. Bing has the same thing in Webmaster Tools. - Analytics, if you want it. Add your snippet to the
<head>insrc/layouts/Layout.astro, or use your host’s built-in analytics (Vercel Analytics, Cloudflare Web Analytics, Plausible, Fathom) — none of them need a cookie banner. - Keep the work coming. A new case study is one entry in
src/content/collections/projects.json, a new post one entry inposts.json; see Editing the content, or connect a CMS (Using a headless CMS) if someone else will publish, and rebuild.
Performance and SEO
Section titled “Performance and SEO”The template ships with what search engines look for: static HTML, one <h1> per page, a title and description for
every page, canonical links, sitemap.xml, robots.txt, share cards, optimised and lazy-loaded images and links in the
HTML to every page. Keeping the site fast is mostly about images and videos: Astro resizes photos, but a 12 MB camera
file still slows the build — export them around 2400 px wide — and keep the looping videos short and small. The demo’s
videos play from a stock site whose servers set a cookie; your own video files from your own domain don’t.