Introduction to blogging with Jekyll
•Download as ODP, PDF•
3 likes•2,958 views
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
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Introduction to blogging with Jekyll
Similar to Introduction to blogging with Jekyll (20)
Recently uploaded
Recently uploaded (20)
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/
Editor's Notes
- Composes your content with templates to produce a website.