Static Starter Kit

This project borns from my daily work needs.

I needed something able to let me quickly set up a fully static website structure, based on Gulp, Yarn, Pug, Sass and JavaScript. During the time I improved it since I decided to publish it as a public repository, here on GitHub!

Hope that share it can help who is looking for a stable and effective structure for static websites, so easy to set up and work with.

✨ Features

Sass superpowers! — Sass is included and it brings you a lot of new possibilities: variables, mixins, extends and many more
Future JS in your hands — thanks to Babel, you can write beautiful ES2016 JS since now
Pug - Yeah, HTML is not so bad, but Pug rocks! It brings awesome features like functions, imports, variables and many more to your templates.
A lint to rule them all — You can not do it wrong! Stylelint, ESLint and PugLint are here to help you to code it cleanly
Modular components architecture — Both templates and styles are divided into folders following a supermodular architecture
Built-in HTTP Server - A built-in server for previewing your site locally is included
It's so tiny! - Every single line of HTML, JS and CSS is concatenated and minified. Your pages will load super fast!
PageSpeed Insights - Thanks to Ngrok, you can test your website with Google PageSpeed directly from your local machine
A fast dependency manager — Yarn is here, ready to help you to fast extend your project

⚡ Quickstart

First of all, you will need Node.js. You can download it from the offical website and follow the installation process for your OS.
Then you'll need Gulp. To install it, follow instruction described here
The last thing to install is Yarn, the dependency manager. Follow the steps described on the website
Now you can install all dependencies: npm install && yarn install
Finally, build everything with gulp build

Great: you can now start to use Static StarterKit! 😄

🔍 What's behind the scenes?

Are you curious to know what's happening behind the scenes? So here below you can find a detailed list of the already defined Gulp tasks. Have fun!

🔨 Style files

All Sass files should be placed into the src/styles folder and are divided following a modular architecture.

The Gulp tasks for styles are:

styles:lint — takes care of linting, following rules described in the .stylelintrc file. To know how to customize that file, have a look at the Stylelint documented rules. As the default, it's set to check hyphenatedbem — from BEM — as class name format convention. To know how to use or customize it, follow this doc. Before linting, the task runs also csscomb to sort properties following what described in SMACSS rules. You can change these settings in the .csscomb.json file
styles:compile — compiles Sass into CSS, adding autoprefixes. Compiled files are written into the .tmp folder
styles:minify — uses cssmin to generate a minified version in the dist folder. Also generates sourcemaps (if --production option is not used)

🔨 Script files

All JavaScript files are placed in src/scripts folder.

The Gulp tasks for scripts are:

scripts:lint — takes care of linting, following rules described in the .eslintrc.json file. To know how to customize that file, have a look at the ESLint documented rules
scripts:transpile — uses Babel to transpiles ES2016 JavaScript into browser-compatible JavaScript. Compiled files are written in the .tmp folder
scripts:minify — uses uglify to generate a minified version in the dist folder. Also generates sourcemaps (if --production option is not used)

🔨 Template files

All Pug files are placed in src/templates folder. Files prefixed with an underscore are not compiled individually but are used for includes.

The Gulp workflow for templates is:

templates:lint — takes care of lint, following rules described in the .pug-lintrc.json file. To know how to customize that file, have a look at the pug-lint documented rules
templates:compile — compiles Pug files into HTML5. If --production option is used, the output HTML5 it will be compressed as well
templates:htaccess — copies the .htaccess file from the src folder to the dist one
templates:injectCSS — uses gulp-inject to inject CSS resources where <!-- inject:css -> comment is placed
templates:injectJS — uses gulp-inject to inject JS resources where <!-- inject:js -> comment is placed

🔨 Images and Fonts

All fonts are flattened and moved from the src folder to the dist/fonts folder.

All images, instead, are compressed using gulp-imagemin. More plugin options are described here

🔨 Google Page Speed

Uses ngrok + PSI to locally test Google Page Speed performances.

💻 Contribute

Any kind of contribute is welcome! If you notice something wrong please open an issue here and, eventually, provide a patch using pull requests.

LucaPipolo / static-starterkit