GitHub Pages, Jekyll and Grunt
•Download as PPTX, PDF•
1 like•298 views
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.
Recommended
More Related Content
Similar to GitHub Pages, Jekyll and Grunt
Similar to GitHub Pages, Jekyll and Grunt (20)
Recently uploaded
Recently uploaded (20)
GitHub Pages, Jekyll and Grunt
- 1. GITHUB PAGES, JEKYLL AND GRUNT Paul Heasley • phdesign.com.au • @pheasley
- 2. CMS’s are cumbersome and designed for content authors
- 3. GITHUB PAGES free website hosting
- 4. One site per account repo: username.github.io branch: master url: http://username.github.io
- 5. One site per project repo: project branch: gh-pages url: http://username.github.io/projcet
- 6. JEKYLL the static site generator
- 7. BLOG AWARE! whatever that means
- 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. 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. Jekyll uses the Liquid template language. from shopify.com
- 11. <ul> {% for post in site.posts %} <li> <a href="{{ post.url }}">{{ post.title }}</a> {{ post.excerpt | strip_html }} </li> {% endfor %} </ul>
- 13. Sick of pushing to GitHub? Build locally.
- 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. oh the power of plugins PLUGINS!
- 17. Category / tag listings jekyll-archives
- 20. do even more with GRUNT
- 21. Publish to GitHub pages grunt-gh-pages
- 22. thanks.
Editor's Notes
- Good evening. Tonight I’m going to talk to you about hosting a site at GitHub pages, and extending it with Jeykll and Grunt. Before I get started I’d like to get to know you better. How many of you have built and published a website? Hands up. How many of those people have used a CMS? I’ve built a number of sites on a range of CMS, including Sitecore, WordPress and Squiz Matrix, but they all had one thing in common, they are designed for content authors.
- There’s always a significant overhead in developing a site to be CMS ready and sometimes you just don’t need it. What if all the authors are devs, why not just use plain HTML? Well because you want templates to avoid duplicating code and creating a maintenance nightmare. And you want to be able to write content without worrying about code.
- Well GitHub pages is a great solution to becoming CMS free but still have a maintainable and extensible site. And you’ll be in good company, besides my own site, the Bootstrap, React, Backbone, Bower and Yeoman sites all use GitHub pages. GitHub pages is a free offering from GitHub that allows you to host one website per account and one website per project.
- To use your account site, you need to create a repo named username.github.io on GitHub and push your website files into the master branch.
- For a project site you need to create a new orphaned branch called gh-pages within your project repo on GitHub, and push your site files to it. So free static web site hosting at GitHub is great, but you can get that elseware, even Google Drive offers it, what makes GitHub pages stand out is Jekyll.
- Jekyll is a static site generator, which means it takes templates, pages and data from a convention based folder structure, and turns it into a static site for you. It’s basically what your CMS is doing on every page request, but it does it just once. GitHub pages runs Jekyll on your site by default, but because you probably aren’t clashing with Jekyll’s folder conventions you won’t notice.
- Jekyll is blog aware, which basically means it can do a lot of what your Wordpress site can, it understands published and draft posts, tag, categories, permalinks, post listings and excerpts among other concepts.
- A typical Jekyll folder structure contains a _layouts folder for your base templates, an _includes folder for partial includes that can be used by layouts or pages, a _config.yaml file which defines site configuration, and other files and folders that contain your site content. Any folder that Jekyll doesn’t recognise is copied verbatim to the static site and you can tell Jekyll to ignore files or folders and not copy them using configuration settings.
- A Jekyll content page will start with Frontmatter, that’s all the code between the 2 rows of hyphens at the start of the file. In the frontmatter you can can define the layout to use, the page title and a permalink for the page among other configuration settings. These will override any settings in the site config (_config.yaml).
- Jekyll uses the Liquid templating language developed by Shopify which will feel familiar for anyone who’s worked with handlebars, mustache or angular.
- Liquid defines tags for flow control and filters for acting on variables
- For a static site generator Jekyll is very feature rich and you’ll be surpised what you can accomplish with it. Apart from templates, it supports SASS, extensionless urls, markdown, textile, even custom domains on GitHub pages, and the list goes on.
- But Jekyll isn’t exclusive to GitHub pages, Jekyll comes packaged as a Ruby gem that allows you to install it on your local machine. Once jekyll is installed you can use jekyll build to compile your static site or
- jekyll serve to compile, spin up a web server and watch the file system for changes.
- And there’s another big benefit to running Jekyll locally, plugins! Plugins extend the functionality of Jekyll unfortunately they aren’t supported by GitHub pages, so if you want to use a plugin you’ll need to build you site locally and push up the resulting _site folder to GitHub. Some cool Jekyll plugins allow you to
- implement site search,
- create tag or category listings and
- have page redirects.
- You’ll be surprised by the number of things you can do with Jekyll that you think would be impossible for a static site, for example, want comments? Use Disqus. Want emailed forms? Try Simple Form. And if you’re building locally and pushing the resulting site to GitHub pages, you could get even more creative with your build pipeline with Grunt.
- You could preform pre Jekyll tasks like bundling and minification, or post Jekyll tasks like
- pushing the compiled site up to GitHub automatically using grunt-gh-pages.
- Thanks for listening.