Static Sites with Jekyll and GitHub Pages

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.

Ee5bae7fa46b3195869c285ecbb4619e?s=128

Coby Chapple

August 15, 2014
Tweet

Transcript

  1. Jekyll & GitHub Pages STATIC SITES with @cobyism • Converge

    2014 • Glasgow, Scotland
  2. @cobyism

  3. @github

  4. None
  5. This workshop: • Building sites with Jekyll • Deploying with

    GitHub Pages
  6. HTML CSS JAVASCRIPT Things browsers understand:

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

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

  9. Content
 Management Systems (CMSs)

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

    Website
  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
  12. Using a CMS is often Not Fun™ • Backups of

    content • Framework updates • maintenance, security • Learning curve isn’t really reduced
  13. • Goal: simplicity • Fewer moving parts • Content as

    code Static Site Generators
  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
  15. HTML
 Templates Static Site
 Generator Static Site Generators HTML CSS

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

    JAVASCRIPT Your content Browser Regular Files version control (YAY!)
  17. • A static site generator • Written in Ruby •

    Very simple
  18. Ingredients: • A computer • Ruby • Optional: rbenv or

    RVM (not covered) Building a site with Jekyll
  19. Mac OS X: Installed by default (aww yea) Getting Ruby

  20. Windows: rubyinstaller.org Getting Ruby

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

  22. Step 1. Installing Jekyll gem install jekyll

  23. In which Coby tempts fate
 against the live demo gods.

    Step 2. Let’s build a site!
  24. Step 3. Deploy to GitHub Pages

  25. • Free service • Host any static site • Jekyll

    sites are compiled GitHub Pages
  26. Ingredients: • Static website • GitHub.com account • Optional: a

    beverage Deploying to GitHub Pages
  27. • One per GitHub account • Repository: <username>.github.io • Branch:

    master • URL: <username>.github.io User/Org Pages
  28. • One per repository • Repository name does not matter

    • Branch: gh-pages • URL: <username>.github.io/<repository name> Project Pages
  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
  30. SHUT UP AND SHOW ME HOW TO GET FREE HOSTING

    ALREADY Step 3. Deploy to GitHub Pages
  31. Handy tricks

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

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

  34. Handy tricks language: ruby rvm: - 2.1 script: bundle exec

    jekyll build install: bundle install .travis.yml
  35. ! --- --- <html> <head> <meta http-equiv="refresh" content="0; url={{ page.destination

    }}" /> </head> </html> _layouts/redirect.html Handy tricks
  36. import.jekyllrb.com Handy tricks Import your old blog!

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

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

  39. Thanks! Follow @cobyism on Twitter (do iiiit!) Email me coby@github.com

    Come say hi later! Slides coby.io/converge-2014