name: inverse layout: true class: center, middle, inverse --- # Building Static Sites w/ Jekyll [dsmjs.com](http://dsmjs.com/) January 13, 2015 --- layout: false .left-column[ ## Who am I? ] .right-column[ Justin, work remotely @ Principal in Janesville Office ] --- .left-column[ ## Who am I? ## Quick history ] .right-column[ - Lots of code reviews - Explored WP, Joomla, DRUPAL, etc - $, crappy formatting of code, etc - Landed on Jekyll, static site generator ] --- .left-column[ ## Who am I? ## Quick history ## What will we cover? ] .right-column[ - "Getting started with Jekyll" - Deployment options - Walk through - Wrap up ] --- template: inverse ## Jekyll --- layout: false .left-column[ ## What is it? ] .right-column[ - Static site generator - Ruby + liquid + YAML + Markdown - Referred to a "Hacker" blog platform ] --- .left-column[ ## What is it? ## Why use it? ] .right-column[ - Simple - No database - Fast - Control - No worries (upgrades, security, load, etc) - Contains all the same things you grown to love w/ serverside - layout/templates, includes, pagination ] --- .left-column[ ## What is it? ## Why use it? ## How does it work? ] .right-column[ - Generate web assets (HTML/CSS/JS) locally - Deploy to server ] --- template: inverse ## Hosting --- layout: false .left-column[ ## Github ] .right-column[ - [Github pages](https://pages.github.com/) built by jekyll - yourrepo.github.io - Custom domain - Multiple projects - FREE ] --- .left-column[ ## Github ## Amazon S3 ] .right-column[ - More control - Private (in a sense) - [s3_website](https://github.com/laurilehmijoki/s3_website) - Free (practically) ] --- .left-column[ ## Github ## Amazon S3 ## Or... ] .right-column[ - Any webserver ] --- --- template: inverse ## Walk through --- layout: false .left-column[ ## New project ] .right-column[ - Create new project -> justinmusgrove.github.io ``` jekyll new justinmusgrove.github.io jekyll serve --watch ``` - Understand directory structure ] --- .left-column[ ## New project ## Custom data ] .right-column[ -
_data
- Supports YAML, JSON, and CSV - Create member listing members.json + members.md ] --- .left-column[ ## New project ## Custom data ## Collections ] .right-column[ - Ability to specify unqiue behavior in
_config.yml
- Like pages or posts - Exercise: create local api
/api/user_timeline.json
] --- template: inverse ## Not so static, static site generator? --- Using a static site generator challenges us to find solutions at build time vs render time - Bunch of back end processes feeding data to jekyll Are you ok with almost "live" data for the sake of - page performance - reduce complexity and maintenance --- template: inverse ## Wrap up --- layout: false .left-column[ ## What else? ] .right-column[ - Performance (page regeneration, ruby, liquid) ```yaml #_config.yml exclude: [ 'some/directory', 'some/other/directory'] ``` - [Installing on windows sucks](http://jekyllrb.com/docs/windows/) - [Jekyll 3.0](https://byparker.com/blog/2014/jekyll-3-the-road-ahead/) - Debates on marriage b/t Jekyll and github - Is jekyll just serving the need of github or the entire community - [Jekyll grunt plugin](https://www.npmjs.com/package/grunt-jekyll) - control build to enviroments - grunt eco system - lack of ruby of experience - [Octopress](http://octopress.org/) ] --- .left-column[ ## What else? ## Ideas ] .right-column[ - Static site themes - Create jekyll based editing for server side for non developers ] --- .left-column[ ## What else? ## Ideas ## Other jekyll sites ] .right-column[ Lots of other sites built with jekyll and hosted on github * [Mockito](http://site.mockito.org/) * [Springframework](http://spring.io/projects) * [dsmjs](http://dsmjs.com/) * [HealthCare.gov](HealthCare.gov) * [csswizardry](csshttp://csswizardry.com/about/#colophon) ] --- .left-column[ ## What else? ## Ideas ## Other jekyll sites ## Resources ] .right-column[ - [Jekyllrb](http://jekyllrb.com/) - [Github pages](https://pages.github.com/) - [Liquid for designers](https://github.com/Shopify/liquid/wiki/Liquid-for-Designers) - [AsciiDoc text generaton](http://www.methods.co.nz/asciidoc/) - [Lots of other static generators](https://www.staticgen.com/) - [Github guides](https://help.github.com/categories/github-pages-basics/) ] --- name: last-page template: inverse ## Questions? Slideshow created using [remark](http://github.com/gnab/remark).