Troubleshooting — Tustel Astro

Most problems come from a content file with a typo, a missing image, or a setting that was not rebuilt into the site. The answers below cover those first, then the questions buyers ask most.

Errors you may hit

npm install fails, or the site behaves oddly after an update. Delete node_modules/ and package-lock.json, then npm install again. Check that node -v is 22.12 or newer.

Port 4321 is already in use. npm run dev -- --port 4322, or stop whatever holds the port.

The build stops with InvalidContentEntryDataError. A collection item lacks a field that src/content/schemas.ts requires, or a field has the wrong type (a number where text is expected). The message names the collection, the item and the field, for example projects → aurora-coffee data does not match collection schema and summary: Required. npm run check finds the same thing faster.

The build stops with “key must be a string at line 3 column 25”, or “Unable to load your Astro config”. A JSON file has a typo: a comma after the last entry of a list, a missing comma or quote, or a comment, which JSON doesn’t allow. The message gives the line and the column but not the file, so look in the file you changed last. When it says it can’t load the config, the file is src/content/site.json (astro.config.mjs reads it).

The terminal shows [file-loader] Error reading data from src/content/collections/….json. The same kind of typo, in a collection file. The build doesn’t stop, but it can’t read that file, so your changes to it are missing from the site. Fix the file before you publish.

Image /images/… not found: add it to src/assets/images. The file must be in src/assets/images/ and the content must refer to it as /images/<file>: same spelling, same extension. The build also names the page it was rendering (Caught error rendering /portfolio/aurora-coffee).

A card or a gallery photo has the wrong shape. Project cards, covers, galleries and the photo at the top of a post take each photo’s own proportions, read from the file when the site builds (src/lib/image-size.ts): a portrait cover makes a tall card, so crop the photo to the shape you want. If a card keeps its old shape after you replaced the photo, restart npm run dev. A photo from another address (a CMS) sits in a 4:3 box (3:2 for a post photo) until you pass its size (Using a headless CMS).

/about works on my laptop but shows “404” on the host. The pages are files (about.html). Your host needs clean URLs: see Going live.

The contact form says “Something went wrong”. Static mode: the endpoint answered with an error; open the browser’s console for the reason, and check PUBLIC_FORM_ENDPOINT. Server mode: the reason is in your host’s function logs, after [forms] New project enquiry could not be delivered; the route also answers with an error when the name, the e-mail, the project type or the budget is empty. Environment variables are read when the site builds, so rebuild after changing them (Forms).

The build stops with NoAdapterInstalled. PUBLIC_FORM_MODE=server adds a route that runs on a server, which needs your host’s adapter: npx astro add vercel (or netlify, node, cloudflare). To stay fully static, leave PUBLIC_FORM_MODE empty (Forms).

“Book a call” opens cal.com. That’s the demo’s placeholder. Put your own booking page (or /contact) in bookCall.href in src/content/site.json.

The share image or title is the old one. Facebook, LinkedIn and X cache them. Use their debuggers to refresh, and confirm that site.url is your domain.

The header disappears, or doesn’t show on Home. On every page except Home and the 404 page, the header hides while you scroll down and comes back as soon as you scroll up. On Home it lies over the photo at the top and scrolls away; a solid one appears when you scroll back up past the client logos (Pages and sections). If you removed the client logos, see Pages and sections.

Nothing moves: the slideshows, the tickers, the counters. The visitor’s system (yours, if you see it) has “reduce motion” switched on, and the site honours it (Making it look like your brand). The slideshows and tickers stop, and the counters show their final number at once.

The Portfolio or the Blog shows only six items. That’s on purpose: more appear each time the visitor scrolls to the spinner under the list (four at a time on tablets and phones). Every item is in the page’s HTML from the start. To show more at once, see the next section.

Questions

Can I use this template for a client? See License: that is the one place that answers it for your licence.

Can I remove the style guide, a whole page or a section? Yes:

• the style guide: delete src/pages/style-guide.astro and src/components/style-guide/;
• a page: see Pages and sections;
• a section: delete its line (and its import) from the page file in src/pages/, for example <BandSection … /> (the full-screen photo with a call to action) in src/pages/index.astro.

Can the Portfolio or the Blog show every item at once? Yes: give <PagedList> a larger pageSize (desktop) and smallPageSize (tablets and phones), for example pageSize={24} smallPageSize={24}, in src/components/sections/ProjectListSection.astro or PostListSection.astro. With no more items than that, the spinner doesn’t show.

Can I change the fonts to my brand’s? Yes: Making it look like your brand.

Do I need a CMS? No. Content is files you edit. Add one when somebody who does not use a code editor has to publish (Using a headless CMS).

Can I show dates in another format? Yes. Post dates (“Apr 16, 2025”) come from formatDate in src/lib/format.ts.

Does the site need JavaScript? A little. The pages are static HTML and CSS, and small scripts (no framework) play the motion — the texts and blocks that appear on load or as you scroll, the header, the slideshows, the tickers and the counters — and run the Catalog / List switch, the services list, Portfolio and Blog loading more, and the form. Every word and link is in the HTML, so search engines read the whole site.

Can I sell a site I build with this? Building sites for clients is what the licence is for; reselling the template itself as a template is not. The licence has the exact wording.

Will it work with Tailwind plugins, React or Vue components, or my component library? Yes. It is a standard Astro + Tailwind CSS 4 project: add packages as usual, and a UI framework with npx astro add react (or vue, svelte) if you want one. The design tokens are plain CSS variables, so other libraries can read them.

How do I update to a new version of the template? Download the new release and copy your src/content/, src/assets/images/, public/ and your theme.css into it. Then re-apply any component changes you made. CHANGELOG.md lists what moved.

Can you customise it for me, or build my site? Yes. Marcframe, the studio behind this template, updates templates to your needs (brand, content, new pages and features), builds custom templates and designs new websites. Get in touch at marcframe.com/contact or hire us on Contra.

Something is broken and none of this helps. Support and updates: https://framebrick.co/support. Send the page, the browser, and the error text or a screenshot: it makes the answer much faster.