Static Lite is a minimalist configuration for generating static sites, powered entirely by NPM scripts.
Why? Check out our project objectives.
Hit this fancy button to duplicate this repo and to get it hosted on Netlify in seconds:
Clone down this repo, then run the following inside:
npm i && npm run watch
Here is the usage of the NPM scripts, assuming you haven't changed them.
There are additional lower-level npm scripts that I won't describe here. You will have to dig into the NPM Scripts to understand their usage.
To compile, start a server, and watch your files for changes, run the following command:
npm run watchTo compile your code in src to browser friendly html/css/js, run the following command:
npm run compileTo start a local server displaying the compiled public directory, run the following command:
npm run serveTo clear the cache that stores the stdout of the src/data file, run the following command:
npm run cache:clearYou might want to combine this with watch, so you clear the cache every time you restart the watcher:
npm run cache:clear && npm run watch
If this is a common use case for you, you might want to add a new NPM Script that does exactly the above.
All of the code that you will be interested in is in the src directory.
In its most basic form, the src directory will look like this:
src/
├── assets
├── css
│ └── index.styl
├── data
├── html
│ └── pages
│ └── index.pug
├── js
│ └── index.js
└── templates
The src directory is the directory that files are pulled from to generate your static site in the public directory.
The src/data file is the place where you prepare data to pass to our HTML compiler and templates script.
If you note, this file has no extension. This is intentional, as there is no need mandate this file be written in any specific language. My example uses Node to prepare the data, and I use a shebang to denote my interpreter.
You must output your final JSON Object to stdout.
The sec/templates file is the place where you generate any custom pages that aren't explicitly declared in the src/html/pages structure.
This file is passed the data that was output by the data file.
The src/assets directory is the place where you would want to put your assets (think .jpg, .svg, etc).
You can maintain any subfolder organization in this folder, as assets are simply copied into the public/assets directory when compiled.
The src/css directory is the place where we are going to store our stylus files.
There must be an index.styl file present in this directory, as we are specifically compiling that file. To have multiple stylus files, you must take advantage of Stylus's @import or @require feature.
The src/css/index.styl file is compiled down to public/index.css.
The src/html directory is the place where we will store our Pug files.
There must be a pages directory present inside of this directory, as we are compiling the src/html/pages directory. We are specifically compiling the pages directory, so you are safe to use templates / utility files outside of the pages directory.
The src/html/pages/ directory is compiled directly into the public/ directory. You must be mindful of this fact when referencing assets in your HTML, as there is no magic that goes and updates your local references during the compile process.
The src/js directory is the place where we will store our Javascript (es2015, stage-2) files.
There must be an index.js file present in this directory, as we are specifically compiling that file. To have multiple Javascript files, you must take advantage of Javascripts require or import.
Static Lite is built around the idea of flexibility. I understand that everyone won't agree with the build tools decided on in the master branch, so here is some popular tools that I've already integrated into Static Lite for you.
You can cherry-pick the commits of the tools you want to use yourself!
If your tool of choice isn't here, give a shot plugging it in yourself! If you're struggling to set it up yourself, file an issue and we can try to help.
- es2015 stage-2 (master branch)
- Coffeescript
- Pug (master branch)
- Stylus (master branch)