Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Web Dev Workshop

Modern Web Dev Workshop

Jack Bouba and Brian Middleton, Planet Argon's two front-end developers, taught a workshop about Bootstrap, Sass, GItHub, and Jekyll. Check out http://modernwebworkshop.com for details.

Planet Argon

May 06, 2013
Tweet

Other Decks in Technology

Transcript

  1. Welcome!
    modern web dev workshop

    View Slide

  2. Schedule
    9am - 11am: Introduction / Bootstrap
    15 min BREAK
    11:15am - 1pm: Sass/SCSS
    1 hr LUNCH
    2pm - 3pm: Git/Github
    15 min BREAK
    3:15pm - 4:45pm: Jekyll
    4:45pm - 5pm: Q/A

    View Slide

  3. Modern Web Dev Workshop
    Starter Files- modernwebworkshop.com/workshop-files.zip
    Example site- jackbouba.github.io
    Cheat Sheet- modernwebworkshop.com/reference.html
    Install Guide- modernwebworkshop.com/install-guide.pdf
    For Section One
    Please download starter files
    For Section Three
    Please install git
    ( git-scm.com )
    For Section Two
    Please install Scout app
    ( mhs.github.io/scout-app )
    For Section Four
    Please install jekyll
    ( gem install jekyll )

    View Slide

  4. Wh Are These Guy ?

    View Slide

  5. Who are we?
    Jack

    View Slide

  6. Who are we?
    Brian

    View Slide

  7. Why these technologies?

    View Slide

  8. Why these technologies?
    FAST
    • Reusable
    • Modular

    View Slide

  9. Why these technologies?
    FAST
    • Reusable
    • Modular
    SMART
    • Programmatic

    View Slide

  10. Why these technologies?
    FAST
    • Reusable
    • Modular
    SMART
    • Programmatic
    EFFICIENT
    • Local
    • Version Controlled
    • Streamlined Deployment

    View Slide

  11. The PA Bicycles Site

    View Slide

  12. Wh are you?
    What do you do & why are you here?

    View Slide

  13. Section One
    bootstrap

    View Slide

  14. Getting Bootstrap

    View Slide

  15. Getting Bootstrap
    http://twitter.github.io/bootstrap/

    View Slide

  16. Customizable

    View Slide

  17. What Is Bootstrap?

    View Slide

  18. What Is Bootstrap?
    Bootstrap is an open-source library of design
    components built with HTML, CSS and Javascript.

    View Slide

  19. Why Bootstrap?

    View Slide

  20. Why Bootstrap?
    Easy to prototype sites

    View Slide

  21. Why Bootstrap?
    Easy to prototype sites
    Jumpstart your projects with modular elements

    View Slide

  22. Why Bootstrap?
    Easy to prototype sites
    Jumpstart your projects with modular elements
    Allow developers to make a pretty interface

    View Slide

  23. Bootstrap
    OK, so what does
    Bootstrap offer us?

    View Slide

  24. Bootstrap Grid System

    View Slide

  25. Bootstrap Grid System
    12 Column Responsive Grid

    View Slide

  26. Bootstrap Grid System
    12 Column Responsive Grid

    View Slide

  27. Responsive Design
    Responsive design is a mix of CSS media queries
    and flexible images that will reorganize the
    content on a page according to the size of the
    browser window.

    View Slide

  28. Responsive Design
    Responsive design is a mix of CSS media queries
    and flexible images that will reorganize the
    content on a page according to the size of the
    browser window.
    Ethan Marcotte
    http://unstoppablerobotninja.com/

    View Slide

  29. Responsive Design

    View Slide

  30. Responsive Design

    View Slide

  31. Responsive Design

    View Slide

  32. Responsive Design

    View Slide

  33. Responsive Design

    View Slide

  34. Components
    Nav Elements

    View Slide

  35. Components
    Form Elements

    View Slide

  36. Components
    Buttons

    View Slide

  37. Components
    .btn
    .btn-large
    .btn-small
    .btn-mini
    Buttons

    View Slide

  38. Javascript Components
    Dropdowns
    Popovers

    View Slide

  39. Javascript Components
    Example Alerts
    Carousel

    View Slide

  40. Let’ Get Started!

    View Slide

  41. Modern Web Dev Workshop
    Starter Files- modernwebworkshop.com/workshop-files.zip
    Example site- jackbouba.github.io
    Cheat Sheet- modernwebworkshop.com/reference.html
    Install Guide- modernwebworkshop.com/install-guide.pdf
    For Section One
    Please download starter files
    For Section Three
    Please install git
    ( git-scm.com )
    For Section Two
    Please install Scout app
    ( mhs.github.io/scout-app )
    For Section Four
    Please install jekyll
    ( gem install jekyll )

    View Slide

  42. Section 2
    Sass (SCSS)

    View Slide

  43. What is Sass?

    View Slide

  44. What is Sass?
    Sass, which officially stands for Syntactically Awesome Stylesheets,
    is a CSS preprocessing language.

    View Slide

  45. What is Sass?
    Sass, which officially stands for Syntactically Awesome Stylesheets,
    is a CSS preprocessing language.
    CSS has limitations; Sass was created to give it some extra
    functionality.

    View Slide

  46. What is Sass?
    Sass, which officially stands for Syntactically Awesome Stylesheets,
    is a CSS preprocessing language.
    CSS has limitations; Sass was created to give it some extra
    functionality.
    There are 2 syntaxes (and 2 file extensions):

    View Slide

  47. What is Sass?
    Sass, which officially stands for Syntactically Awesome Stylesheets,
    is a CSS preprocessing language.
    CSS has limitations; Sass was created to give it some extra
    functionality.
    There are 2 syntaxes (and 2 file extensions):
    • The original Sass indented, terse syntax (.sass)

    View Slide

  48. What is Sass?
    Sass, which officially stands for Syntactically Awesome Stylesheets,
    is a CSS preprocessing language.
    CSS has limitations; Sass was created to give it some extra
    functionality.
    There are 2 syntaxes (and 2 file extensions):
    • The original Sass indented, terse syntax (.sass)
    • The default SCSS syntax (.scss)

    View Slide

  49. What is Sass?
    Sass, which officially stands for Syntactically Awesome Stylesheets,
    is a CSS preprocessing language.
    CSS has limitations; Sass was created to give it some extra
    functionality.
    There are 2 syntaxes (and 2 file extensions):
    • The original Sass indented, terse syntax (.sass)
    • The default SCSS syntax (.scss)
    CSS is valid SCSS.

    View Slide

  50. Why Sass?

    View Slide

  51. Why Sass?
    Hampton Catlin, the creator of Haml, built and released Sass in 2007.

    View Slide

  52. Why Sass?
    Hampton Catlin, the creator of Haml, built and released Sass in 2007.
    “Sass both provides a simpler, more elegant syntax
    for CSS and implements various features that are
    useful for creating manageable stylesheets.”

    View Slide

  53. Why Sass?
    Hampton Catlin, the creator of Haml, built and released Sass in 2007.
    “Sass both provides a simpler, more elegant syntax
    for CSS and implements various features that are
    useful for creating manageable stylesheets.”
    • Sass makes scaling easier.

    View Slide

  54. Why Sass?
    Hampton Catlin, the creator of Haml, built and released Sass in 2007.
    “Sass both provides a simpler, more elegant syntax
    for CSS and implements various features that are
    useful for creating manageable stylesheets.”
    • Sass makes scaling easier.
    • Sass can help keep code DRY (Don't Repeat Yourself).

    View Slide

  55. Why Sass?
    Hampton Catlin, the creator of Haml, built and released Sass in 2007.
    “Sass both provides a simpler, more elegant syntax
    for CSS and implements various features that are
    useful for creating manageable stylesheets.”
    • Sass makes scaling easier.
    • Sass can help keep code DRY (Don't Repeat Yourself).
    • Sass is just plain smarter than CSS.

    View Slide

  56. Sass
    OK, so how do we
    start using Sass?

    View Slide

  57. Nesting
    .container {
    background-color: #333;
    color: #000;
    .headline {
    font-weight: bold;
    text-transform: uppercase;
    span {
    display: inline-block;
    padding: 5px;
    }
    }
    }
    SCSS
    .container {
    background-color: #333;
    color: #000;
    }
    .container .headline {
    font-weight: bold;
    text-transform: uppercase;
    }
    .container .headline span {
    display: inline-block;
    padding: 5px;
    }
    CSS

    View Slide

  58. DANGER ZONE!
    .container {
    background-color: #FFF;
    .headline-wrap {
    width: 50%;
    .headline {
    color: #333;
    span {
    text-transform: uppercase;
    }
    }
    }
    }
    SCSS
    .container {
    background-color: #FFF;
    }
    .container .headline-wrap {
    width: 50%;
    }
    .container .headline-wrap .headline
    {
    color: #333;
    }
    .container .headline-wrap .headline
    span {
    text-transform: uppercase;
    }
    CSS

    View Slide

  59. Parent Selector (&)
    a {
    color: #333;
    &:hover {
    color: #550000;
    }
    &:active {
    color: #330000;
    }
    }
    SCSS
    a {
    color: #333;
    }
    a:hover {
    color: #550000;
    }
    a:active {
    color: #330000;
    }
    CSS
    a {
    color: #333;
    :hover {
    color: #550000;
    }
    :active {
    color: #330000;
    }
    }
    a {
    color: #333;
    }
    a :hover {
    color: #550000;
    }
    a :active {
    color: #330000;
    }

    View Slide

  60. Parent Selector (&)
    body {
    background-color: #DDD;
    &.light {
    background-color: #FFF;
    }
    }
    .container {
    width: 50%;
    &.narrow {
    width: 20%;
    }
    }
    SCSS
    body {
    background-color: #DDD;
    }
    body.light {
    background-color: #FFF;
    }
    .container {
    width: 50%;
    }
    .container.narrow {
    width: 20%;
    }
    CSS

    View Slide

  61. Variables ( $ )
    $main-color: #DDD;
    $border-type: solid;
    .headline {
    color: $main-color;
    border: 1px $border-type #000;
    }
    footer {
    background-color: $main-color;
    border: 2px $border-type #333;
    }
    SCSS
    .headline {
    color: #DDD;
    border: 1px solid #000;
    }
    footer {
    background-color: #DDD;
    border: 2px solid #333;
    }
    CSS

    View Slide

  62. Variables ( $ )
    $main-color: #ffa;
    $border-type: dashed;
    .headline {
    color: $main-color;
    border: 1px $border-type #000;
    }
    footer {
    background-color: $main-color;
    border: 2px $border-type #333;
    }
    SCSS
    .headline {
    color: #ffa;
    border: 1px dashed #000;
    }
    footer {
    background-color: #ffa;
    border: 2px dashed #333;
    }
    CSS

    View Slide

  63. Mixins ( @mixin / @include )
    @mixin button-base {
    color: #333;
    display: inline-block;
    padding: 5px;
    }
    .btn {
    @include button-base;
    }
    .callout a {
    @include button-base;
    }
    SCSS
    .btn {
    color: #333;
    display: inline-block;
    padding: 5px;
    }
    .callout a {
    color: #333;
    display: inline-block;
    padding: 5px;
    }
    CSS

    View Slide

  64. Mixins ( @mixin / @include )
    @mixin button-base($pad) {
    color: #333;
    display: inline-block;
    padding: $pad;
    }
    .btn {
    @include button-base(10px);
    }
    .callout a {
    @include button-base(5px);
    }
    SCSS
    .btn {
    color: #333;
    display: inline-block;
    padding: 10px;
    }
    .callout a {
    color: #333;
    display: inline-block;
    padding: 5px;
    }
    CSS

    View Slide

  65. Mixins ( @mixin / @include )
    @mixin button-base($pad:5px) {
    color: #333;
    display: inline-block;
    padding: $pad;
    }
    .btn {
    @include button-base(10px);
    }
    .callout a {
    @include button-base;
    }
    SCSS
    .btn {
    color: #333;
    display: inline-block;
    padding: 10px;
    }
    .callout a {
    color: #333;
    display: inline-block;
    padding: 5px;
    }
    CSS

    View Slide

  66. Mixins ( @mixin / @include )
    @mixin button-base($pad, $txt) {
    color: $txt;
    display: inline-block;
    padding: $pad;
    }
    .btn {
    @include button-base(10px, #333);
    }
    .callout a {
    @include button-base(5px, #555);
    }
    SCSS
    .btn {
    color: #333;
    display: inline-block;
    padding: 10px;
    }
    .callout a {
    color: #555;
    display: inline-block;
    padding: 5px;
    }
    CSS

    View Slide

  67. DANGER ZONE!
    $prop: border;
    .callout {
    background-color: #C0FFEE;
    $prop-top: 1px solid #000;
    }
    SCSS
    ???
    CSS

    View Slide

  68. Interpolation ( #{ $var } )
    $prop: border;
    .callout {
    background-color: #C0FFEE;
    #{$prop}-top: 1px solid #000;
    }
    SCSS
    .callout {
    background-color: #C0FFEE;
    border-top: 1px solid #000;
    }
    CSS

    View Slide

  69. Extend ( @extend ) and Placeholders ( % )
    .warning {
    font-weight: bold;
    font-size: 1.5em;
    font-style: italic;
    }
    .error {
    @extend .warning;
    color: #FF0000;
    }
    SCSS
    .warning, .error {
    font-weight: bold;
    font-size: 1.5em;
    font-style: italic;
    }
    .error {
    color: #FF0000;
    }
    CSS
    %warning {
    font-weight: bold;
    font-size: 1.5em;
    font-style: italic;
    }
    .error {
    @extend %warning;
    color: #FF0000;
    }
    .error {
    font-weight: bold;
    font-size: 1.5em;
    font-style: italic;
    color: #FF0000;
    }

    View Slide

  70. Import ( @import )
    .btn {
    background-color: #C0FFEE;
    display: inline-block;
    }
    buttons.scss
    .btn {
    background-color: #C0FFEE;
    display: inline-block;
    }
    .container {
    float: left;
    }
    styles.css
    @import "buttons";
    .container {
    float: left;
    }
    styles.scss

    View Slide

  71. So Much More!

    View Slide

  72. So Much More!
    lighten(red, 35%)
    darken(red, 50%)
    rgba(red, .3)
    grayscale(red)
    invert(red)
    Color Functions

    View Slide

  73. So Much More!
    round(143.3px)
    ceil(143.3px)
    percentage(50px/200px)
    200px + 30px
    350px - 80px
    Math
    lighten(red, 35%)
    darken(red, 50%)
    rgba(red, .3)
    grayscale(red)
    invert(red)
    Color Functions

    View Slide

  74. So Much More!
    round(143.3px)
    ceil(143.3px)
    percentage(50px/200px)
    200px + 30px
    350px - 80px
    Math
    @if
    @for
    @each
    @while
    Control Directives
    lighten(red, 35%)
    darken(red, 50%)
    rgba(red, .3)
    grayscale(red)
    invert(red)
    Color Functions

    View Slide

  75. So Much More!
    round(143.3px)
    ceil(143.3px)
    percentage(50px/200px)
    200px + 30px
    350px - 80px
    Math
    @if
    @for
    @each
    @while
    Control Directives
    .logo {
    width: 50%;
    @media (max-width: 700px) {
    width: 20%;
    }
    }
    Nested Media Queries
    lighten(red, 35%)
    darken(red, 50%)
    rgba(red, .3)
    grayscale(red)
    invert(red)
    Color Functions

    View Slide

  76. How Do We Compile Sass?

    View Slide

  77. How Do We Compile Sass?
    The sass RubyGem

    View Slide

  78. How Do We Compile Sass?
    The sass RubyGem $ gem install sass
    $ sass --watch styles.scss:styles.css

    View Slide

  79. How Do We Compile Sass?
    The sass RubyGem $ gem install sass
    $ sass --watch styles.scss:styles.css
    GUI Compilers

    View Slide

  80. How Do We Compile Sass?
    The sass RubyGem $ gem install sass
    $ sass --watch styles.scss:styles.css
    GUI Compilers

    View Slide

  81. How Do We Compile Sass?
    The sass RubyGem $ gem install sass
    $ sass --watch styles.scss:styles.css
    GUI Compilers

    View Slide

  82. How Do We Compile Sass?
    The sass RubyGem $ gem install sass
    $ sass --watch styles.scss:styles.css
    GUI Compilers

    View Slide

  83. How Do We Compile Sass?
    The sass RubyGem $ gem install sass
    $ sass --watch styles.scss:styles.css
    GUI Compilers
    http://mhs.github.io/scout-app/

    View Slide

  84. Enough already,
    Let’s code!

    View Slide

  85. Modern Web Dev Workshop
    Starter Files- modernwebworkshop.com/workshop-files.zip
    Example site- jackbouba.github.io
    Cheat Sheet- modernwebworkshop.com/reference.html
    Install Guide- modernwebworkshop.com/install-guide.pdf
    For Section One
    Please download starter files
    For Section Three
    Please install git
    ( git-scm.com )
    For Section Two
    Please install Scout app
    ( mhs.github.io/scout-app )
    For Section Four
    Please install jekyll
    ( gem install jekyll )

    View Slide

  86. Section 3
    Git/Github

    View Slide

  87. Download and Insta
    git-scm.com

    View Slide

  88. What Is Git?
    Git is a distributed revision control and
    source code management (SCM) system
    with an emphasis on speed.

    View Slide

  89. What Is Git?
    Git is a distributed revision control and
    source code management (SCM) system
    with an emphasis on speed.

    View Slide

  90. Why Use Git?

    View Slide

  91. Why Use Git?
    Fast

    View Slide

  92. Why Use Git?
    Fast
    Free and Open Source

    View Slide

  93. Why Use Git?
    Fast
    Free and Open Source
    Version Control

    View Slide

  94. Why Use Git?
    Fast
    Free and Open Source
    Version Control
    Branching

    View Slide

  95. Version Control

    View Slide

  96. Version Control
    Repository

    View Slide

  97. Version Control
    Main Timeline
    Repository

    View Slide

  98. Version Control
    Main Timeline
    Code Snapshots
    Repository

    View Slide

  99. Main Timeline
    Branch
    Code Snapshots
    Repository
    Branching

    View Slide

  100. Main Timeline
    Branch
    Merge
    Merge
    Code Snapshots
    Repository
    Branching

    View Slide

  101. Collaborate With Others
    Developer

    View Slide

  102. Collaborate With Others
    Remote Repository
    Developer

    View Slide

  103. Collaborate With Others
    Remote Repository
    Developer
    Developer Developer

    View Slide

  104. Collaborate With Others
    Remote Repository
    Developer
    Developer Developer

    View Slide

  105. Github

    View Slide

  106. Github

    View Slide

  107. What Is Github?

    View Slide

  108. What Is Github?
    Github is a the world’s largest
    open source community.

    View Slide

  109. Who is Hosted on Github

    View Slide

  110. Who is Hosted on Github
    Bootstrap
    Node
    jQuery
    html5-boilerplate
    Ruby on Rails
    (49,518)
    (21,898)
    (20,642)
    (20,058)
    (18,340)

    View Slide

  111. Deploying Code With Github

    View Slide

  112. Deploying Code With Github
    Github Deployment Hooks

    View Slide

  113. Deploying Code With Github
    Github Deployment Hooks
    Heroku

    View Slide

  114. Github Pages

    View Slide

  115. Github Pages

    View Slide

  116. Github Pages
    username.github.io

    View Slide

  117. Let’ Get Started!

    View Slide

  118. Modern Web Dev Workshop
    Starter Files- modernwebworkshop.com/workshop-files.zip
    Example site- jackbouba.github.io
    Cheat Sheet- modernwebworkshop.com/reference.html
    Install Guide- modernwebworkshop.com/install-guide.pdf
    For Section One
    Please download starter files
    For Section Three
    Please install git
    ( git-scm.com )
    For Section Two
    Please install Scout app
    ( mhs.github.io/scout-app )
    For Section Four
    Please install jekyll
    ( gem install jekyll )

    View Slide

  119. Section 4
    Jekyll

    View Slide

  120. What is Jekyll?

    View Slide

  121. What is Jekyll?
    Jekyll is “simple, blog aware, static site generator.”

    View Slide

  122. What is Jekyll?
    Jekyll is “simple, blog aware, static site generator.”
    Jekyll
    _includes
    _layouts
    _posts
    assets
    index.html

    View Slide

  123. What is Jekyll?
    Jekyll is “simple, blog aware, static site generator.”
    Jekyll
    _includes
    _layouts
    _posts
    assets
    index.html
    _sites
    blog
    assets
    index.html

    View Slide

  124. What is Jekyll?
    “You can think of Jekyll as a normalish
    dynamic blog but rather than parsing
    content, templates, and tags on each request,
    Jekyll does this once beforehand and
    caches the entire website in a folder for
    serving statically.”

    View Slide

  125. What is Jekyll?

    View Slide

  126. What is Jekyll?
    In November 2008, Tom Preston-Werner, cofounder and CEO of
    GitHub, introduced Jekyll with a blog post and released the code.

    View Slide

  127. What is Jekyll?
    In November 2008, Tom Preston-Werner, cofounder and CEO of
    GitHub, introduced Jekyll with a blog post and released the code.
    “I was tired of complicated blogging engines...I wanted to write
    great posts, not...lag behind the latest software release.”

    View Slide

  128. What is Jekyll?
    In November 2008, Tom Preston-Werner, cofounder and CEO of
    GitHub, introduced Jekyll with a blog post and released the code.
    “I was tired of complicated blogging engines...I wanted to write
    great posts, not...lag behind the latest software release.”
    “First, all my writing would be stored in a Git repository.
    Complexity would be kept to an absolute minimum...”

    View Slide

  129. What is Jekyll?
    In November 2008, Tom Preston-Werner, cofounder and CEO of
    GitHub, introduced Jekyll with a blog post and released the code.
    “I was tired of complicated blogging engines...I wanted to write
    great posts, not...lag behind the latest software release.”
    “First, all my writing would be stored in a Git repository.
    Complexity would be kept to an absolute minimum...”
    “Jekyll is a simple, blog aware, static site generator. It takes a
    template directory (representing the raw form of a website),
    runs it through Textile [or Markdown] and Liquid converters, and
    spits out a complete, static website.”

    View Slide

  130. Why Jekyll?

    View Slide

  131. Why Jekyll?
    Jekyll is static.

    View Slide

  132. Why Jekyll?
    Jekyll is static.
    • Minimal server and no database calls necessary

    View Slide

  133. Why Jekyll?
    Jekyll is static.
    • Minimal server and no database calls necessary
    • Doesn't require a caching layer

    View Slide

  134. Why Jekyll?
    Jekyll is static.
    • Minimal server and no database calls necessary
    • Doesn't require a caching layer
    • Fast

    View Slide

  135. Why Jekyll?
    Jekyll is static.
    • Minimal server and no database calls necessary
    • Doesn't require a caching layer
    • Fast
    • Secure

    View Slide

  136. Why Jekyll?
    Jekyll is static.
    • Minimal server and no database calls necessary
    • Doesn't require a caching layer
    • Fast
    • Secure
    • Easier local testing

    View Slide

  137. Why Jekyll?
    Jekyll is static.
    • Minimal server and no database calls necessary
    • Doesn't require a caching layer
    • Fast
    • Secure
    • Easier local testing
    Organize your code (into templates and partials) for scaling and
    reusability.

    View Slide

  138. Why Jekyll?
    Jekyll is static.
    • Minimal server and no database calls necessary
    • Doesn't require a caching layer
    • Fast
    • Secure
    • Easier local testing
    Organize your code (into templates and partials) for scaling and
    reusability.
    Jekyll is built into GitHub Pages - host your Jekyll site for free.

    View Slide

  139. Why Jekyll?
    Jekyll is static.
    • Minimal server and no database calls necessary
    • Doesn't require a caching layer
    • Fast
    • Secure
    • Easier local testing
    Organize your code (into templates and partials) for scaling and
    reusability.
    Jekyll is built into GitHub Pages - host your Jekyll site for free.
    Write in Textile or Markdown.

    View Slide

  140. Textile and Markdown
    # Level One Headline
    ## Level Two Headline
    ### Level Three Headline
    This a parapraph full of **bold**
    and *italic* text, and a [link]
    (http://url.com) as well.
    * List item 1
    * List item 2
    Markdown
    Level One Headline
    Level Two Headline
    Level Three Headline
    This is a paragraph full of
    bold and
    italic text, and a href=”http://url.com”>link as
    well.

    First list item
    Second list item

    Compiled HTML
    h1. Level One Headline
    h2. Level Two Headline
    h3. Level Three Headline
    This is a paragraph full of *bold*
    and _italic_ text, and a
    “link”:http://url.com as well.
    * List item 1
    * List item 2
    Textile

    View Slide

  141. Jekyll
    OK, so how do we
    start using Jekyll?

    View Slide

  142. Jekyll Structure






    ...
    {{ content }}
    ...


    Jekyll Compiled ( _site )
    _layouts/default.html
    ---
    layout: default
    ---

    Not too shabby, huh?

    index.html







    Not too shabby, huh?



    index.html

    View Slide

  143. Jekyll Structure






    ...
    {{ content }}
    ...


    _layouts/default.html

    View Slide

  144. What is Jekyll?
    Jekyll is “a simple, blog aware, static site generator."
    Jekyll
    _includes
    _layouts
    _posts
    assets
    index.html
    _sites
    blog
    assets
    index.html

    View Slide

  145. What is Jekyll?
    Jekyll is “a simple, blog aware, static site generator."
    Jekyll
    _includes
    _layouts
    _posts
    assets
    index.html
    _sites
    blog
    assets
    index.html

    View Slide

  146. Jekyll Structure






    ...
    {{ content }}
    ...


    _layouts/default.html

    View Slide

  147. Liquid

    View Slide

  148. Liquid
    Liquid is a templating language, aka a templating
    engine, that was developed by Shopify for use on
    their own site.

    View Slide

  149. Liquid
    Liquid is a templating language, aka a templating
    engine, that was developed by Shopify for use on
    their own site.
    Templating languages include Haml, ERB, Handlebars, Jade, etc.

    View Slide

  150. Liquid
    Liquid is a templating language, aka a templating
    engine, that was developed by Shopify for use on
    their own site.
    Templating languages include Haml, ERB, Handlebars, Jade, etc.
    There are 2 types of Liquid markup:

    View Slide

  151. Liquid
    Liquid is a templating language, aka a templating
    engine, that was developed by Shopify for use on
    their own site.
    Templating languages include Haml, ERB, Handlebars, Jade, etc.
    There are 2 types of Liquid markup:
    • Output Markup

    View Slide

  152. Liquid
    Liquid is a templating language, aka a templating
    engine, that was developed by Shopify for use on
    their own site.
    Templating languages include Haml, ERB, Handlebars, Jade, etc.
    There are 2 types of Liquid markup:
    • Output Markup
    • Tag Markup

    View Slide

  153. Liquid ( output markup )

    {{ content }}

    Liquid


    Contact Us!
    ...


    Compiled HTML

    View Slide

  154. Liquid ( tag markup )
    Hi there
    {% comment %}
    you sack of potatoes
    {% endcomment %}

    Liquid
    Hi there
    Compiled HTML

    {% if user.name == 'Jack' %}
    Hello Jack!
    {% else %}
    Hello Friend!
    {% endif %}

    Hello Jack

    View Slide

  155. Liquid

    {% if user %}
    Hello {{ user.name }}
    {% endif %}
    {% for item in array %}
    {{ item }}
    {% endfor %}

    {{ 'Brian Middleton!' | prepend:'Hi there' }}

    {{ 'Supercalifragilisticexpialidocious' | truncate:'5' }}

    {{ 'Hey there dude!' | replace:'dude','buddy' }}


    {{ 'This is my first paragraph.' | number_of_words }}

    View Slide

  156. Jekyll Structure






    ...
    {{ content }}
    ...


    _layouts/default.html

    View Slide

  157. Jekyll Structure
    ---
    layout: default
    ---

    Not too shabby, huh?

    index.html

    View Slide

  158. Jekyll Structure






    ...
    {{ content }}
    ...


    Jekyll Compiled ( _site )
    _layouts/default.html
    ---
    layout: default
    ---

    Not too shabby, huh?

    index.html







    Not too shabby, huh?



    index.html

    View Slide

  159. How Do We Compile Jekyll?

    View Slide

  160. How Do We Compile Jekyll?
    The jekyll RubyGem

    View Slide

  161. How Do We Compile Jekyll?
    The jekyll RubyGem
    And, um, what’s a gem?

    View Slide

  162. How Do We Compile Jekyll?
    The jekyll RubyGem
    And, um, what’s a gem?
    • Gems are Ruby programs and libraries distributed through
    RubyGems

    View Slide

  163. How Do We Compile Jekyll?
    The jekyll RubyGem
    And, um, what’s a gem?
    • Gems are Ruby programs and libraries distributed through
    RubyGems
    $ gem install jekyll
    $ jekyll build

    View Slide

  164. How Do We Compile Jekyll?
    The jekyll RubyGem
    And, um, what’s a gem?
    • Gems are Ruby programs and libraries distributed through
    RubyGems
    $ gem install jekyll
    $ jekyll build
    “Every GitHub Page is run through Jekyll when you push content to
    your repo.”
    GitHub Pages will compile our Jekyll site for us. MAGIC!

    View Slide

  165. Jekyll Commands
    $ jekyll build
    $ jekyll serve
    $ jekyll serve --watch
    The jekyll build command compiles our site.
    jekyll serve fires up a server that will host your _site directory.
    The --watch flag tells Jekyll to rebuild the site whenever files are
    modified.

    View Slide

  166. Enough already,
    Let’s code!

    View Slide

  167. You did it!
    Thanks so much for joining us!
    [email protected]
    @jackbouba
    [email protected]
    @aapljack

    View Slide