Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
GITHUB PAGES,
JEKYLL AND GRUNT
Paul Heasley • phdesign.com.au • @pheasley
CMS’s are cumbersome and
designed for content authors
GITHUB PAGES
free website hosting
One site per account
repo: username.github.io
branch: master
url: http://username.github.io
One site per project
repo: project
branch: gh-pages
url: http://username.github.io/projcet
JEKYLL
the static site generator
BLOG AWARE!
whatever that means
.
├── _config.yml
├── _drafts
| └── on-simplicity-in-technology.markdown
├── _includes
| ├── footer.html
| └── header.html...
posts.html:
---
layout: posts
permalink: posts/
title: Recent blog posts
---
{% include header.html %}
<h1>Here’s some of ...
Jekyll uses the Liquid template language.
from shopify.com
<ul>
{% for post in site.posts %}
<li>
<a href="{{ post.url }}">{{ post.title }}</a>
{{ post.excerpt | strip_html }}
</li>...
Extensionless URLs
SASS
Templates
FEATURES
Filters
Markdown
Textile
Tags
Categories
Drafts
Permalinks
Excerpts
Pagination
...
Sick of pushing to GitHub?
Build locally.
$ gem install jekyll
$ jekyll serve
Configuration file: /Users/paul/Projects/presentation-github-pages/demo2/_config.yml
S...
oh the power of plugins
PLUGINS!
Site search
jekyll-lunr-js-search
Category / tag listings
jekyll-archives
Redirects
jekyll-redirect-from
Comments
https://disqus.com
Forms
https://getsimpleform.com
what about...
do even more with
GRUNT
Publish to GitHub pages
grunt-gh-pages
thanks.
Upcoming SlideShare
Loading in …5
×

GitHub Pages, Jekyll and Grunt

126 views

Published on

Ditch your expensive web host and CMS and use free GitHub pages to host your site, Jekyll to author your content and Grunt to automate the development and deployment processes.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

GitHub Pages, Jekyll and Grunt

  1. 1. GITHUB PAGES, JEKYLL AND GRUNT Paul Heasley • phdesign.com.au • @pheasley
  2. 2. CMS’s are cumbersome and designed for content authors
  3. 3. GITHUB PAGES free website hosting
  4. 4. One site per account repo: username.github.io branch: master url: http://username.github.io
  5. 5. One site per project repo: project branch: gh-pages url: http://username.github.io/projcet
  6. 6. JEKYLL the static site generator
  7. 7. BLOG AWARE! whatever that means
  8. 8. . ├── _config.yml ├── _drafts | └── on-simplicity-in-technology.markdown ├── _includes | ├── footer.html | └── header.html ├── _layouts | ├── default.html | └── post.html ├── _posts | ├── 2007-10-29-why-every-programmer-should-play-nethack.textile ├── _data | └── members.yml └── index.html
  9. 9. posts.html: --- layout: posts permalink: posts/ title: Recent blog posts --- {% include header.html %} <h1>Here’s some of my recent posts</h1> _layouts/posts.html: <!DOCTYPE html> <html lang="en"> <head><title>{{ page.title }}</title></head> <body> {{ content }} </body> </html>
  10. 10. Jekyll uses the Liquid template language. from shopify.com
  11. 11. <ul> {% for post in site.posts %} <li> <a href="{{ post.url }}">{{ post.title }}</a> {{ post.excerpt | strip_html }} </li> {% endfor %} </ul>
  12. 12. Extensionless URLs SASS Templates FEATURES Filters Markdown Textile Tags Categories Drafts Permalinks Excerpts Pagination Syntax highlighting Custom domain
  13. 13. Sick of pushing to GitHub? Build locally.
  14. 14. $ gem install jekyll $ jekyll serve Configuration file: /Users/paul/Projects/presentation-github-pages/demo2/_config.yml Source: /Users/paul/Projects/presentation-github-pages/demo2 Destination: /Users/paul/Projects/presentation-github-pages/demo2/_site Generating... done. Auto-regeneration: enabled for '/Users/paul/Projects/presentation-github-pages/demo2' Configuration file: /Users/paul/Projects/presentation-github-pages/demo2/_config.yml Server address: http://127.0.0.1:4000/ Server running... press ctrl-c to stop.
  15. 15. oh the power of plugins PLUGINS!
  16. 16. Site search jekyll-lunr-js-search
  17. 17. Category / tag listings jekyll-archives
  18. 18. Redirects jekyll-redirect-from
  19. 19. Comments https://disqus.com Forms https://getsimpleform.com what about...
  20. 20. do even more with GRUNT
  21. 21. Publish to GitHub pages grunt-gh-pages
  22. 22. thanks.

×