Your SlideShare is downloading. ×
0
Introduction to blogging with Jekyll
Eric Lathrop● Senior Software Engineer atCafePress● @ericlathrop● http://ericlathrop.com●
“A simple, blog-aware, static site generator”
Template Markdown Liquid StaticWeb Site
Jekyll+Ruby+Templates+ContentHTML filesYour workstation Web serverWordPress+PHP :(+Database+Theme & plugins+ContentWeb ser...
Pros● Any web server● No securityvulnerabilities● Nothing to update● Fast!● Comments are hardCons
Installation● Non-programmers:● Install ruby (see ruby-lang.org)● gem install jekyll● Programmers:● Install RVM (see rvm.i...
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● cs...
_posts/2013-05-18-welcome.md---layout: posttitle: "Welcome to Jekyll!"date: 2013-05-18 20:48:00categories: jekyll update--...
_layouts/post.html---layout: default---<h2>{{ page.title }}</h2><p class="meta">{{ page.date | date_to_string }}</p><div i...
_layouts/default.html<!DOCTYPE html><html><head>...</head><body>...{{ content }}...</body></html>
Index.html---layout: defaulttitle: Your New Jekyll Site---<div id="home"><h1>Blog Posts</h1><ul class="posts">{% for post ...
Index.html with excerpt---layout: defaulttitle: Your New Jekyll Site---<div id="home"><h1>Blog Posts</h1><ul class="posts"...
RSS Feed---layout: none---<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom...
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...
GitHub Pages● Custom Domain– Create “CNAME” file with “domain.com” text– For example.com:● DNS “A” record → 204.232.175.78...
Links● Jekyll Home● http://jekyllrb.com/● GitHub Pages● http://pages.github.com/● Markdown Reference● http://daringfirebal...
Introduction to blogging with Jekyll
Introduction to blogging with Jekyll
Introduction to blogging with Jekyll
Introduction to blogging with Jekyll
Introduction to blogging with Jekyll
Upcoming SlideShare
Loading in...5
×

Introduction to blogging with Jekyll

1,907

Published on

See the blog post and video here:
http://ericlathrop.com/2013/05/introduction-to-blogging-with-jekyll/

Use Jekyll to generate static blogs.
Static web sites don't need any special server software, or databases. They're super-fast, and Jekyll gives you complete control over the output HTML.

You will learn how to:
* set up a HTML layout template
* write a post in Markdown
* build a index page with a list of posts
* set up an RSS feed
* extend Jekyll with plugins
* host your blog on GitHub Pages

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,907
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Composes your content with templates to produce a website.
  • Transcript of "Introduction to blogging with Jekyll"

    1. 1. Introduction to blogging with Jekyll
    2. 2. Eric Lathrop● Senior Software Engineer atCafePress● @ericlathrop● http://ericlathrop.com●
    3. 3. “A simple, blog-aware, static site generator”
    4. 4. Template Markdown Liquid StaticWeb Site
    5. 5. Jekyll+Ruby+Templates+ContentHTML filesYour workstation Web serverWordPress+PHP :(+Database+Theme & plugins+ContentWeb server
    6. 6. Pros● Any web server● No securityvulnerabilities● Nothing to update● Fast!● Comments are hardCons
    7. 7. 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.orgngem jekyll" >Gemfile● bundle install
    8. 8. New Site● jekyll new my­awesome­site● cd my­awesome­site● jekyll serve● Open http://localhost:4000 in a browser
    9. 9. ● _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.htmlFile Structure
    10. 10. _posts/2013-05-18-welcome.md---layout: posttitle: "Welcome to Jekyll!"date: 2013-05-18 20:48:00categories: jekyll update---Youll find this post in your `_posts` directory - edit this post andre-build (or run with the `-w` switch) to see your changes!To add new posts, simply add a file in the `_posts` directory thatfollows the convention: YYYY-MM-DD-name-of-post.ext.
    11. 11. _layouts/post.html---layout: default---<h2>{{ page.title }}</h2><p class="meta">{{ page.date | date_to_string }}</p><div id="post">{{ content }}</div>
    12. 12. _layouts/default.html<!DOCTYPE html><html><head>...</head><body>...{{ content }}...</body></html>
    13. 13. Index.html---layout: defaulttitle: Your New Jekyll Site---<div id="home"><h1>Blog Posts</h1><ul class="posts">{% for post in site.posts %}<li><span>{{ post.date | date_to_string }}</span> &raquo; <ahref="{{ post.url }}">{{ post.title }}</a></li>{% endfor %}</ul></div>
    14. 14. Index.html with excerpt---layout: defaulttitle: Your New Jekyll Site---<div id="home"><h1>Blog Posts</h1><ul class="posts">{% for post in site.posts %}<li><span>{{ post.date | date_to_string }}</span> &raquo; <ahref="{{ post.url }}">{{ post.title }}</a>{{ post.excerpt }}</li>{% endfor %}</ul></div>
    15. 15. RSS Feed---layout: none---<?xml version="1.0" encoding="UTF-8"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>{{ site.name }}</title><description>{{ site.description }}</description><link>{{ site.url }}</link><pubDate>{{ site.time | date: "%a, %d %b %Y %H:%M:%S %z" }}</pubDate>{% for post in site.posts limit:10 %}<item><title>{{ post.title }}</title><description>{{ post.content | xml_escape }}</description><pubDate>{{ post.date | date: "%a, %d %b %Y %H:%M:%S %z" }}</pubDate><link>{{ site.url }}{{ post.url }}</link><guid isPermaLink="true">{{ site.url }}{{ post.url }}</guid><author>{{ site.email }}</author></item>{% endfor %}</channel></rss>
    16. 16. Plugins● LESS / SASS● CoffeeScript● Minification● Emoticons● Youtube / Tweet / Gist embedding● Flickr galleries● Etc.
    17. 17. Workflow● jekyll serve –watch● Edit files● View in browser● jekyll build● Deploy (rsync, FTP, scp, etc.)
    18. 18. GitHub Pages
    19. 19. 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/
    20. 20. GitHub Pages● Custom Domain– Create “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 found– Create “404.html” file at top-level
    21. 21. Links● Jekyll Home● http://jekyllrb.com/● GitHub Pages● http://pages.github.com/● Markdown Reference● http://daringfireball.net/projects/markdown/syntaxOctopress● http://octopress.org/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×