create-static-web
Advanced tools
Another static site generator:
$ npm install create-static-web -g
$ web
| Transformations | Features |
|---|---|
.liquid .hbs → .html | • Works out of the box |
.md + layout: → .html | • Livereload |
.scss .sass → .min.css | • Extensible with hooks [WIP] |
.src.js → .min.js [WIP] | • Basic compatibility with Jekyll |
Create your readme.md:
---
layout: hello.hbs
---
Front-matter enabled website
Also your _hello.hbs file:
<main>{{ body }}</main>
Voila! Your site should be ready to go:
<main>
<p>Front-matter enabled website</p>
</main>
Clone this repo and run web:
$ npm install create-static-web -g
$ git clone https://github.com/franciscop/create-static-web.git
$ cd create-static-web
$ web # The browser will open with this readme
The command web will automatically compile some extensions (explained below). Except if they also start by an underscore. Then they will be considered partials and not be rendered by default.
These will be rendered (excluding Partials) into a file with the same name and the extension html:
./index.liquid → ./index.html./demo.liquid → ./demo.html./blog/index.liquid → ./blog/index.htmlThey will receive the data as specified in the Data Specification:
// index.liquid
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
...
</head>
...
</html>
The style files (excluding Partials) will be compiled to a file with the same name in the same folder, with the extension .min.css:
./style.scss → ./style.min.css./demo.scss → ./demo.min.css./blog/style.scss → ./blog/style.min.cssThen you have to include it in your template as normal:
// index.hbs
<!DOCTYPE html>
<html>
<head>
...
<link rel="stylesheet" href="/style.min.css">
</head>
...
</html>
Files ending with these extensions will be automatically compiled:
.liquid, .hbs, .sass, .scss
They are compiled to the same folder with the same filename. SASS and SCSS will add a .min to the extension to differentiate in case you have any .css.
Partials are useful in two situation: as layouts and to be included in another files.
A file called static.config.js in the same folder where the script is being run will be loaded as a configuration script.
There is a special variable called content (aliased as body) which represents the Markdown content as html into your template:
// index.liquid
<!DOCTYPE html>
<html>
<head>
<title>{{title}}</title>
...
</head>
<body>
{{ body }}
</body>
</html>
FAQs
Create static websites easily with the expected defaults
We found that create-static-web demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CEO Feross Aboukhadijeh joins Software Engineering Daily to discuss modern software supply chain attacks and rising AI-driven security risks.
Security News
GitHub has revoked npm classic tokens for publishing; maintainers must migrate, but OpenJS warns OIDC trusted publishing still has risky gaps for critical projects.
Security News
Rust’s crates.io team is advancing an RFC to add a Security tab that surfaces RustSec vulnerability and unsoundness advisories directly on crate pages.