This workshop:
• Building sites with Jekyll
• Deploying with GitHub Pages
Slide 6
Slide 6 text
HTML
CSS
JAVASCRIPT
Things browsers understand:
Slide 7
Slide 7 text
HTML
CSS
JAVASCRIPT
Your
content Browser
The Job of a Website
Slide 8
Slide 8 text
HTML
CSS
JAVASCRIPT
Your
content
Browser
The Old Fashioned Way
Slide 9
Slide 9 text
Content
Management
Systems (CMSs)
Slide 10
Slide 10 text
HTML
CSS
JAVASCRIPT
Your
content Browser
The Job of a Website
Slide 11
Slide 11 text
Database
Wordpress / Drupal / Rails
Package management
Themes, plugins
Server-side
Processing
PHP / Ruby / Python etc.
Content Management Systems
HTML
CSS
JAVASCRIPT
Your
content Browser
Slide 12
Slide 12 text
Using a CMS is often Not Fun™
• Backups of content
• Framework updates
• maintenance, security
• Learning curve isn’t really reduced
Slide 13
Slide 13 text
• Goal: simplicity
• Fewer moving parts
• Content as code
Static Site Generators
Slide 14
Slide 14 text
Database
Wordpress / Drupal / Rails
Package management
Themes, plugins
Server-side
Processing
PHP / Ruby / Python etc.
Content Management Systems
HTML
CSS
JAVASCRIPT
Your
content Browser
Slide 15
Slide 15 text
HTML
Templates
Static Site
Generator
Static Site Generators
HTML
CSS
JAVASCRIPT
Your
content Browser
Regular Files
Slide 16
Slide 16 text
HTML
Templates
Static Site
Generator
Static Site Generators
HTML
CSS
JAVASCRIPT
Your
content Browser
Regular Files
version control (YAY!)
Slide 17
Slide 17 text
• A static site generator
• Written in Ruby
• Very simple
Slide 18
Slide 18 text
Ingredients:
• A computer
• Ruby
• Optional: rbenv or RVM (not covered)
Building a site with Jekyll
Slide 19
Slide 19 text
Mac OS X:
Installed by default
(aww yea)
Getting Ruby
Slide 20
Slide 20 text
Windows:
rubyinstaller.org
Getting Ruby
Slide 21
Slide 21 text
Linux:
You probably
already know how.
Getting Ruby
Slide 22
Slide 22 text
Step 1. Installing Jekyll
gem install jekyll
Slide 23
Slide 23 text
In which Coby tempts fate
against the live demo gods.
Step 2. Let’s build a site!
Slide 24
Slide 24 text
Step 3. Deploy to GitHub Pages
Slide 25
Slide 25 text
• Free service
• Host any static site
• Jekyll sites are compiled
GitHub Pages
Slide 26
Slide 26 text
Ingredients:
• Static website
• GitHub.com account
• Optional: a beverage
Deploying to GitHub Pages
Slide 27
Slide 27 text
• One per GitHub account
• Repository: .github.io
• Branch: master
• URL: .github.io
User/Org Pages
Slide 28
Slide 28 text
• One per repository
• Repository name does not matter
• Branch: gh-pages
• URL: .github.io/
Project Pages
Slide 29
Slide 29 text
• 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
Slide 30
Slide 30 text
SHUT UP AND SHOW ME HOW
TO GET FREE HOSTING ALREADY
Step 3. Deploy to GitHub Pages