Introduction into Harp

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

Transcript

1. Alexander Reelsen
   @spinscale
   alexander.reelsen@elasticsearch.com
   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
    alexander.reelsen@elasticsearch.com
    

    View Slide