https://github.com/julien-marcou/static-html
A simple, lightweight and fast static HTML website generator which makes use of Template Literals
https://github.com/julien-marcou/static-html
builder generator html render static template website
Last synced: about 1 year ago
JSON representation
A simple, lightweight and fast static HTML website generator which makes use of Template Literals
- Host: GitHub
- URL: https://github.com/julien-marcou/static-html
- Owner: Julien-Marcou
- License: mit
- Created: 2021-07-06T21:35:20.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2023-02-25T11:04:50.000Z (over 3 years ago)
- Last Synced: 2025-03-25T12:46:10.715Z (over 1 year ago)
- Topics: builder, generator, html, render, static, template, website
- Language: TypeScript
- Homepage:
- Size: 142 KB
- Stars: 10
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Static-Html
[](https://www.npmjs.com/package/static-html)
[](https://github.com/Julien-Marcou/static-html)
Static-Html is a simple, lightweight and fast static HTML website generator which makes use of [Template Literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) to let you render JavaScript data and expressions into HTML templates.
Static-Html is not a binding engine as it do not keep track of your data or expressions to update portions of your templates dynamically, templates are only render once.
If your looking for a more advanced rendering engine with dynamic data binding, I suggest you take a look at [Lit](https://lit.dev/) on which this project is inspired.
## Install
```shell
npm install static-html
```
## Table of Contents
- [Getting Started](#getting-started)
- [Minimal Project Example](#minimal-project-example)
- [HTML Tag & Syntax Highlighting](#html-tag--syntax-highlighting)
- [Building your Website](#building-your-website)
- [Assets](#assets)
- [Asset Revisions with Content Hash](#asset-revisions-with-content-hash)
- [External Assets](#external-assets)
- [Static Data Rendering](#static-data-rendering)
- [Dynamic Data Rendering](#dynamic-data-rendering)
- [Special Variables](#special-variables)
- [Page URL & Active Page](#page-url--active-page)
- [Page Scripts](#page-scripts)
- [Development Stack](#development-stack)
- [Deploy to Production](#deploy-to-production)
- [URL Redirections](#url-redirections)
## Getting Started
After installing `static-html`, make sure you are in the root folder of your project, then run this command :
```shell
npx static init
```
It will create the default structure for your project so you are ready to go.
The `src` folder contains all the source files needed to build your static website.
The `src/website.json` file contains the configurations for your static website and its content must match this interface :
```typescript
{
// The title of the website
"title": string,
// The description of the website
"description"?: string,
// The keywords of the website
"keywords"?: Array,
// The pages of the website
"pages"?: Array<{
// The name of the page (used for the url and the corresponding page's template)
"name": string,
// The title of the page
"title": string,
// The static data of the page (see the "Static Data Rendering" section)
"data"?: Record,
// Scripts to attach before the closing