Going live — Titen Astro
Before the site goes public, replace the demo’s details and pictures and point the forms at you. Then build it, 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 (contact@example.com, the phone number and the address are placeholders) |
contact in src/content/site.json |
| Social links | socials in src/content/site.json |
| Logo replaced | src/design-system/components/brand/Logo.astro (Making it look like your brand) |
| 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 two videos replaced (or removed) | Editing the content |
| Your brochure instead of the placeholder | public/brochure.pdf (Editing the content) |
| Team and awards | team and awards in src/content/pages/about.json |
| Page titles and descriptions written for your business | The meta of each file in src/content/pages/ |
| The forms deliver 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 “Titen”, the sample address or the sample projects on a live site is the most common mistake.
Deploy
Section titled “Deploy”npm run build writes a complete static site to dist/: HTML files, one stylesheet, a few small scripts and optimised
images. Any host that serves files can run it, with 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, keep the vercel.json next to package.json: it has "cleanUrls": true.
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 routes run 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 and the project search;
- the accordion and the service list on Home;
- the slideshows (Home testimonials, About approach);
- the videos;
- the forms.
- 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 project is one entry in
src/content/collections/projects.json, a new post one entry inposts.json; see Editing the content, and rebuild. Connect a CMS (Using a headless CMS) if someone else will publish.
Performance and SEO
Section titled “Performance and SEO”The template ships with what search engines look for:
- static HTML, with links in it to every page;
- one
<h1>per page, and a title and description for every page; - canonical links,
sitemap.xml,robots.txtand share cards; - optimised, lazy-loaded images.
Keeping the site fast is mostly about images and videos. Astro resizes photos, but a 12 MB camera file still slows the build, so export them around 2400 px wide. Keep the looping videos short and small. The demo’s videos play from stock sites whose servers set cookies; your own video files from your own domain don’t.