mlh-site-boilerplate

Boilerplate code for internal MLH mini-sites. Written in Jekyll & Gulp.

Want a Jekyll website built?

MLH/mlh-site-boilerplate

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.

Setup

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.

Developing

To launch the development server, just run:

$ npm run start

npm Commands

An overview of the NPM commands available:

`npm run build`

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 inside dist

`npm run start`

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 port localhost:8080
If you make changes outside the _src/ directory you'll have to stop the server with Ctrl + C and start it again

Structure

├── .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

Special Thanks

Big shout out to the Minimill Project Template for inspiring this project.

Want a Jekyll website built?

Hire a Jekyll developer