static.html

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="content-type" content="text/html;charset=utf-8"> 
   <title>Static is the New Dynamic - Jekyll, Octopress, GitHub Pages n Friends</title>

<meta name="generator" content="Slide Show (S9) v2.5.0 on Ruby 2.1.5 (2014-11-13) [i386-mingw32]">
<meta name="author"    content="Your Name Here" >

<!-- helper/macro that lets you add (CSS3) gradient using headers
     see http://slideshow.rubyforge.org/themes.html
     
     -->

<!-- S6 style sheet links -->
<link rel="stylesheet" href="static.css" media="projection" id="styleProjection">
<link rel="stylesheet" href="s6/screen.css"         media="screen"     id="styleScreen">
<link rel="stylesheet" href="s6/print.css"          media="print">

<!-- S6 JS -->
<script src="s6/jquery.js"></script>
<script src="s6/jquery.slideshow.js"></script>
<script>
  $(document).ready( function() {
    Slideshow.init();
  } );

  
</script>

<!-- Better Browser Banner for Microsoft Internet Explorer (IE) -->
<!--[if IE]>
<script src="s6/jquery.microsoft.js"></script>
<![endif]-->



</head>
<body>

<div class="layout"> 
  <div id="header"></div>
  <div id="footer">
    <h1>Your Footer Here</h1>
    <h2>Your Subfooter Here</h2>
  </div>
</div>

<div class="presentation">
   
<div class='slide '>
<!-- === begin markdown block ===

      generated by markdown/1.2.0 on Ruby 2.1.5 (2014-11-13) [i386-mingw32]
                on 2015-02-12 17:46:22 +0100 with Markdown engine kramdown (1.5.0)
                  using options {}
  -->


<!-- _S9SLIDE_ -->
<h1 id="agenda">Agenda</h1>

<ul>
  <li>Dynamic Site Generators</li>
  <li>Static Site Generators</li>
  <li>Why Static?</li>
  <li>Static Site Generator - Folder Structure Example</li>
  <li>Static Site Generators - The Biggies</li>
  <li>Build Your Own Static Site Generator in Ruby in 5 Minutes</li>
  <li>Static is the New Dynamic - Jekyll is the New Ruby Killer App</li>
  <li>Jekyll Getting Started</li>
  <li>Jekyll - Beyond the Basics - Collections, Data</li>
  <li>Dynamic Examples  -  Videos, Comments, n More</li>
  <li>Jekyll Goodies -  HTML Proofer, Prose.io, GitHub.j, Jekyll Planet Gem, WordPress Jekyll Export Plugin</li>
  <li>GitHub Pages</li>
  <li>Octopress 3.0 Upcoming</li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="dynamic-site-generators">Dynamic Site Generators</h1>

<p><strong>The Biggies</strong> (PHP Rules!)</p>

<ul>
  <li>WordPress</li>
  <li>Drupal</li>
  <li>Joomla</li>
</ul>

<p>On your live production site requires</p>

<ul>
  <li>database (e.g. mysql)</li>
  <li>application server (e.g. mod_php)</li>
  <li>web server (e.g. apache)</li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="static-site-generators">Static Site Generators</h1>

<p>On your live prodcution site requires</p>

<ul>
  <li>
    <p>web server (e.g. apache) only</p>
  </li>
  <li>NO database needed</li>
  <li>NO application server needed</li>
</ul>

<p>Note: You can host your site on Amazon S3 (Simple Storage Service).</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="static-is-the-new-dynamic---why-static">Static is the New Dynamic - Why Static?</h1>

<ul>
  <li>
    <p>Fast, Faster, Fastest</p>
  </li>
  <li>
    <p>Simple, Simpler, Simplest</p>
  </li>
  <li>
    <p>Pretty, Prettier, Prettiest</p>
    <ul>
      <li>e.g. designer nirvana - do-it-yourself - full control over your design; use Bootstrap, Material, or what not.</li>
    </ul>
  </li>
</ul>

<p>Bonus: Secure - invite all the hackers - basically unbreakable!</p>

<p>There are only static files on your server.
If an attacker hacks your server, there&#8217;s &#8220;just&#8221; some &#8220;temporary&#8221; data loss.
To recover
- Regenerate your site on your local machine.
- Upload it again to the server or shutdown the old &#8220;hacked&#8221; server and use a new server
  and you&#8217;re back in action.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="static-site-generator---folder-structure-example">Static Site Generator - Folder Structure Example</h1>

<pre><code>├── _config.yml                               # site configuration
├── _posts                                    # sample blog posts
|   ├── 2014-05-05-sportdb-update-v192.md     #   filename format:
|   ├── 2014-10-10-new-repo-bavaria-bayern.md #    =&gt; YEAR-MONTH-DAY-TITLE.MARKUP
|   ├── 2014-10-21-sql-views.md
|   ├── 2014-11-11-new-reop-maps.md
|   └── 2014-12-15-quick-starter-datafiles.md
├── _layouts                           
|   ├── default.html                   # master layout template
|   └── post.html                      # single blog post template
├── css                               
|   ├── _settings.scss                 # style settings (e.g. variables)
|   └── style.scss                     # master style page
├── feed.xml                           # web feed template (e.g. in atom format)
├── archive.html                       # archive template
└── index.html                         # index template
</code></pre>

<p>will result in:</p>

<pre><code>└── _site                                # output build folder; site gets generated here
    ├── css
    |   └── style.css                    # styles for pages (copied 1:1 as is)
    ├── sportdb-update-v192.html         # blog post page
    ├── new-repo-bavaria-bayern.html     # another blog post page
    ├── sql-views.html                   #  ""
    ├── new-repo-maps.html               #  ""
    ├── quick-starter-datafiles.html     #  ""
    ├── feed.xml                         # web feed (e.g. in atom format)
    ├── archive.html                     # archive page
    └── index.html                       # index page
</code></pre>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="example-blog-post">Example Blog Post</h1>

<pre><code>---
layout: post
title: "New Repo - Bayern (Bavaria) - incl. European Beer Stars 2011, 2012, 2013"
---

Hello, I'v moved all beer, brewpub n brewery data for Bayern
(Baviria) to its own repo, that is, [`openbeer/by-bayern`](https://github.com/openbeer/by-bayern).

Note, the repo also includes all European Beer Star winners from Bayern
(Bavaria) for the years 2011, 2012 and 2013. Cheers. Prost.
</code></pre>

<p>or </p>

<pre><code>---
layout: post
title: "New Repo - Bayern (Bavaria) - incl. European Beer Stars 2011, 2012, 2013"
---

&lt;p&gt;Hello, I'v moved all beer, brewpub n brewery data for Bayern
(Baviria) to its own repo, that is, &lt;a href="https://github.com/openbeer/by-bayern"&gt;&lt;code&gt;openbeer/by-bayern&lt;/code&gt;&lt;/a&gt;.
&lt;/p&gt;

&lt;p&gt;Note, the repo also includes all European Beer Star winners from Bayern
(Bavaria) for the years 2011, 2012 and 2013. Cheers. Prost.&lt;/p&gt;
</code></pre>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="meet-the-obama-campaigns-250-million-fundraising-platform">Meet the Obama campaign&#8217;s $250 million fundraising platform</h1>

<p><img src="i/obama-jekyll.png" alt="" /></p>

<p>The numbers</p>

<ul>
  <li>6 month life span</li>
  <li>$250 million dollars, 4,276,463 donations</li>
  <li>81,548,259 pageviews, 17,807,917 unique visitors</li>
  <li>60% faster time to paint than previous platform</li>
  <li>240 a/b tests, 49% increase in donation conversion rate</li>
  <li>1,101 frontend deploys</li>
  <li>4,000 lines of JavaScript</li>
  <li>23% of traffic is mobile (including tablet)</li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="meet-the-obama-campaigns-250-million-fundraising-platform-cont">Meet the Obama campaign&#8217;s $250 million fundraising platform (Cont.)</h1>

<p>The web stack</p>

<ul>
  <li>Static HTML pages generated by Ruby w/ Jekyll</li>
  <li>Served by Akamai CDN, origin hosted on Amazon S3</li>
  <li>Version control with GitHub</li>
  <li>Conversion optimization with Optimizely</li>
  <li>LESS for CSS preprocessor, JavaScript compiled by CodeKit</li>
  <li>Redundant, REST payment processor</li>
</ul>

<p>(Source:
<a href="http://kylerush.net/blog/meet-the-obama-campaigns-250-million-fundraising-platform/">Kyle Rush, Nov 2012</a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="static-site-generators-directories---staticgencom">Static Site Generators Directories - <code>staticgen.com</code></h1>

<p><img src="i/site-staticgen-com.png" alt="" /></p>

<p>(Source: <a href="http://www.staticgen.com">staticgen.com</a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="static-site-generators-directories---staticsitegeneratorsnet">Static Site Generators Directories - <code>staticsitegenerators.net</code></h1>

<p><img src="i/site-staticsitegenerators-net.png" alt="" /></p>

<p>(Source: <a href="http://staticsitegenerators.net">staticsitegenerators.net</a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="static-site-generators---the-biggies">Static Site Generators - The Biggies</h1>

<p><strong>Ruby</strong></p>

<ul>
  <li>Jekyll</li>
  <li>Middleman</li>
  <li>Nanoc</li>
</ul>

<p><strong>Python</strong></p>

<ul>
  <li>Nikola</li>
  <li>Pelican</li>
  <li>Cactus</li>
  <li>Hyde</li>
</ul>

<p><strong>JavaScript</strong></p>

<ul>
  <li>Hexo</li>
  <li>Metalsmith</li>
  <li>Harp</li>
  <li>Docpad</li>
</ul>

<p><strong>And Many More</strong></p>

<ul>
  <li>Hugo (Go)</li>
  <li>Hakyll (Haskell)</li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="let-a-thousand-static-site-generators-bloom-in-ruby">Let a Thousand Static Site Generators Bloom in Ruby</h1>

<ul>
  <li>{ :awestruct }   - a static site-baking tool   @ <a href="http://awestruct.org"><code>awestruct.org</code></a> <a href="https://github.com/awestruct">(Code)</a></li>
  <li>Bonsai   - a tiny static web site generator   @<a href="http://tinytree.info"><code>tinytree.info</code></a> <a href="https://github.com/benschwarz/bonsai">(Code)</a></li>
  <li>Brochure</li>
  <li>Frank   - a static site non-framework    @ <a href="https://github.com/blahed/frank">(Code)</a></li>
  <li>Hobix   - commandline blogging &amp; static pages &amp; ruby   @ <a href="http://hobix.github.io/hobix"><code>hobix.github.io/hobix</code></a>   <a href="https://github.com/hobix/hobix">(Code)</a></li>
  <li>Middleman</li>
  <li>Nanoc</li>
  <li>Ruhoh</li>
  <li>Stasis</li>
  <li>Staticmatic</li>
  <li>Toto</li>
  <li>Webgen</li>
  <li>Webby</li>
  <li>Zenweb</li>
</ul>

<p>And many more.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="build-your-own-static-site-generator-in-ruby-in-5-minutes">Build Your Own Static Site Generator in Ruby in 5 Minutes</h1>

<p>Nostaliga - Anyone remember those &#8220;Build Your Own Blog in Ruby on Rails in 5 Minutes&#8221; live demos?</p>

<pre><code>require 'find'
require 'kramdown'

# 1) make an out directory

SITE_PATH = './_site'
Dir.mkdir( SITE_PATH ) unless File.exist?( SITE_PATH )

# 2) add a markdown converter helper method

def markdown( text )
  Kramdown::Document.new( text ).to_html
end

# 3) loop over files and generate hypertext (.html) from markdown (.md)

Find.find('.') do |path|
  if File.extname(path) == '.md'              # e.g. ./index.md =&gt; .md
    basename = File.basename(path, '.md')     # e.g. ./index.md =&gt; index

    File.open( "#{SITE_PATH}/#{basename}.html", 'w') do |file|
      file.write markdown( File.read( path ) )
    end
  end
end
</code></pre>

<p>Many more ways. Example:</p>

<ul>
  <li><a href="http://patshaughnessy.net/2015/1/8/using-rake-to-generate-a-blog">Using Rake to Generate a Blog</a> by Pat Shaughnessy; January 2015 </li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="static-is-the-new-dynamic---jekyll-is-the-new-ruby-killer-app">Static is the New Dynamic - Jekyll is the New Ruby Killer App</h1>

<p>Rails =&gt;  24 900+ Stars / 9 700+ Forks</p>

<p><img src="i/jekyll-trending.png" alt="" /></p>

<pre><code>Jekyll                =&gt; 18 500+ Stars         3 800+ Forks
Octopress (2.0+3.0)   =&gt;  8 700+ Stars (+400)  3 100+ Forks
Jekyll Bootstrap      =&gt;  2 400+ Stars         1 400+ Forks
Jekyll Now            =&gt;    900+ Stars         3 000+ Forks
</code></pre>

<p>Content is king. Growing faster. More Jekyll Themes</p>

<pre><code>Jekyll Incorporated   =&gt;   800+ Stars          200+ Forks
Poole                 =&gt; 1 000+ Stars          300+ Forks
Hyde                  =&gt;   800+ Stars          400+ Forks
Lanyon                =&gt;   700+ Stars          400+ Forks
Minimal Mistakes      =&gt;   400+ Stars          900+ Forks
</code></pre>

<p>Now - let&#8217;s add Bootstrap (or HTML5 Boilerplate) - Just kidding ;-)</p>

<pre><code>Bootstrap             =&gt;  77 600+ Stars        29 800+ Forks
HTML5 Boilerplate     =&gt;  28 600+ Stars         7 400+ Forks
</code></pre>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="jekyll-getting-started---method-1----fork-github-jekyll-theme-repo">Jekyll Getting Started - Method 1 -  Fork GitHub Jekyll Theme Repo</h1>

<ul>
  <li>Step 1: Fork a GitHub Jekyll Theme Repo e.g. <code>jekyll-minimal-theme</code></li>
  <li>Step 2: Change the repo name to <code>&lt;yourname&gt;.github.io</code></li>
  <li>Step 3: Change the Jekyll settings in <code>_config.yml</code> e.g. <code>site.url</code></li>
</ul>

<p>That&#8217;s it. Edit your first post in the <code>_posts</code> folder.</p>

<p><img src="i/jekyll-minimal-theme.png" alt="" /></p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="jekyll-getting-started---method-2---hacker-style---use-the-command-line">Jekyll Getting Started - Method 2 - &#8220;Hacker-Style&#8221; - Use the Command-Line</h1>

<pre><code>  $ jekyll new my-site
     # =&gt; New jekyll site installed in ~/my-site
  $ cd my-site
  $ jekyll build
     # =&gt; Configuration file: ~/_config.yml
     #                Source: ~/my-site
     #           Destination: ~/my-site/_site
     #          Generating... done.
  $ jekyll serve
     # =&gt;     Server address: http://127.0.0.1:4000/
     #      Server running... press ctrl-c to stop.
</code></pre>

<p>Browse your site e.g. open the page @ <code>http://127.0.0.1:4000</code></p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="jekyll---beyond-the-basics---collections">Jekyll - Beyond the Basics - Collections</h1>

<p>Basically like new post types e.g. books, albums, links, apps, etc.</p>

<p>Add a new &#8220;custom&#8221; folder (starting with underscore e.g. <code>_apps</code>)
for each new collection
and add your posts (w/o dates) as usual. Example:</p>

<pre><code>_apps/
  beer-a-day.md
  country-codes.md
  sportweb.md
</code></pre>

<p>In your templates use <code>site.apps</code>. Example:</p>

<pre><code>{% for app in site.apps %}

  &lt;div class='app'&gt;
      &lt;a href="{{ site.url }}{{ app.url }}"&gt;
        {{ app.title }}
      &lt;/a&gt;
      &lt;br&gt;
      &lt;a href="{{ site.url }}{{ app.url }}"&gt;
        &lt;img src="{{site.url}}/i/{{app.screenshot}}"&gt;
      &lt;/a&gt;
  &lt;/div&gt;

{% endfor %}
</code></pre>

<p>For collection such as <code>_books</code>, <code>_albums</code> or <code>_links</code> use
<code>site.books</code>, <code>site.albums</code>, <code>site.links</code> and so on.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="jekyll---beyond-the-basics---data">Jekyll - Beyond the Basics - Data</h1>

<p>Lets you store data in the <code>_data</code> folder in YAML, JSON, CSV. Example:</p>

<pre><code>_data/
   books.yml
</code></pre>

<p><code>books.yml</code>:</p>

<pre><code>- title:     "111 Gründe, Bier zu lieben"
  subtitle:  Das Buch gegen den Durst
  author:    Marc Halupczok
  publisher: Schwarzkopf + Schwarzkopf
  tags:      de, culture, history
  isbn:      978-3-86265-399-7
  cover:     111-gruende-bier-zu-lieben.jpg

- title:     Bier in Wien (A La Carte)
  author:    Christian Grünwald (Herausgeber)
  publisher: D + R Verlagsgesellschaft
  tags:      at, wien, vienna, city guide
  isbn:      978-3-902469-52-6
  cover:     at/bier-in-wien.jpg
</code></pre>

<p>In your templates use <code>site.data.books</code>. Example:</p>

<pre><code>{% for book in site.data.books %}

  &lt;div class='book'&gt;
    &lt;img src="{{site.url}}/i/{{book.cover}}"&gt;
    &lt;br&gt;
    {{ book.title }}
    {% if book.edition %}
       {{ book.edition}}
    {% endif %}
    by {{ book.author }}; {{ book.publisher }}
  &lt;/div&gt;

{% endfor %}
</code></pre>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="dynamic-examples-----videos">Dynamic Examples  -  Videos</h1>

<p><strong>Syntax</strong></p>

<pre><code>{% video urls [class names] [width height] [preload:auto|metadata|none] %}
</code></pre>

<p><strong>Examples</strong></p>

<pre><code>{% video {{ site.cdn }}/videos/clouds.mp4 %}
{% video featured wide /images/clouds.jpg /videos/clouds.mp4 /videos/clouds.webm /videos/clouds.ogv 1080px 608px preload:auto %}
</code></pre>

<p>Becomes</p>

<pre><code>&lt;video controls preload='metadata' onclick='(function(el){ if(el.paused) el.play(); else el.pause() })(this)'&gt;
  &lt;source src='https://cdn.com/video/clouds.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
&lt;/video&gt;

&lt;video class='featured wide' controls poster='/images/clouds.jpg' width='1080px' height='608px' preload='auto'
  onclick='(function(el){ if(el.paused) el.play(); else el.pause() })(this)'&gt;
  &lt;source src='/videos/clouds.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
  &lt;source src='/videos/clouds.webm' type='video/webm; codecs="vp8, vorbis"'&gt;
  &lt;source src='/videos/clouds.ogv' type='video/ogg; codecs="theora, vorbis"'&gt;
&lt;/video&gt;
</code></pre>

<p>(Source: <a href="https://github.com/octopress/video-tag">octopress/video-tag</a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="more-dynamic-examples">More Dynamic Examples</h1>

<p><strong>Comments, Comments, Comments</strong></p>

<p>Add comments using JavaScript-only service (Disqus, Facebook, etc.)</p>

<p><strong>Brute Force Hammer Method</strong></p>

<p>Re-generate and re-deploy your site every minute (or when pinged with web hook etc.)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="jekyll-goodies----html-proofer">Jekyll Goodies -  HTML Proofer</h1>

<p>What&#8217;s HTML Proofer?</p>

<p>HTML Proofer is a gem (e.g. <code>html-proofer</code>) that proofreads your HTML output.
Tests include if your image references are legitimate,
if they have alt tags, if your internal links are working, and many many more.</p>

<p>Usage:</p>

<pre><code>require 'html/proofer'

HTML::Proofer.new("./_site").run
</code></pre>

<p>Or configure your Travis build:</p>

<pre><code>script: jekyll build &amp;&amp; htmlproof ./_site
</code></pre>

<p>(Source: <a href="http://jekyllrb.com/docs/continuous-integration/">jekyllrb.com/docs/continuous-integration</a>)</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="more-jekyll-goodies">More Jekyll Goodies</h1>

<p><strong>Prose.io, GitHub.js</strong></p>

<p>Write and save your posts in your browser with &#8220;distraction-free&#8221;
simple online text editor like Prose.io - a content editor for GitHub, for example.</p>

<p>How does it work? &#8211; GitHub offers an HTTP JSON API; using the GitHub.js machinery lets you
build your own single-page web app in JavaScript only - no server required
other than GitHub itself ;-).</p>

<p><strong>Jekyll Planet Gem</strong></p>

<p>The Jekyll Planet gem (e.g. <code>jekyll-planet</code>) lets you
subscribe to web feeds and (auto-)save the latest posts
in your Jekyll <code>_posts</code> folder.</p>

<p>Why?! &#8211; Lets others use whatever blog (or content managment system) they like - you don&#8217;t care -
to pull in the posts and get the stories added to your site
all you need is a ye good ol&#8217; web feed.</p>

<p><strong>WordPress Jekyll Export Plugin</strong></p>

<p>One Click - gets you a zip w/ ready-to-use static Jekyll site.</p>

<p>Why?! &#8211; Best of both worlds - use all the WordPress tools
plus get a fast and simple static site for live production.</p>

<p>Find out more:</p>

<ul>
  <li><a href="https://github.com/prose">Prose.io</a></li>
  <li><a href="https://github.com/michael/github">GitHub.js</a></li>
  <li><a href="https://github.com/feedreader/jekyll-planet">Jekyll Planet Gem</a></li>
  <li><a href="https://wordpress.org/plugins/jekyll-exporter">WordPress Jekyll Exporter</a></li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="github-pages">GitHub Pages</h1>

<p>What&#8217;s GitHub Pages?</p>

<ul>
  <li>Free Hosting</li>
  <li>Free Content Tracker</li>
  <li>Free Ruby Processing w/ Jekyll</li>
</ul>

<p>=&gt; Where&#8217;s the catch? You have to use git.</p>

<p><img src="i/site-pages-github-com.png" alt="" /></p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="github-pages-milestones--history">GitHub Pages Milestones / History</h1>

<p>2015:</p>

<ul>
  <li>Jan 2015 +++ <a href="https://github.com/blog/1939-how-github-uses-github-to-document-github">How GitHub uses GitHub to document GitHub</a></li>
</ul>

<p>2014:</p>

<ul>
  <li>Jul 2014 +++ <a href="https://github.com/blog/1867-github-pages-now-runs-jekyll-2-2-0">GitHub Pages now runs Jekyll 2.2.0</a></li>
  <li>May 2014 +++ <a href="https://github.com/blog/1833-github-pages-3">GitHub Pages &lt;3</a></li>
  <li>Mar 2014 +++ <a href="https://github.com/blog/1797-repository-metadata-and-plugin-support-for-github-pages">Repository metadata and plugin support for GitHub Pages</a></li>
</ul>

<p>2013:</p>

<ul>
  <li>Sep 2013 +++ <a href="https://github.com/blog/1647-viewing-yaml-metadata-in-your-documents">Viewing YAML Metadata in your Documents</a></li>
  <li>Aug 2013 +++ <a href="https://github.com/blog/1581-cutting-the-github-pages-gem">Cutting the GitHub Pages Gem</a></li>
  <li>May 2013 +++ <a href="https://github.com/blog/1502-jekyll-turns-1-0">Jekyll Turns 1.0</a></li>
  <li>Apr 2013 +++ <a href="https://github.com/blog/1452-new-github-pages-domain-github-io">New GitHub Pages domain: github.io</a></li>
  <li>Jan 2013 +++ <a href="https://github.com/blog/1366-github-pages-updated-to-jekyll-0-12-0">GitHub Pages updated to Jekyll 0.12.0</a></li>
</ul>

<p>2012:</p>

<ul>
  <li>Jun 2012 +++ <a href="https://github.com/blog/1173-github-pages-update">GitHub Pages Update</a></li>
  <li>Apr 2012 +++ <a href="https://github.com/blog/1081-instantly-beautiful-project-pages">Instantly Beautiful Project Pages</a></li>
</ul>

<p>2009:</p>

<ul>
  <li>Apr 2009 +++ <a href="https://github.com/blog/410-pages-2-0">Pages 2.0</a></li>
  <li>Apr 2009 +++ <a href="https://github.com/blog/402-github-pages-upgraded-to-jekyll-0-5-0">GitHub Pages Upgraded to Jekyll 0.5.0</a></li>
</ul>

<p>2008:</p>

<ul>
  <li>Dec 2008 +++ <a href="https://github.com/blog/272-github-pages">GitHub Pages</a></li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="github-pages-tip---make-your-ghpages-branch-the-default-delete-master-branch">GitHub Pages Tip - Make Your <code>gh_pages</code> Branch the Default; Delete <code>master</code> Branch</h1>

<p>Step 1a) Already has <code>gh-pages</code> branch:</p>

<pre><code>git checkout gh-pages   
git merge master
git push
</code></pre>

<p>Step 1b) Create <code>gh-pages</code> branch:</p>

<pre><code>git checkout -b gh-pages
git merge master
git push origin gh-pages
</code></pre>

<p>Step 2) Make <code>gh-pages</code> branch default branch on GitHub via settings tab</p>

<p>Step 3)  Delete <code>master</code> branch on GitHub</p>

<pre><code>git push origin :master     # will delete master branch on remote (that is, github)
    
git branch -d master        # will delete master branch in local remote
</code></pre>

<p>Step 4) Delete local git repo and get a fresh clone from GitHub</p>

<pre><code>rm -rf &lt;repo&gt;
git clone &lt;repo-remote-url&gt;
</code></pre>

<p>That&#8217;s it.</p>

<p><strong>Bonus: Check if remote is setup with <code>git remote show &lt;repo-remote-shorthand&gt;</code></strong></p>

<pre><code>$ git remote show origin
# =&gt; * remote origin
       Fetch URL: https://github.com/openbeer/book.git
       Push  URL: https://github.com/openbeer/book.git
       HEAD branch: gh-pages
       Remote branch:
          gh-pages tracked
       Local branch configured for 'git pull':
          gh-pages merges with remote gh-pages
       Local ref configured for 'git push':
          gh-pages pushes to gh-pages (up to date)
</code></pre>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="octopress-30-upcoming">Octopress 3.0 Upcoming</h1>

<h3 id="classic-octopress">&#8220;Classic&#8221; Octopress</h3>

<p>Basically a pre-configured Jekyll site w/ a theme, helpers, build scripts and more.
&#8220;packaged&#8221; as ready-to-fork-and-use git repo. To get started use:</p>

<pre><code>$ git clone octopress
</code></pre>

<p>and than start changing the configuration settings and so on.</p>

<p>What&#8217;s wrong with that?!</p>

<ul>
  <li>Not-so-easy to update.</li>
  <li>Not-so-easy to extend and configure.</li>
</ul>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="octopress-30-upcoming-cont">Octopress 3.0 Upcoming (Cont.)</h1>

<h3 id="modern-octopress-released-february-2015">&#8220;Modern&#8221; Octopress (Released February 2015)</h3>

<p>Modul-mania. Now almost everything is a gem
(more than 20+ gems e.g. <code>octopress-videotag</code>, <code>octopress-unpublish</code>, <code>octopress-deploy</code>, and so on)
plus a new command line tool (that is, <code>octopress</code>). To get started, use:</p>

<pre><code>$ gem install octopress
$ octopress new
</code></pre>

<p>Why?!</p>

<ul>
  <li>Easier to update.</li>
  <li>Easier to extend and configure (use what you need; no big all-in-one git repo hairball -
instead many small gems that work with &#8220;plain vanilla&#8221; jekyll).</li>
</ul>

<p><strong>There will no longer be a division between Octopress and Jekyll.</strong></p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="octopress-30-in-action">Octopress 3.0 in Action</h1>

<pre><code>$ octopress --help

octopress 3.0.0 -- Octopress is an obsessively designed toolkit for Jekyll blogging.

Usage:

  octopress &lt;subcommand&gt; [options]

Options:
  -h, --help         Show this message
  -v, --version      Print the name and version
  -t, --trace        Show the full backtrace when an error occurs

Subcommands:
  new         Creates a new site with Jekyll and Octopress scaffolding at the specified path.
  docs        Launch local server with docs for Octopress v3.0.0.rc.31 and Octopress plugins.
  init        Add Octopress's default scaffolding to your site.
  publish     Convert a draft to a normal published post.
  unpublish   Convert a post to a draft. Command accepts path to post or search string.
  isolate     Move all posts not matching selected post to _posts/_exile. Command accepts path to post or search string.
  integrate   Reintegrate posts from _posts/_exile.
  deploy      Deploy your Octopress site.
</code></pre>

<h2 id="command-new-post">Command <code>new post</code></h2>

<pre><code>$ octopress new post --help

octopress new post -- Add a new post to your Jekyll site.

Usage:

  octopress new post &lt;TITLE&gt; [options]

Options:
  -d,  --date DATE    Use 'now' or a String that is parseable by Time#parse.
  -tm, --template PATH  New post from a template.
  -l,  --lang LANGUAGE  Set a post language (e.g. en, it) for multi-language sites.
  -f,  --force        Overwrite file if it already exists
  -s,  --slug SLUG    Use this slug in filename instead of sluggified post title.
  -d,  --dir DIR      Create post at _posts/DIR/.
  -c,  --config &lt;CONFIG_FILE&gt;[,CONFIG_FILE2,...]  Custom Jekyll configuration file
  -h,  --help         Show this message
</code></pre>

<h2 id="command-deploy">Command <code>deploy</code></h2>

<pre><code>$ octopress deploy --help

octopress deploy 1.0.4 -- Deploy your Octopress site.

Usage:

  octopress deploy [options]

Options:
      --config FILE  The path to your config file (default: _deploy.yml)
  -h, --help         Show this message

Subcommands:
  pull         Pull down the published copy of your site into DIR
  init         Create a configuration file for a deployment method (git, rsync, s3).
  add-bucket   Add a new S3 bucket and configure it for static websites. Name defaults to bucket_name in config file
</code></pre>

<p>and many more.</p>


</div>
<div class='slide '>
<!-- _S9SLIDE_ -->
<h1 id="thank-you---questions-comments">Thank You - Questions? Comments?</h1>

<p>Check the Planet Jekyll includes:</p>

<ul>
  <li>Jekyll News Reader</li>
  <li>Jekyll Theme of the Month Series</li>
  <li>Jekyll Snippets (Tips &#8216;n&#8217; Tricks)</li>
  <li>Jekyll Quick Reference (Cheat Sheet),</li>
  <li>Jekyll Minimial Theme</li>
  <li>and more.</li>
</ul>

<p><img src="i/planet-jekyll.png" alt="" /></p>

<!-- === end markdown block === -->
</div>


</div><!-- presentation -->
</body>
</html>