Going live — Tustel Astro

Before the site goes public, replace the demo’s name, details, figures and photos, and point the contact form at you. Then build it, upload the static files to any host, and check it once more on the live address.

Before you deploy

	Where
Your domain in site.url (until you change it, it is the demo’s address)	src/content/site.json. Share links, sitemap.xml and robots.txt are built from it.
Name, title, description	site in src/content/site.json
Your own name instead of Alex Carter	site.owner and footer.note in src/content/site.json, the heroes in src/content/pages/home.json and about.json, the page descriptions (Editing the content)
Contact details (hello@example.com, the phone number and the location are placeholders)	contact in src/content/site.json
Your booking link (“Book a call” opens https://cal.com/)	bookCall in src/content/site.json
Social links (they open the networks’ home pages)	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, photos and client logos replaced	src/content/pages/, src/content/collections/, src/assets/images/
Your own figures: years, projects, clients, awards	facts in src/content/site.json
Testimonials from your own clients	src/content/collections/testimonials.json
Page titles and descriptions written for your work	The meta of each file in src/content/pages/ (contactPage.meta in contact.json)
The contact form delivers to you	Forms
Style guide kept or deleted	src/pages/style-guide.astro
npm run check and npm run build pass, and npm run preview looks right	—

The demo content is there to be replaced. Leaving “Alex Carter”, the sample e-mail, the sample figures, the testimonials or the sample client logos on a live site is the most common mistake.

Deploy

npm run build writes a complete static site to dist/: HTML files, one stylesheet, a few small scripts, the font files 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)

1. Push the project to GitHub, GitLab or Bitbucket.
2. Import the repository. Astro is detected: build command npm run build, output folder dist.
3. Add your form variables (PUBLIC_FORM_ENDPOINT, …) in the host’s environment settings, then deploy.
4. Add your domain in the host’s Domains settings and follow the DNS instructions.

Pages are built as files (about.html, portfolio/aurora-coffee.html) and served at clean addresses (/about). Netlify and Cloudflare Pages do that by default. On Vercel, add a vercel.json next to package.json:

{ "cleanUrls": true }

Any other host (shared hosting, S3, a VPS)

npm run build

Upload the contents of dist/ to the web root. For clean addresses, make the server try <path>.html:

• Apache (.htaccess):

  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME}.html -f
  RewriteRule ^(.+)$ $1.html [L]
  ErrorDocument 404 /404.html

• nginx: try_files $uri $uri.html $uri/ =404; and error_page 404 /404.html;

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

1. Check the pages. Click through every page on a phone and a laptop:
   • the menu, the phone menu, the header over the Home photo and the one that comes back as you scroll up;
   • the Catalog / List switch, the services and the testimonials on Home;
   • Portfolio and Blog loading more as you scroll;
   • a project page with its galleries;
   • the contact form.
2. Send yourself an enquiry from the live site and reply to it.
3. 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.
4. 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.
5. Analytics, if you want it. Add your snippet to the <head> in src/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.
6. Keep it current. A new project is one entry in src/content/collections/projects.json, a new post one entry in posts.json; see Editing the content, and rebuild. Connect a CMS (Using a headless CMS) if someone else will publish.

Performance and SEO

The template ships with what search engines look for:

• static HTML, with links in it to every page (the later projects and posts of Portfolio and Blog included);
• one <h1> per page, and a title and description for every page;
• canonical links, sitemap.xml, robots.txt and share cards;
• resized, lazy-loaded images that keep their space while they load.

Keeping the site fast is mostly about images. Astro resizes the photos, but export them at the size they are shown, not the size your camera produced: a 12 MB camera file still slows the build. The placeholders show the size each one was designed for.