Jekyll starter

1,403 views

Published on

Published in: Technology, Education
  • Be the first to comment

Jekyll starter

  1. 1. Getting Started with Jekyll Or: How to blog like a hacker
  2. 2. A few basics • Jekyll is static site generator written in ruby. • This means jekyll takes text files, written in markdown or textile, and combines them with user generated templates to form html pages. • Jekyll is oriented towards blogs, but can be used to host any kind of static site. • You care because you want a place online to show off your projects and the things you know, and you want to do it with tools you already use.
  3. 3. Tools we’re using: • RVM (or rbenv) to manage ruby versions. You don’t have to it’s just a bit easier • Ruby 2.0 • Ruby Gems • Git • A Github account • A text Editor
  4. 4. Installing Ruby 1. Open up a terminal window and type the following: curl -L https://get.rvm.io | bash -s stable —ruby 2. RVM should modify your dot files (.bashrc .zshrc etc unless you tell it not to). So you need to source them again. 3. Ruby 2.0 should have been installed, but if not you can rvm install 2.0.0 & rvm use 2.0.0 4. You can learn more about RVM installation from www.rvm.io
  5. 5. Installing Jekyll • Now that we have ruby installed, it’s time to install jekyll • gem install jekyll • This should install all the necessary gems to run your jekyll site • Move to the directory where you are going to store your site • jekyll new <site-name> • That’s it!
  6. 6. Getting set up on Github • Github supports jekyll out of the box to generate static web pages • Our local IU Github will work, but it will be cooler to use github.com • Create a new repository on github.com named <github-username>.github.io • Change directories to your new jekyll site folder (in your terminal) and run the following • git init • git remote add origin git@github.com:<github-username>/<githubusername>.github.io.git • Now any commit that you push to the origin remote will trigger a regeneration of your jekyll site, which will be available at <githubusername>.github.io
  7. 7. The Directory Structure • _config.yml is where all of your configuration data goes • _drafts is for drafts • _posts is for more finished posts, these have a different naming scheme • _layouts holds the layout files that you specify for pages or posts • _includes holds partials which can be used with liquid {% include %} tags • _site holds the generated site • index.html or index.md is the homepage of your site
  8. 8. Post files • Posts are either written in markdown or textile • Each posts starts with a block of YAML front matter which specifies the title, layout and some other configuration data. It all goes between two sets of “—“ • Everything in the body of the post gets placed in the {{ content }} tag in your layout file. • Post files should be named like this YEAR-MONTH-DAYtitle.MARKUP. For instance: 2013-11-08-jekyllintroduction.md is a post that is published on November 8th titled “Jekyll Introduction”
  9. 9. Using the jekyll gem • In order to build your site locally, you run jekyll build, which will place your generated site into the _site folder. • Jekyll will copy any file or folder that doesn’t start with an underscore into the _site folder. • Any file with YAML frontmatter will be parsed by jekyll and converted to HTML. • Files and folders with an underscore are not copied. • Jekyll comes with a built in server to test your site before you publish it. jekyll serve starts a server on port 4000.
  10. 10. Wrap Up • Jekyll has many more options than what we just covered. • The jekyll homepage: www.jekyllrb.com has all of the documentation on how to use all of jekyll’s features. • This page http://jekyllrb.com/docs/sites/ has good examples of jekyll sites that you can check out to help you start your own • Check the resources page (http://jekyllrb.com/docs/resources/) for a few helpful blog posts from other jekyll users • The liquid wiki (http://docs.shopify.com/themes/liquid-basics) will give you everything you need to set up your templates in _layouts

×