Sites
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.
Features
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.
Usage
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 sites
if using npm rather than Yarn). -
Create basic directory structure:
assets
for any static files that do not need any processing (images, web fonts, etc).css
for SASS files. These are compiled into the_output/css
directory.
-
Create
gulpfile.js
with the following contents:const gulp = ;const sites = ;sites; -
Build static HTML files, referencing CSS files from
_output/css
:Hello world!Hello world! -
Run
gulp serve
to 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 --><!-- endbuild --> -
Run
gulp build
to build the production version of the site. The_output
directory is now fully optimized and ready to push to production!
Changelog
1.0.2 - 28th October 2017
- Copy regular .css files to the output directory, in addition to compiling Sass
- Live reload Sass file when
css/modules
andcss/partials
directories change
1.0.1 - 3rd July 2017
- Added support for JavaScript. JS files are compiled using Babel
- Include source maps for combined files
1.0 - 2nd July 2017
- Initial release