$30 off During Our Annual Pro Sale. View Details »

Introduction into Harp

Introduction into Harp

A quick introduction into harp. Hold at the MNUG Meetup in Munich in December 2014

Alexander Reelsen

December 04, 2014
Tweet

More Decks by Alexander Reelsen

Other Decks in Technology

Transcript

  1. Alexander Reelsen
    @spinscale
    [email protected]
    Introduction into
    harp

    View Slide

  2. About me
    Developer at Elasticsearch
    Interested in all things scale, search & a bit web
    No clue about web design
    likes tech meetups...

    View Slide

  3. More search...
    Check out the Search Meetup Munich (15th Dec)
    http://www.meetup.com/Search-Meetup-Munich/events/218856224/

    View Slide

  4. Devcamp anyone?
    Like a barcamp, but for developers only!
    Location for 150 people
    One big room
    5 small conference rooms
    Sponsors wanted as well
    Contact me!

    View Slide

  5. Introduction

    View Slide

  6. Static site generators
    There are a few out there... 388
    https://staticsitegenerators.net/
    Known ones
    Jekyll, Octopress, Pelican, Middleman

    View Slide

  7. Use-Cases
    Prototyping
    Documentation
    Small websites
    Blogs
    Potentially replacing misused CMS

    View Slide

  8. harp
    static web server with built-in preprocessing
    HTML: EJS, Jade, Markdown
    CSS: LESS, Stylus, SASS
    JS: Coffeescript

    View Slide

  9. Installation
    npm install -g harp
    harp init myproject
    harp server myproject

    View Slide

  10. Features

    View Slide

  11. Command line options
    harp compile
    creates compiled HTML/CSS/JS for static hosting
    harp multihost
    allows to develop multiple projects in parallel

    View Slide

  12. Features - Partials


    Home
    Product
    Services



    <%= partial("_nav") %>
    Services


    View Slide

  13. Features - Metadata
    {
    "team": {
    "title": "Team page",
    "members": ["Rob", “Brock", "Jorge"]
    }
    }
    h1= title
    ul
    each member in members
    li= member
    _data.json
    team.jade

    View Slide

  14. Integration - express.js
    var express = require("express");
    var harp = require("harp");
    var app = express();
    app.configure(function(){
    app.use(express.static(__dirname + "/public"));
    app.use(harp.mount(__dirname + "/public"));
    });

    View Slide

  15. Features - Boilerplates
    harp init -b harp-boilerplates/hb-blog
    Blog, Bootstrap, Presentations...
    https://github.com/harp-boilerplates

    View Slide

  16. Features - Environment
    Act different depending on your environment
    production || development
    Display drafts etc..
    Different caching strategy (LRU vs. none)
    harp compile is production as well!

    View Slide

  17. Features - Deployment
    GitHub Pages
    Heroku
    Azure
    harp.io

    View Slide

  18. Features...
    Support for globals.json
    current object for application state
    Basic Auth
    Custom 404, 200 (for client apps)
    More help through recipes
    http://harpjs.com/recipes/

    View Slide

  19. Not (yet) implemented...
    browser-sync
    https://github.com/sintaxi/harp/pull/360
    terraform needs to be updated more regularly
    lots of pending PRs with support for other languages
    Big picture: Harp editor
    https://github.com/silentrob/harp-editor

    View Slide

  20. DEMO

    View Slide

  21. Resources
    Harp
    http://harpjs.com/
    https://github.com/sintaxi/harp
    Harp Platform
    https://www.harp.io/
    Note: No affiliation with harp
    just stole the design!

    View Slide

  22. Thanks for listening!
    Alexander Reelsen
    @spinscale
    [email protected]

    View Slide