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

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

×