Introduction to blogging with Jekyll

Eric Lathrop
● Senior Software Engineer at
CafePress
● @ericlathrop
● http://ericlathrop.com
●

“A simple, blog-aware, static site generator”

Template Markdown Liquid Static
Web Site

Jekyll
+
Ruby
+
Templates
+
Content
HTML files
Your workstation Web server
WordPress
+
PHP :'(
+
Database
+
Theme & plugins
+
Content
Web 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 myawesomesite
● cd myawesomesite
● 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: post
title: "Welcome to Jekyll!"
date: 2013-05-18 20:48:00
categories: 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
---
<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: default
title: 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> » <a
href="{{ post.url }}">{{ post.title }}</a></li>
{% endfor %}
</ul>
</div>

Index.html with excerpt
---
layout: default
title: 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> » <a
href="{{ 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
● 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/syntax
Octopress
● http://octopress.org/

Introduction to blogging with Jekyll

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Introduction to blogging with Jekyll

Ähnlich wie Introduction to blogging with Jekyll (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Introduction to blogging with Jekyll

Hinweis der Redaktion