vanilla-html template

A Multi-Page Vanilla HTML Template with Modern DX (Tailwind, Live Reload, Partials, etc.)

vanilla-html is unopinionated - write plain HTML, JS, and CSS, or
npm install react react-dom if you prefer.

Commands

Create a new multi-page vanilla html site:

npm create vanilla-html-site@latest

Start dev server with live reloading:

npm run dev

Build for production, output to dist folder:

npm run build

Preview dist folder:

npm run preview

Deploy to Cloudflare Pages:

npm run build && npx wrangler pages deploy dist

Routing

It uses file-based routing. Your src folder structure defines the URLs.
Organize your HTML, scripts, styles, and assets (images, videos) freely within src and its subfolders.

For example: this About page resides in the src/other/ folder.

<a href="./other/about.html">About page</a>

Note the ./ at the beginning - it's a relative path.

HTML Components / Partials

vanilla-html uses posthtml-include to support HTML components.

Write your HTML components in src/components and include them in your HTML files like this:

<include src="./components/header.html"></include>

To pass data to a partial (data must be in JSON, not JS object):

<include src="./components/header.html">
  { "title": "vanilla-html guide" }
</include>