$ npm install staticallyStatically is a simple tool that allows you to build static websites from urls.
Let's say you want to build an app or a website, and you use a template engine like lit-html or Preact for example. Your code will look like the one in lit-html-example folder.
If you run webpack it will generate a dist folder containing an index.html file and index.entry.js. This is perfectly fine and it will work, in fact if you run:
$ http-server distyou will see the site up and running. So what's the problem? Well there are 2 main problems with it:
- Client Rendering
- Network Request for data that could be statically rendered, which will result in a less performant website.
Since in this case we are just rendering some static data, it would be much better to prerender them as much as possible, and remove the scripts that are not necessary anymore as well, so we do not have to request them over the network on runtime.
Basically we should go from something like:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Example</h1>
<div id="hello"></div>
<div id="github"></div>
<script data-remove src="./index.static.js"></script>
</body>
</html>Note: The html nodes with the attribute data-remove will be removed automatically by the tool.
to something like:
<!-- index.html -->
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>Example</h1>
<div id="hello"><div>Hello Kevin!</div></div>
<div id="github"><p>Github username: Pachito Marco Calabrese is located in Denmark and is a a telecommunication engineer with the passion for mixing web and embedded systems and is known on GitHub as pmcalabrese, he has 30 repos</p></div>
<!-- note there is no script here -->
</body></html>This is nice, beacuse we can carry on developing with a comfortable rendering template like lit-html and prerendering (for example just before deploy) for good performance and SEO.
Statically will allow you to do that with ease. All you need is a simple config file. The config file Statically.config.js will contains the list of urls that need to became a file.
Let's have a look at the lit-html-example folder.
// statically.config.js
const path = require("path");
const urls = [{
url: "http://localhost:8081",
dist_file: path.resolve(process.cwd() + "/../../public-static/index.html")
}]
module.exports = urls;After create the config file
$ cd lit-html-example
$ webpackthis will generate a dist folder, let's serve the folder with http-server tool like so:
$ http-server -p 8081 distNow we can run statically. Remember that the port in the config file must match the port of the server (in this specific example I chose 8081)
$ statically --config ../statically.config.jsFinal note: lit-html is just an example, this tool is appliacable for any render lib, like React Preact etc.
you can use with a config file
$ statically --config ../statically.config.jsor passing an url and a file
statically --url www.google.com --file google.html
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent