🚨 Shai-Hulud Strikes Again:834 Packages Compromised.Technical Analysis →
Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

create-static-web

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

create-static-web

Create static websites easily with the expected defaults

Source
npmnpm
Version
0.7.0
Version published
Weekly downloads
3
Maintainers
1
Weekly downloads
 
Created
Source

Create-Static-Web

Another static site generator:

$ npm install create-static-web -g
$ web
TransformationsFeatures
.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

Getting Started

Create your readme.md:

---
layout: hello.hbs
---

Front-matter enabled website

Also your _hello.hbs file:

<p>{{ content }}</p>

Voila! Your site should be ready to go:

<p>Front-matter enabled website</p>

Demo

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

Automatic compilation

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.

Liquid template

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.html

They will receive the data as specified in the Data Specification:

// index.liquid
<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>
    ...
  </head>
  ...
</html>

SASS and SCSS

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.css

Then 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

Partials are useful in two situation: as layouts and to be included in another files.

Data Specification

Work in Progress

Any .json found in the filesystem will be parsed and its value will be set into a variable with the same name as the filename:

For example, for the filename info.json:

{ "title": "My Cool Website" }

You can access this variable within your templates as:

<!DOCTYPE html>
<html>
  <head>
    <title>{{info.title}}</title>
    ...
  </head>
  ...
</html>

Front Matter

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>
    {{ content }}
  </body>
</html>

Keywords

create
static
web
site
generator

FAQs

Package last updated on 14 Nov 2018

Did you know?

Socket

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.

Install

Related posts

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Security News

Deno 2.6 + Socket: Supply Chain Defense In Your CLI

Deno 2.6 introduces deno audit with a new --socket flag that plugs directly into Socket to bring supply chain security checks into the Deno CLI.

By Sarah Gooding  -  Dec 12, 2025