marzeelabs / drupal-day-2017

https://drupalday-2017.netlify.com/
1 stars 3 forks source link

MZ Harp

Heroku

Boilerplate for Harp with Gulp support, responsive images and a simple blog structure.

Setup

  1. Setup boilerplate: harp init my-harp --boilerplate marzeelabs/mz-harp
  2. Navigate inside the new directory with cd my-harp
  3. Install all dependencies with npm install
  4. Install gulp and harp globally with npm install -g gulp harp so you get the CLIs available

This will get you a copy of the repository locally and also download all node dependencies such as harp, Gulp, jimp, Browsersync, etc.

Run

In order to serve your local copy of the website, while on the project directory, just do gulp and everything will be handled for you.

The default task for gulp will:

  1. Create responsive versions of the blog's images with jimp
  2. Minify and concatenate the multiple JS scripts with uglify
  3. Build the static files for the website in the www dir with harp
  4. Serve the website in localhost:3333 with harp and Browsersync

Responsive images

The default gulp tasks take care of processing the images in various sizes for the responsive image markup, as well as replacing the code in the compiled HTML. All that is required is for the author to add the image files in the _posts-images directory and include the base image (also copied to public/images/posts/) in the post - e.g. alt

Development

For development guidelines, please check the harp documentation at http://harpjs.com/docs/development/

Reviewing and hosting

In order to review the static site, this boilerplate is integrated with Heroku's pipelines, which spins up a new site for each pull request and commit.

Credits

Made by Marzee Labs