Introduction to blogging with Jekyll

Eric Lathrop

Senior Software Engineer at CafePress

@ericlathrop

http://ericlathrop.com

A simple, blog-aware, static site generator

Composes your content with templates to produce a website.

TemplateMarkdownLiquidStaticWeb Site

Jekyll+Ruby+Templates+Content

HTML filesYour workstation

Web server

WordPress+PHP :'(+Database+Theme & plugins+ContentWeb server

Pros

Any web server

No security vulnerabilities

Nothing to update

Fast!

Comments are hard

Cons

Installation

Non-programmers:

Install ruby (see ruby-lang.org)

gem install jekyll

Programmers:

Install RVM (see rvm.io)

rvm --rvmrc --create 1.9.3@jekyll

gem install bundler

echo -e "source 'https://rubygems.org'\ngem 'jekyll'" >Gemfile

bundle install

New Site

jekyll new my-awesome-site

cd my-awesome-site

jekyll serve

Open http://localhost:4000 in a browser

_posts/2013-05-18-welcome-to-jekyll.markdown

_layouts/default.html

_layouts/post.html

_config.yml

css/syntax.css

css/main.css

index.html

_site/css

_site/css/syntax.css

_site/css/main.css

_site/jekyll

_site/jekyll/update

_site/jekyll/update/2013

_site/jekyll/update/2013/05

_site/jekyll/update/2013/05/18

_site/jekyll/update/2013/05/18/welcome-to-jekyll.html

_site/index.html

File Structure

_posts/2013-05-18-welcome.md

---layout: posttitle: "Welcome to Jekyll!"date: 2013-05-18 20:48:00categories: jekyll update---

You'll find this post in your `_posts` directory - edit this post and re-build (or run with the `-w` switch) to see your changes!To add new posts, simply add a file in the `_posts` directory that follows the convention: YYYY-MM-DD-name-of-post.ext.

_layouts/post.html

---layout: default---{{ page.title }}{{ page.date | date_to_string }}

{{ content }}

_layouts/default.html

... ...{{ content }}...

Index.html

---

layout: default

title: Your New Jekyll Site

---

Blog Posts

{% for post in site.posts %}

{{ post.date | date_to_string }} {{ post.title }}

{% endfor %}

Index.html with excerpt

---

layout: default

title: Your New Jekyll Site

---

Blog Posts

{% for post in site.posts %}

{{ post.date | date_to_string }} {{ post.title }}{{ post.excerpt }}

{% endfor %}

RSS Feed

---layout: none---

{{ site.name }}{{ site.description }}{{ site.url }}{{ site.time | date: "%a, %d %b %Y %H:%M:%S %z" }}{% for post in site.posts limit:10 %}{{ post.title }}{{ post.content | xml_escape }}{{ post.date | date: "%a, %d %b %Y %H:%M:%S %z" }}{{ site.url }}{{ post.url }}{{ site.url }}{{ post.url }}{{ site.email }}{% endfor %}

Plugins

LESS / SASS

CoffeeScript

Minification

Emoticons

Youtube / Tweet / Gist embedding

Flickr galleries

Etc.

Workflow

jekyll serve watch

Edit files

View in browser

jekyll build

Deploy (rsync, FTP, scp, etc.)

GitHub Pages

GitHub Pages

Per user:New repo: username.github.io

Visible at http://username.github.io

Per repository:New branch: gh-pages

Visible at http://username.github.io/repository/

GitHub Pages

Custom DomainCreate CNAME file with domain.com text

For example.com:DNS A record 204.232.175.78

For www.example.com:DNS CNAME record username.github.io

404 Not foundCreate 404.html file at top-level

Links

Jekyll Home

http://jekyllrb.com/

GitHub Pages

http://pages.github.com/

Markdown Reference

http://daringfireball.net/projects/markdown/syntaxOctopress

http://octopress.org/