Generate an optimized static website, or use at run-time with a custom server.
- Compiles and optimizes SCSS files.
- Optimizes JavaScript.
- Compiles TypeScript to JavaScript.
- Embed data from JSON and YAML files.
- HTML templates with ejs and moe.
- Automatically copies static files.
- Can be used with a custom web server.
Install with: npm install -g @the-noah/static-site-generator
Install with npm install -s @the-noah/static-site-generator.
Add static-site-generator as a script in your package.json to build your website.
The configuration file must be named .static-site-generator.config.json and must be in the root of your project. Configuration is available in options.
| Property | Type | Default | Description |
|---|---|---|---|
| srcDir | string |
"src" | Path to look in for files. |
| buildDir | string |
"build" | Path to save final files to. |
| staticDir | string |
"static" | Path in srcDir to look for static files. |
| logLevel | number |
0 | 0 = all, 1 = no info, 2 = no sucess, 3 = no warning, 4 = no error - each level also inherits from the last |
| compressionLevel | Number | 2 | How much to compress files - 0 = none, 3 = max |
Run static-site-generator in the root of your project to build your website.
static-site-generator can be used as a library, such as with a web server.
JavaScript
const {staticSiteGenerator} = require("@the-noah/static-site-generator");TypeScript
import {staticSiteGenerator} from "@the-noah/static-site-generator";Renders all pages in options.srcDir and saves them in options.buildDir, as well as copies all files from options.srcDir/options.staticDir to options.buildDir.
Returns Promise<void>
Example
await staticSiteGenerator.build();Renders the page found at pagePath with the data data and returns a Promise<string> containing the minified HTML.
Returns Promise<string>
| Property | Type | Description |
|---|---|---|
| pagePath | string |
Path of the page to render. |
| data | Record<string, unknown> |
Data used to render the page. |
Example
const html = await staticSiteGenerator.renderPage("index.ejs", {message: "Hello, World!"});Returns all data from files found in options.srcDir.
Returns Promise<Record<string, unknown>>
Example
console.log(await staticSiteGenerator.getData());The following template engines are built-in.
You can easily add your own using the addPageFile and addPageHandler methods.
The getData() function retrieves data from different files types and mashes it together.
.css and compiled .scss files will be compressed and available as a string under their filename in the css object.
Example
main.css will be compressed then be available under css.main.
style.scss will be compiled and compressed then available under css.style.
/* main.css */
h1{
color: red;
}console.log(data.css.main === "h1{color:red}"); // true.js and compiled .ts files will be compressed and available as a string under their filename in the js object.
Example
app.js will be compressed then available under js.app.
script.ts will be compiled and compressed then available under js.script.
// app.js
alert("Hello, World!");console.log(data.js.app === "alert(\"Hello, World!\");"); // true.json files will be available under their filename.
Example
blog.json will be available under blog.
[
{
"title": "My New Blog",
"date": "2020-5-6",
"text": "This is my new blog where I talk about cats!"
}
]console.log(data.blog[0].date !== "2020-5-6") // true.yaml and .yml files will be available under their filename.
Example
test.yml will be available under yml.
message: "hello"console.log(data.test.message === "hello"); // trueconst path = require("path");
const {staticSiteGenerator} = require("@the-noah/static-site-generator");
const express = require("express");
const app = express();
const PORT = 3000;
app.get("/", async (req, res) => {
res.send(await staticSiteGenerator.renderPage(path.join(staticSiteGenerator.options.srcDir, "index.ejs"), await staticSiteGenerator.getData());
});
app.listen(PORT, () => console.log(`Server running at http://localhost:${PORT}`));