Static Sites with Jekyll and GitHub Pages

These are the slides from a workshop I gave at Converge (https://converge.cx) in Glasgow on the 15th of August, 2014.

Transcript

1. Jekyll & GitHub Pages
   STATIC SITES
   with
   @cobyism • Converge 2014 • Glasgow, Scotland
   

   View Slide

2. @cobyism
   

   View Slide

3. @github
   

   View Slide

4. View Slide

5. This workshop:
   • Building sites with Jekyll
   • Deploying with GitHub Pages
   

   View Slide

6. HTML
   CSS
   JAVASCRIPT
   Things browsers understand:
   

   View Slide

7. HTML
   CSS
   JAVASCRIPT
   Your
   content Browser
   The Job of a Website
   

   View Slide

8. HTML
   CSS
   JAVASCRIPT
   Your
   content
   Browser
   The Old Fashioned Way
   

   View Slide

9. Content

   Management
   Systems (CMSs)
   

   View Slide

10. HTML
    CSS
    JAVASCRIPT
    Your
    content Browser
    The Job of a Website
    

    View Slide

11. Database
    Wordpress / Drupal / Rails
    Package management
    Themes, plugins
    Server-side
    Processing
    PHP / Ruby / Python etc.
    Content Management Systems
    HTML
    CSS
    JAVASCRIPT
    Your
    content Browser
    

    View Slide

12. Using a CMS is often Not Fun™
    • Backups of content
    • Framework updates
    • maintenance, security
    • Learning curve isn’t really reduced
    

    View Slide

13. • Goal: simplicity
    • Fewer moving parts
    • Content as code
    Static Site Generators
    

    View Slide

14. Database
    Wordpress / Drupal / Rails
    Package management
    Themes, plugins
    Server-side
    Processing
    PHP / Ruby / Python etc.
    Content Management Systems
    HTML
    CSS
    JAVASCRIPT
    Your
    content Browser
    

    View Slide

15. HTML

    Templates
    Static Site

    Generator
    Static Site Generators
    HTML
    CSS
    JAVASCRIPT
    Your
    content Browser
    Regular Files
    

    View Slide

16. HTML

    Templates
    Static Site

    Generator
    Static Site Generators
    HTML
    CSS
    JAVASCRIPT
    Your
    content Browser
    Regular Files
    version control (YAY!)
    

    View Slide

17. • A static site generator
    • Written in Ruby
    • Very simple
    

    View Slide

18. Ingredients:
    • A computer
    • Ruby
    • Optional: rbenv or RVM (not covered)
    Building a site with Jekyll
    

    View Slide

19. Mac OS X:
    Installed by default
    (aww yea)
    Getting Ruby
    

    View Slide

20. Windows:
    rubyinstaller.org
    Getting Ruby
    

    View Slide

21. Linux:
    You probably
    already know how.
    Getting Ruby
    

    View Slide

22. Step 1. Installing Jekyll
    gem install jekyll
    

    View Slide

23. In which Coby tempts fate

    against the live demo gods.
    Step 2. Let’s build a site!
    

    View Slide

24. Step 3. Deploy to GitHub Pages
    

    View Slide

25. • Free service
    • Host any static site
    • Jekyll sites are compiled
    GitHub Pages
    

    View Slide

26. Ingredients:
    • Static website
    • GitHub.com account
    • Optional: a beverage
    Deploying to GitHub Pages
    

    View Slide

27. • One per GitHub account
    • Repository: .github.io
    • Branch: master
    • URL: .github.io
    User/Org Pages
    

    View Slide

28. • One per repository
    • Repository name does not matter
    • Branch: gh-pages
    • URL: .github.io/
    Project Pages
    

    View Slide

29. • Specify domain in CNAME file

    in root directory of repository.
    • Custom domain on User Page repository

    will cascade to all Project Pages.
    BYO Domain Names
    

    View Slide

30. SHUT UP AND SHOW ME HOW
    TO GET FREE HOSTING ALREADY
    Step 3. Deploy to GitHub Pages
    

    View Slide

31. Handy tricks
    

    View Slide

32. github.com/github/pages-gem
    gem install github-pages
    Handy tricks
    

    View Slide

33. Handy tricks
    bundle install
    source “https://rubygems.org”
    gem “github-pages”
    Gemfile
    

    View Slide

34. Handy tricks
    language: ruby
    rvm:
    - 2.1
    script: bundle exec jekyll build
    install: bundle install
    .travis.yml
    

    View Slide

35. !
    ---
    ---
    
    
    content="0; url={{ page.destination }}" />
    
    
    _layouts/redirect.html
    Handy tricks
    

    View Slide

36. import.jekyllrb.com
    Handy tricks
    Import your old blog!
    

    View Slide

37. alias j='jekyll serve --watch'
    Instant HTTP server in any directory!
    Handy tricks
    

    View Slide

38. • jekyllrb.com
    • pages.github.com
    • help.github.com
    • support.github.com
    More information
    

    View Slide

39. Thanks!
    Follow @cobyism on Twitter (do iiiit!)
    Email me coby@github.com
    Come say hi later!
    Slides coby.io/converge-2014
    

    View Slide