HTML edition

Every theme is also sold as an HTML edition: the same design, shipped as classic HTML, CSS and JavaScript files. There is no Astro, no npm and no build step. Unzip the folder, double-click index.html, and the site opens straight from your disk.

It is a separate download from the Astro edition. Same pages, same design, different way of working.

What is in the zip

index.html
about.html
pricing.html
contact.html
blog.html
blog/<post-slug>.html
sections.html
404.html
favicon.svg
assets/
  css/main.css
  fonts/
images/
tailwind/
README.md
LICENSE.md

• Flat pages. Every route is one .html file at the top level, and blog posts sit in blog/. Links between pages are relative, so the whole folder works from file:// and from any subfolder on a server.
• assets/css/main.css is the one stylesheet every page loads. A page with extra styling of its own keeps a second, plainly named file next to it (sections.css, for instance).
• assets/js/ only exists if the theme has behaviour to run: a mobile menu, a slider, a filter. Plain script files, no bundler wrapper and no hashed names.
• images/ and assets/fonts/ hold everything the pages reference.
• sections.html is the kitchen-sink page: every section of the theme on one page, useful as a catalogue when you want to copy a block. Delete it before you launch.
• README.md repeats the file map and the editing notes, and LICENSE.md is the same license as the Astro edition.
• tailwind/ is optional source, described further down. Delete it and nothing breaks.

Open it and edit it

Double-click index.html. It opens in your browser and renders exactly like the live preview, with no server running.

To change something, open the same file in any editor: VS Code, Sublime, Notepad++, even TextEdit in plain-text mode. Save, then refresh the browser tab.

• Copy lives in the markup where you see it. There is no data file and no CMS, so the headline on the homepage is the headline in index.html.
• Images are <img src="images/...">. Drop your own file into images/, keep the same name, and the page picks it up. If you rename it, update the src. Some themes use <picture> with an AVIF and a WebP source next to the JPG or PNG, so replace all of the sources or delete the extra <source> lines and keep the <img>.
• Navigation and footer links are markup too, repeated per page. Search and replace across the folder is the fastest way to change one of them everywhere.

Change the colours

Every colour, radius and font stack is a CSS custom property at the top of assets/css/main.css:

:root {
  --accent: #c74b2b;
  --accent-text: #fff;
  --surface-page: #fff;
  --surface-card: #f6f4f1;
  --text-heading: #14110f;
  --text-body: #3a3532;
}

Change a value there and it changes everywhere, because every rule further down refers back to these properties rather than to a literal colour. Themes with a dark mode declare the dark values in a matching block right underneath. Fonts are set the same way, with @font-face rules pointing at assets/fonts/, so nothing is fetched from Google.

The exact names differ per theme, and main.css is compiled output, so it is dense reading below the variables block. You do not need to touch anything under it.

The optional Tailwind folder

The shipped CSS is already compiled, so you never have to run anything. If you would rather write Tailwind utility classes as you edit, the tailwind/ folder has the source:

cd tailwind
npm install
npm run build

That recompiles ../assets/css/main.css from the source in tailwind/src/, scanning every .html file in the package, so any utility class you add starts working. npm run watch does the same on every save. Note that the rebuilt file is a superset of the shipped one: it compiles against all pages at once instead of per route, so it comes out somewhat larger. Rendering is unchanged. Keep a copy of the original main.css before you rebuild, and delete the tailwind/ folder if you know you will never use it.

Forms

Contact and newsletter forms are static, and point at a mailto: address out of the box. That works, but it opens the visitor’s mail client instead of posting anywhere.

To collect submissions properly, sign up with a form service (Formspree, Web3Forms, Basin, Netlify Forms if you host there) and swap the form’s action for the endpoint they give you:

<form method="POST" action="https://formspree.io/f/YOUR_ID">

Keep the name attribute on each input, because that is what shows up in the submission. On Netlify, add a netlify attribute to the <form> tag instead.

Deploy

The package is a plain folder of static files, so every static host takes it as is:

• Netlify: drag the unzipped folder onto app.netlify.com/drop.
• Cloudflare Pages: create a project and upload the folder as a direct upload.
• GitHub Pages: push the folder to a repository and enable Pages on that branch root.
• cPanel or any FTP host: upload the contents into public_html.

There is no build command to configure and no Node version to pick.

Known limits, and what to do about them

• Canonical and Open Graph tags are relative. Every URL in the package is relative so the pages work from disk, which includes canonical, og:url and og:image. Before you launch, find and replace those three with your real domain, or link previews and search results will point at nothing.
• data-astro-cid-* attributes remain in the markup. They are leftovers from how the design was originally scoped. They are harmless, and some of the CSS matches on them, so leave them alone.
• sections.html is a catalogue, not a page of your site. Delete it, or at least do not link to it, before you go live.
• Some themes ship links to pages they never built (a “Careers” item, an empty docs link). They are dead in the Astro edition too. Point them somewhere real or remove them from the nav.

When to pick a different edition

• Pick the Astro edition if you are comfortable with npm and want components, layouts, Content Collections for the blog, and one config file for the whole site instead of editing the same header in twenty places.
• Pick the EmDash CMS edition if a client needs to edit the site themselves, with an admin panel and click-to-edit on the live pages.
• Stay on the HTML edition if you want to open a file, change the words, and upload the folder.