Jekyll Kickoff

A minimal beginner template for Jekyll projects.

Includes

• basic site structure
• HTML5 Boilerplate index + favicon
• Bourbon/Neat starter stylesheets
• local jQuery fallback

Needs

• full directory structure

See gist for example →

Tools

• Jekyll
• HTML5 Boilerplate
• Sass
• Bourbon
• Neat

New to Jekyll?

That's cool! Check out the Jekyll introduction, then walk through the next steps to get up and running using this template.

1. You'll need Ruby. If you're on a Mac, sweet, you're set. If you're on Windows, take a look at Ruby Installer. (Note - using Jekyll on Windows is challenging. Be prepared to do some extra work.)

2. To install Jekyll, we use a gem, which is how Ruby packages up programs and libraries. Open up your command line program and type:

    $ gem install jekyll
   

3. For this template, we are also using Sass, a CSS preprocessor, Bourbon, a library of Sass mixins and Neat, a lightweight grid framework. We can install all of these with the following three gems:

    $ gem install sass
    $ gem install bourbon
    $ gem install neat
   

4. Once these are installed, go into the folder where you're going to keep your Sass stylesheets and run the following commands:

    $ bourbon install
    $ neat install
   

5. Then in your primary stylesheet, add the two following imports to the top of your file:

    @import "bourbon/bourbon";
    @import "neat/neat";
   

6. Now you can copy the Jekyll Kickoff files to your computer (choose "Clone to Desktop" or "Download .zip" on the right-hand side) and put them in your project folder.

7. Create the missing directories. You'll likely want a structure that looks something like this directory example.

8. Now we can fire up Jekyll. In your command line, type:

    $ jekyll serve --watch
   

This starts the local server and tells it to automatically watch for changes you make. 9. Open a new command line window or tab and type:

    $ sass --watch assets/scss/screen.scss:assets/css/screen.css

This tells Sass to watch for changes you make to the Sass/SCSS. files and compile them to CSS. 10. Open your web browser and go to: http://localhost:4000. You should see the HTML5 Boilerplate welcome message. 11. Now you're ready to build! As you make changes to your HTML and Sass/SCSS, Jekyll will automatically rebuild the site and put all the compiled files into a folder called "_site." You can refresh your browswer window to see the changes displayed.

If you're also just getting started with Sass, Bourbon and Neat, check out their sites for more documentation and help.

Once you're done with your site, check out how to easily deploy it to GitHub Pages.

Compass/Susy

This template originally used the Sass library Compass and grid framework Susy instead of Bourbon/Neat. If you want the Compass/Susy verison instead, checkout the "compass" branch rather than "master."