This is the boilerplate that Major League Hacking (MLH) uses in the development of static websites. It combines Handlebars and Webpack to automate and speed up common development tasks.
Before you start, make sure npm is installed on your computer.
Now let's install the development dependencies by running the NPM installer:
$ npm install
Note: These steps may require the use of sudo
depending on your
environment.
To launch the development server, just run:
$ npm run start
An overview of the NPM commands available:
Builds static html and assets into the dist
directory.
- Cleans any precompiled assets in
dist
- Composes handlebars partials into html
- Lints and compiles SASS into CSS, applies vendor prefixes
- Lints and compiles Javascript
- Bundles js and css into minified, versioned files
- Optimizes images and builds them to the
img
folder insidedist
Spins up webpack dev server for local development
- Watches files inside
_src/
directory and updates website on change - Builds the assets into
dist
folder and serves them on portlocalhost:8080
- If you make changes outside the
_src/
directory you'll have to stop the server with Ctrl + C and start it again
├── .gitignore # Defines which files Git should diregard
├── .eslintrc.js # Configuration file for eslint
├── .scss-lint.yml # Rules for linting SASS files
├── config.js # Site configuration
├── README.md # How to use this project
├── dist/ # Folder containing all the resources for the website
├── img/ # Optimized images and SVGs
└── mlh.v.1.0.0.min.css # Minified css assets
└── mlh.v.1.0.0.min.js # Minified js assets
└── index.html # Default html page
├── src/ # Folder containing all the resources for the website
├── _includes/ # Handlebars partials
└── head.hbs # Handlebars partial for the <head> tag
└── main_navigation.hbs # Handlebars partial for the <nav> tag
└── main_navigation_links.hbs # Links inside of main_navigation.hbs
├── tracking/ # Tracking codes
└── segment.hbs # Segment menagas all of your different tracking platforms(Facebook, Twitter, Google etc...)
├── _sass/ # Stylesheets directory
└── _base.scss # Base styles
└── _layout.scss # Grid system
└── _shared.scss # Shared styles
└── _typography.scss # Typography styles
└── _util.scss # SASS helper functions
├── lib/ # External CSS libraries
└── animate.min.scss # CSS animations
└── reset.min.scss # CSS reset
└── hamburgers.min.scss # CSS Hamburgers Menu
└── main.scss # Variable definitions and list of SASS partials to compile
├── img/ # Images and SVGs
├── index.hbs # The default HTML page
├── js/ # Javascript libraries and scripts
└── app.js # The default Javascript file
├── handlebarsHelpers/ # Handlabars can use helper methods in templates
└── canonicalGenerator.js # Builds canonical url index.hbs
├── lib/ # External JS libraries
└── jquery-2.2.2.min.js # jQuery
└── jquery-anchorjumps-1.0.min.js # jQuery
└── jquery-waypoints.min.js # jQuery
├── webpack.config.js # Defines webpack tasks for development
├── package.json # Javascript Dependencies
├── package-lock.json # Keeps track of the dependency tree
Big shout out to the Minimill Project Template for inspiring this project.