Static Sites with Jekyll and GitHub Pages

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

@cobyism

@github

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

HTML CSS JAVASCRIPT Things browsers understand:

HTML CSS JAVASCRIPT Your content Browser The Job of a
Website

HTML CSS JAVASCRIPT Your content Browser The Old Fashioned Way

Content  Management Systems (CMSs)

HTML CSS JAVASCRIPT Your content Browser The Job of a
Website

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

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

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

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

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

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

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

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

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

Windows: rubyinstaller.org Getting Ruby

Linux: You probably already know how. Getting Ruby

Step 1. Installing Jekyll gem install jekyll

In which Coby tempts fate  against the live demo gods.
Step 2. Let’s build a site!

Step 3. Deploy to GitHub Pages

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

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

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

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

• 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

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

Handy tricks

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

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

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

! --- --- <html> <head> <meta http-equiv="refresh" content="0; url={{ page.destination
}}" /> </head> </html> _layouts/redirect.html Handy tricks

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

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

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

Thanks! Follow @cobyism on Twitter (do iiiit!) Email me [email protected]
Come say hi later! Slides coby.io/converge-2014

Static Sites with Jekyll and GitHub Pages

Static Sites with Jekyll and GitHub Pages

More Decks by Coby Chapple

Other Decks in Technology

Featured

Transcript