Sites is a small collection of useful utilities for building static websites, without having to configure complex build tools. It works out-of-the-box with close to zero configuration required.
Sites includes everything you need for a modern static website, out-of-the-box:
- SASS.
- Minification and combination for CSS and JS.
- Live reloading via Browsersync.
- Cache busting hashes are inserted into filenames for all static files, optimal caching via far-future expires headers.
tl;dr: See the example directory in this repo for a sample site.
-
Add the required npm packages to your site, by running
yarn add --dev gulp sites(ornpm install --save-dev gulp sitesif using npm rather than Yarn). -
Create basic directory structure:
assetsfor any static files that do not need any processing (images, web fonts, etc).cssfor SASS files. These are compiled into the_output/cssdirectory.
-
Create
gulpfile.jswith the following contents:const gulp = require('gulp'); const sites = require('sites'); sites.installTasks(gulp);
-
Build static HTML files, referencing CSS files from
_output/css:<!DOCTYPE html> <html> <head> <title>Hello world!</title> <link href="_output/css/main.css" rel="stylesheet"> </head> <body> <h1>Hello world!</h1> </body> </html>
-
Run
gulp serveto open the site in your browser. This uses BrowserSync, so any edits to the CSS or HTML files will automatically refresh the browser! -
Configure CSS combination by adding some comments to the HTML file:
<!-- build:css css/combined.css --> <link href="_output/css/main.css" rel="stylesheet"> <!-- endbuild -->
-
Run
gulp buildto build the production version of the site. The_outputdirectory is now fully optimized and ready to push to production!
- Copy regular .css files to the output directory, in addition to compiling Sass
- Live reload Sass file when
css/modulesandcss/partialsdirectories change
- Added support for JavaScript. JS files are compiled using Babel
- Include source maps for combined files
- Initial release