Level - Beginner/Intermediate. Read Time ~ 5 minutes.
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.
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.
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
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 -
- 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!
Subscribe to Hackerlite
Get the latest posts delivered right to your inbox