Put your template online

From the zip file to a live website. Every Template Pantry template is a static Astro site, so the steps are the same for all of them.

Before you start

You need three things:

  • Node.js 20 or newer (nodejs.org). Check with: node --version
  • The zip from your order email, unzipped into a folder
  • A code editor such as VS Code, and a terminal opened in that folder

1. Run it on your computer

In the template's folder, install its packages and start the preview:

npm install
npm run dev

Open the address the terminal prints, usually http://localhost:4321. The page reloads whenever you save a file.

2. Make it yours

The README.md in your zip names the files to edit. In most templates one file holds the business name, address, opening hours, prices and menu links, so you rarely need to touch the page code.

The sample photos are placeholders. Put your own in public/images and update each photo's path, width, height and alt text in the same file.

3. Set your domain

Open astro.config.mjs and set site to the address the site will live at:

// astro.config.mjs
site: "https://www.your-domain.com",

Until this is set, the template leaves out the canonical link, the social share tags and the sitemap, so a build never publishes wrong addresses. No domain yet? Deploy first, then come back to this step.

4. Build it

This turns the project into plain HTML, CSS and images:

npm run build

The finished website is the dist folder. That folder is what goes online.

5. Put it online

Any static host works, and all four below have a free plan. If you connect a Git repository, the host builds the site for you with these settings:

Build command
npm run build
Output folder
dist
Node version
20

Cloudflare Pages

  1. In the Cloudflare dashboard, open Workers & Pages and create a Pages project.
  2. Fastest: choose the upload option and drop in your dist folder. Or connect your Git repository and enter the settings above.
  3. If a Git build fails on the Node version, add an environment variable NODE_VERSION with the value 20 and deploy again.

Netlify

  1. Fastest: drag your dist folder onto app.netlify.com/drop.
  2. Or add a new site from your Git repository and enter the build command and output folder above.

Vercel

  1. Push the project to a Git repository and import it in Vercel.
  2. Vercel detects Astro and fills in the settings. Leave them as they are and deploy.

GitHub Pages

  1. Push the project to GitHub. In the repository settings, open Pages and set the source to GitHub Actions.
  2. Add Astro's official GitHub Pages workflow (search for "Astro deploy to GitHub Pages") and push again.
  3. If the site lives in a subfolder, like username.github.io/my-site, also set base to "/my-site" in astro.config.mjs.

6. Connect your own domain

Add the domain in your host's dashboard and it shows the DNS record to create at your domain registrar, usually one CNAME record. HTTPS is switched on for you, and DNS changes can take up to a day to spread.

Then set site in astro.config.mjs to the new address (step 3), build and deploy once more.

7. Make the contact form send

A static site has no server, so the form needs somewhere to send to. Create a form endpoint with a service such as Formspree, Getform or Netlify Forms, then put its address where your template's README says (a form endpoint setting, or one marked line in the form's script).

Until you do, the form shows its thank-you message but nothing is sent. Send yourself a test message before you launch.

Common problems

npm install fails, or warns about an unsupported engine
Your Node.js is too old. Install version 20 or newer, close and reopen the terminal, then run npm install again.
The build works on my computer but fails on the host
Check the three settings above. The usual cause is the host using an older Node version; set it to 20.
The site is online but has no styling, or the links are broken
The site is being served from a subfolder. Set base in astro.config.mjs to that folder (for example "/my-site"), or move the site to the root of a domain.
My photos don't show online
File names are case-sensitive on servers: Photo.JPG and photo.jpg are different files. Make the name in your config match the file exactly, and keep photos in public/images.
My changes don't appear on the live site
The live site only changes when you deploy again. Run npm run build and upload dist, or push to Git if your host builds from it. Then reload with Ctrl+F5.
There is no sitemap, or sharing a link shows no preview
Set site in astro.config.mjs (step 3). Both are left out on purpose until the template knows its real address.