Downloaded 12 times
Uploaded byEric Lathrop
Introduction to blogging with Jekyll
This document serves as an introduction to blogging using Jekyll, a static site generator based on Ruby. It outlines the advantages and disadvantages of using Jekyll, the installation process for both non-programmers and programmers, and the basic file structure needed for setting up a blog. Additionally, it provides guidance on deploying the blog to GitHub Pages and offers links for further resources related to Jekyll, GitHub Pages, and markdown syntax.
More Related Content
Similar to Introduction to blogging with Jekyll
Introduction to blogging with Jekyll
- 1. Introduction to bloggingwith Jekyll
- 2. Eric Lathrop ● SeniorSoftware Engineer at CafePress ● @ericlathrop ● http://ericlathrop.com ●
- 3. “A simple, blog-aware,static site generator”
- 4. Template Markdown LiquidStatic Web Site
- 5. Jekyll + Ruby + Templates + Content HTML files Your workstationWeb server WordPress + PHP :'( + Database + Theme & plugins + Content Web server
- 6. Pros ● Any webserver ● No security vulnerabilities ● Nothing to update ● Fast! ● Comments are hard Cons
- 7. Installation ● Non-programmers: ● Installruby (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: "Welcometo 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: YourNew 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 --- <?xmlversion="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.
- 24. GitHub Pages ● Peruser: – 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 ● CustomDomain – 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/
Editor's Notes
- #4 Composes your content with templates to produce a website.