Introduction to blogging with Jekyll

1. Introduction to blogging with Jekyll

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

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

4. Template Markdown Liquid Static Web Site

5. Jekyll + Ruby + Templates + Content HTML files Your workstation Web server WordPress + PHP :'( + Database + Theme & plugins + Content Web server

6. Pros ● Any web server ● No security vulnerabilities ● Nothing to update ● Fast! ● Comments are hard Cons

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.org 'ngem 'jekyll'" >Gemfile ● bundle install

8. New Site ● jekyll new myawesomesite ● cd myawesomesite ● jekyll serve ● Open http://localhost:4000 in a browser

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.html File Structure

11. _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.

13. _layouts/post.html --- layout: default --- <h2>{{ page.title }}</h2> <p class="meta">{{ page.date | date_to_string }}</p> <div id="post"> {{ content }} </div>

14. _layouts/default.html <!DOCTYPE html> <html> <head>...</head> <body> ... {{ content }} ... </body> </html>

16. 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>

17. 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>

19. 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>

21. Plugins ● LESS / SASS ● CoffeeScript ● Minification ● Emoticons ● Youtube / Tweet / Gist embedding ● Flickr galleries ● Etc.

22. Workflow ● jekyll serve –watch ● Edit files ● View in browser ● jekyll build ● Deploy (rsync, FTP, scp, etc.)

23. GitHub Pages

24. 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/

25. 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

26. 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

Introduction to blogging with Jekyll

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Similar a Introduction to blogging with Jekyll

Similar a Introduction to blogging with Jekyll(20)

Último

Último(20)

Introduction to blogging with Jekyll

Hinweis der Redaktion