jekyll starter

10
Getting Started with Getting Started with Jekyll Jekyll Or: How to blog like a hacker Or: How to blog like a hacker

Upload: bradringel

Post on 07-May-2015

1.066 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Jekyll starter

Getting Started with Getting Started with JekyllJekyll

Or: How to blog like a hackerOr: How to blog like a hacker

Page 2: Jekyll starter

A few basicsA few basics

• Jekyll is static site generator written in ruby.Jekyll is static site generator written in ruby.

• This means jekyll takes text files, written in This means jekyll takes text files, written in markdown or textile, and combines them with user markdown or textile, and combines them with user generated templates to form html pages.generated templates to form html pages.

• Jekyll is oriented towards blogs, but can be used to Jekyll is oriented towards blogs, but can be used to host any kind of static site.host any kind of static site.

• You care because you want a place online to show You care because you want a place online to show off your projects and the things you know, and you off your projects and the things you know, and you want to do it with tools you already use.want to do it with tools you already use.

Page 3: Jekyll starter

Tools we’re using:Tools we’re using:

• RVM (or rbenv) to manage ruby versions. You don’t RVM (or rbenv) to manage ruby versions. You don’t have to it’s just a bit easierhave to it’s just a bit easier

• Ruby 2.0Ruby 2.0

• Ruby GemsRuby Gems

• GitGit

• A Github accountA Github account

• A text EditorA text Editor

Page 4: Jekyll starter

Installing RubyInstalling Ruby

1.1. Open up a terminal window and type the following:Open up a terminal window and type the following:\curl -L https://get.rvm.io | bash -s stable —ruby\curl -L https://get.rvm.io | bash -s stable —ruby

2.2. RVM should modify your dot files (.bashrc .zshrc etc RVM should modify your dot files (.bashrc .zshrc etc unless you tell it not to). So you need to source unless you tell it not to). So you need to source them again.them again.

3.3. Ruby 2.0 should have been installed, but if not you Ruby 2.0 should have been installed, but if not you can can rvm install 2.0.0 & rvm use 2.0.0 rvm install 2.0.0 & rvm use 2.0.0

4.4. You can learn more about RVM installation from You can learn more about RVM installation from www.rvm.iowww.rvm.io

Page 5: Jekyll starter

Installing JekyllInstalling Jekyll

• Now that we have ruby installed, it’s time to install jekyllNow that we have ruby installed, it’s time to install jekyll

• gem install jekyllgem install jekyll

• This should install all the necessary gems to run your This should install all the necessary gems to run your jekyll sitejekyll site

• Move to the directory where you are going to store your Move to the directory where you are going to store your sitesite

• jekyll new <site-name>jekyll new <site-name>

• That’s it!That’s it!

Page 6: Jekyll starter

Getting set up on GithubGetting set up on Github• Github supports jekyll out of the box to generate static web pagesGithub supports jekyll out of the box to generate static web pages

• Our local IU Github will work, but it will be cooler to use Our local IU Github will work, but it will be cooler to use github.comgithub.com

• Create a new repository on Create a new repository on github.comgithub.com named <github- named <github-username>.github.iousername>.github.io

• Change directories to your new jekyll site folder (in your terminal) and run Change directories to your new jekyll site folder (in your terminal) and run the followingthe following

• git initgit init

• git remote add origin [email protected]:<github-username>/<github-git remote add origin [email protected]:<github-username>/<github-username>.github.io.gitusername>.github.io.git

• Now any commit that you push to the origin remote will trigger a Now any commit that you push to the origin remote will trigger a regeneration of your jekyll site, which will be available at <github-regeneration of your jekyll site, which will be available at <github-username>.github.iousername>.github.io

Page 7: Jekyll starter

The Directory StructureThe Directory Structure

• _config.yml is where all of your configuration data goes_config.yml is where all of your configuration data goes

• _drafts is for drafts_drafts is for drafts

• _posts is for more finished posts, these have a different naming _posts is for more finished posts, these have a different naming schemescheme

• _layouts holds the layout files that you specify for pages or posts_layouts holds the layout files that you specify for pages or posts

• _includes holds partials which can be used with liquid {% include _includes holds partials which can be used with liquid {% include %} tags%} tags

• _site holds the generated site_site holds the generated site

• index.html or index.md is the homepage of your siteindex.html or index.md is the homepage of your site

Page 8: Jekyll starter

Post filesPost files

• Posts are either written in markdown or textilePosts are either written in markdown or textile

• Each posts starts with a block of YAML front matter which Each posts starts with a block of YAML front matter which specifies the title, layout and some other configuration specifies the title, layout and some other configuration data. It all goes between two sets of “—“data. It all goes between two sets of “—“

• Everything in the body of the post gets placed in the Everything in the body of the post gets placed in the {{ content }} tag in your layout file. {{ content }} tag in your layout file.

• Post files should be named like this YEAR-MONTH-DAY-Post files should be named like this YEAR-MONTH-DAY-title.MARKUP. For instance: 2013-11-08-jekyll-title.MARKUP. For instance: 2013-11-08-jekyll-introduction.md is a post that is published on November introduction.md is a post that is published on November 8th titled “Jekyll Introduction”8th titled “Jekyll Introduction”

Page 9: Jekyll starter

Using the jekyll gemUsing the jekyll gem• In order to build your site locally, you run In order to build your site locally, you run jekyll buildjekyll build, ,

which will place your generated site into the _site folder.which will place your generated site into the _site folder.

• Jekyll will copy any file or folder that doesn’t start with an Jekyll will copy any file or folder that doesn’t start with an underscore into the _site folder. underscore into the _site folder.

• Any file with YAML frontmatter will be parsed by jekyll and Any file with YAML frontmatter will be parsed by jekyll and converted to HTML. converted to HTML.

• Files and folders with an underscore are not copied.Files and folders with an underscore are not copied.

• Jekyll comes with a built in server to test your site before Jekyll comes with a built in server to test your site before you publish it. you publish it. jekyll servejekyll serve starts a server on port starts a server on port 4000.4000.

Page 10: Jekyll starter

Wrap UpWrap Up

• Jekyll has many more options than what we just covered.Jekyll has many more options than what we just covered.

• The jekyll homepage: The jekyll homepage: www.jekyllrb.comwww.jekyllrb.com has all of the has all of the documentation on how to use all of jekyll’s features.documentation on how to use all of jekyll’s features.

• This page This page http://jekyllrb.com/docs/sites/http://jekyllrb.com/docs/sites/ has good examples of has good examples of jekyll sites that you can check out to help you start your ownjekyll sites that you can check out to help you start your own

• Check the resources page (Check the resources page (http://jekyllrb.com/docs/resources/http://jekyllrb.com/docs/resources/) for a few helpful blog posts from other jekyll users) for a few helpful blog posts from other jekyll users

• The liquid wiki (The liquid wiki (http://docs.shopify.com/themes/liquid-basicshttp://docs.shopify.com/themes/liquid-basics) ) will give you everything you need to set up your templates in will give you everything you need to set up your templates in _layouts_layouts