Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to blogging with Jekyll

2,596 views

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
  • Be the first to comment

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/

×