@nordskill/ground-zero

v1.2.0

Published

6 hours ago

Zero-config Vite + EJS static site generator with hot module reloading and BrowserSync-powered dev server.

0High
0Medium
0Low

nordskill

vite ejs static-site-generator ssg browser-sync zero-config markup hmr

Ground Zero

Ground Zero (ground-zero) is a zero-config static site generator that wraps Vite, EJS templates, and modern CSS. Install it, run one command, and you get hot module reloading, BrowserSync mirroring, and production builds without writing any config files.

Why Ground Zero?

Zero setup: Vite config, BrowserSync, and file watching are bundled, so you only write templates and CSS.
Pure EJS + CSS: No React, no SCSS pipeline—just standard EJS partials and native CSS features (nesting, layers, imports).
Instant feedback: Vite's HMR keeps the browser in sync while BrowserSync mirrors clicks, scroll, and form inputs across devices.
Predictable builds: Every build runs EJS → Vite build → CSS minify, so what you preview is what you ship.

Core concepts

| Concept | What it means | | --- | --- | | EJS pages | Files under src/pages/*.ejs become HTML in dev-html/ (dev) or build/ (prod). Include partials from src/partials/*.ejs. | | Module entry | src/assets/js/main.js is injected via /@fs/ so you can import modules without fiddling with paths. | | One-click commands | gzero runs the dev loop (compile + Vite serve). gzero-build compiles, then minifies CSS with esbuild. | | Modern CSS | Write plain .css files that use nesting, layers, imports, and variables—Vite handles the rest. |

EJS comments

Ground Zero supports multiline comments that can contain EJS tags inside them. Anything between <%# and %> is stripped out during compilation:

<%#
This entire block is removed from the output.
You can even put EJS tags here and they won't run:
<%- include('partials/example') %>
%>

This is useful for temporarily disabling sections of a template or leaving notes for yourself.

SVG icons

Put your .svg files in src/assets/icons/. Ground Zero automatically generates a sprite file and watches for changes during development.

To use icons in a template:

Include the sprite once per page (usually right after <body>):

<%- include('../partials/svg-sprite') %>

Reference icons by filename using <use>:

<svg style="width: 24px; height: 24px;">
    <use href="#icon-home"></use>
</svg>

The icon ID follows the pattern #icon-{filename} — so home.svg becomes #icon-home.

Quick start

mkdir my-site && cd my-site
npm init -y
npm install @nordskill/ground-zero

# minimal structure
mkdir -p src/pages src/partials src/assets/css src/assets/js
touch src/pages/index.ejs src/assets/css/main.css src/assets/js/main.js

Example src/pages/index.ejs:

<!DOCTYPE html>
<html lang="en">
  <%- include('partials/head') %>
  <body>
    <%- include('partials/header') %>
    <main>
      <h1>Hello from Ground Zero</h1>
    </main>
    <%- include('partials/footer') %>
  </body>
</html>

Develop with HMR

npx gzero

This command:

Compiles all EJS pages into dev-html/.
Starts Vite with HMR so you see changes immediately.
Keeps BrowserSync in sync across open devices.

Build for production

npx gzero-build

This command:

Recompiles EJS → HTML.
Runs vite build with the packaged config (multi-page aware).
Minifies every CSS file in build/ using esbuild.

Deploy the build/ folder to any static host.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme