jonathantribouharet/base-static-site

Base scaffold for simple static website using compression and minification

Base scaffold for static web development

This code is a scaffold for landing page. It minify your code, optimize your images and create a gzip version of every files.

The goal is to optimize the size and the speed of the website at the maximum.

Requirements

You need to have the followings package installed:

• npm Package manager for NodeJS
• clean-css Minify your CSS
• UglifyJS 2 Minify your Javascript
• html-minifier Minify your HTML
• optipng Compress your PNG images (version 0.7 minimum)
• jpegoptim Compress your JPEG images

Installing Dependencies

• npm is installed with NodeJS, check NodeJS documentation for more details

• clean-css, UglifyJS 2 and html-minifier are npm packages:

    sudo npm install clean-css -g
    sudo npm install uglify-js -g
    sudo npm install html-minifier -g

• optipng can be installed with:

    sudo apt-get install optipng

Check the version of optipng with optipng -v if it's inferior to 0.7, you have to download optipng at http://optipng.sourceforge.net/

• jpegoptim can be installed with:

    sudo apt-get install jpegoptim

Usage

Once you have everything is installed, you have to copy the repository:

curl -L -O https://github.com/jonathantribouharet/base-static-site/archive/master.zip && unzip master && rm master.zip && mv base-static-site-master site

This command download the latest version, unzip it in site folder and remove the downloaded archive.

Compress and minify your code with:

./compress.sh

The command generate a prod folder containg your project fully optimized.

What's in it?

• dev folder, it's your working folder, every pages must be in it with .html extension. By default you have an index.html file with the minimum.
• dev/css, every css files must be in it with .css extension. By default you have a reset.css and an empty file style.css.
• dev/img, every images must be in it with .png or .jpg extension.
• dev/js, every javascript files must be in it with .js.
• dev/font, used for fonts but no particular process are applied to this folder.
• compress.sh, the script you have to run for create the prod folder with every files minified and compressed.

How it works

When you run compress.sh by doing

./compress.sh

• it create a new folder prod (remove the older one if exist)
• copy the HTML, Javascript, CSS and fonts files from dev to prod
• minify your HTML, Javascript and CSS files
• optimize your images files
• create a gzip version of every files. It avoid the server to do it dynamically and we use a the biggest compression existing. If you use nginx, check the gzip_static option, activate with gzip_static on;

Author

• Jonathan Tribouharet (@johntribouharet)

License

This code is released under the MIT license. See the LICENSE file for more info.