/ Javascript

Simple Gulp file to compress CSS and HTML for a static site on AWS S3

Level - Beginner/Intermediate. Read Time ~ 5 minutes.
Repo - https://github.com/blairg/aws-s3-static-site-template

The other day I was tasked with hosting a landing page for a website whilst it was being updated. I could have just created a single HTML file with inline styles and fronted it behind with Nginx or Apache. But I wanted to do something different.

For landing page I decided to use the following: -

  • Skeleton CSS for responsive website
  • Gulp to minify CSS, HTML and compress images
  • NodeJS and NPM as the build platform
  • AWS S3 for Hosting

I'll explain the above choices in more detail.

Skeleton

Bootstrap is very good and widely used, but overkill for my use case. So decided to benefit from the conciseness and cleanness of the 400 line Skeleton CSS file. I'd not heard about until recently when a friend recommended it. I was just looking for a fluid layout with rows and columns, nothing world beating. This may not be the best solution for you, but worth looking at.

Gulp

It wasn't imperative that my static site with a single page was highly optimised. I already had a Gulp script which I have used on other client side applications, so I thought I'd utilise it and follow good practices. In the repo you will find the 'gulpfile.js'. I have used this to minify css, inject this into the index.html and compress the images. The end result appears in a 'build' directory.

NodeJS and NPM

NodeJS and NPM has been used for the packages and to execute the gulp file. ES6 has been used for JavaScript in the gulp file. I used Atom as my IDE of choice and developed this on a Macbook.

AWS S3

A good and simple way to host static sites is AWS S3. You can simply create a bucket upload your static assets such as: CSS, HTML, images and JavaScript files. Then S3 will serve these. You can then use the Cloudfront Edge servers to distribute this globally to yours users. A full explanation of AWS, S3 and Cloudfront is not within scope. Read these links on how to use S3 for static hosting and Cloudfront. You'll also need to read up on Route 53 to point your CNAME to the S3 bucket. If you require a detailed explanation of this. Drop your Twitter handle in the comments and I'll explain how to do this and probably write another blog article to do it.

How to use this

Clone the repo on Github. Then the following commands will serve you well:-

  • Firstly in the terminal in the folder you have cloned to run the command to install the node modules - npm i
  • Build the static site with gulp in the terminal - gulp cleanbuild && gulp minifycss && gulp copyhtml && gulp minifyimages && gulp injectcss && gulp minifyhtml
  • If you change the gulp file, run JSHint to check it is still valid, in the terminal - npm run jshint
  • For IDE choice the following are good in my opinion Atom, Sublime, Web Storm, Visual Studio Code, Visual Studio (Windows only)

Any comments, please add them below!