• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Introduction to blogging with Jekyll
 

Introduction to blogging with Jekyll

on

  • 1,157 views

See the blog post and video here: ...

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

Statistics

Views

Total Views
1,157
Views on SlideShare
834
Embed Views
323

Actions

Likes
2
Downloads
3
Comments
0

4 Embeds 323

http://ericlathrop.com 292
http://localhost 26
http://www.ericlathrop.com 4
http://newsblur.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Composes your content with templates to produce a website.

Introduction to blogging with Jekyll Introduction to blogging with Jekyll Presentation Transcript

  • 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 server
  • 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.io)● rvm ­­rvmrc ­­create 1.9.3@jekyll● gem install bundler● echo ­e "source https://rubygems.orgngem 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.htmlFile Structure
  • _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.
  • _layouts/post.html---layout: default---<h2>{{ page.title }}</h2><p class="meta">{{ page.date | date_to_string }}</p><div id="post">{{ content }}</div>
  • _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 in site.posts %}<li><span>{{ post.date | date_to_string }}</span> &raquo; <ahref="{{ post.url }}">{{ post.title }}</a></li>{% endfor %}</ul></div>
  • 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>
  • 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>
  • 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 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
  • Links● Jekyll Home● http://jekyllrb.com/● GitHub Pages● http://pages.github.com/● Markdown Reference● http://daringfireball.net/projects/markdown/syntaxOctopress● http://octopress.org/