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.
- 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
- 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! 😄
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!
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 checkhyphenatedbem
— from BEM — as class name format convention. To know how to use or customize it, follow this doc. Before linting, the task runs alsocsscomb
to sort properties following what described in SMACSS rules. You can change these settings in the.csscomb.json
filestyles:compile
— compiles Sass into CSS, adding autoprefixes. Compiled files are written into the.tmp
folderstyles:minify
— usescssmin
to generate a minified version in thedist
folder. Also generates sourcemaps (if--production
option is not used)
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 rulesscripts:transpile
— uses Babel to transpiles ES2016 JavaScript into browser-compatible JavaScript. Compiled files are written in the.tmp
folderscripts:minify
— usesuglify
to generate a minified version in thedist
folder. Also generates sourcemaps (if--production
option is not used)
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 rulestemplates:compile
— compiles Pug files into HTML5. If--production
option is used, the output HTML5 it will be compressed as welltemplates:htaccess
— copies the.htaccess
file from thesrc
folder to thedist
onetemplates:injectCSS
— usesgulp-inject
to inject CSS resources where<!-- inject:css ->
comment is placedtemplates:injectJS
— usesgulp-inject
to inject JS resources where<!-- inject:js ->
comment is placed
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
Uses ngrok + PSI to locally test Google Page Speed performances.
Any kind of contribute is welcome! If you notice something wrong please open an issue here and, eventually, provide a patch using pull requests.