introduction to blogging with jekyll
TRANSCRIPT
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/