Jekyll Seed

A starting frame for a Jekyll site.

Dependencies

If you're on a Mac: Run ./install-script.sh to install NPM dependencies, Jekyll, and Sass. This will also check to make sure you have Homebrew, Ruby, and Node installed as well, and if not, will download them for you.

If you're on a Windows or Linux computer: please be sure to have Ruby, Rubygems, Jekyll and Sass gems, Node, npm, and Grunt installed. The install-script.sh file made for Mac terminals will not work for you.

Getting started

Check out the _config.yml file first, to set your variables. This config file is read only once when you start your server; so if you make changes to this file while your server is running, you will need to restart your server to see the changes.

On your local computer: Run jekyll server to serve locally.

On Cloud9: Run jekyll serve --host $IP --port $PORT --baseurl '' to serve on Cloud9.

In a separate terminal tab/window, run grunt watch to watch for changes in assets/development/stylesheets and compile your Sass files into CSS, the result of which is your styles end up in assets/production/main.css.min and included in your site's head tag.

Includes:

File tree with _data/, _includes/, _layouts/, _posts/, _static/, assets/, category/, and tag/ subfolders.
Asset setup with Sass. Grunt setup for managing assets.
Initial categories and tags structures, and corresponding layouts.
Includes _includes/klipse.html script, to use with embedding runnable code (!!) directly in your site pages or posts. Check out klipse for more information.

Assets

Assets are broken down into two folders, production/ and development/, to allow you to differentiate between normal and uglified JavaScript, your Sass files vs your compiled and minified CSS files, your original images vs the resized final images.

That way you can link all assets as coming from the production/ folder after running the appropriate Grunt script to update the contents of your production/ folder based on files/changes made to development/ folder contents.

Also included with assets:

FontAwesome files.
_includes/icon-github.html and _includes/icon-twitter.html icons.

Adding new assets

Add new Sass files to assets/development/stylesheets and import them into the main Sass file.

Add new images to assets/development/images, then run grunt (or grunt resize) to make a copy of your newly added image, resize it, and place it into assets/production/images for you.

Add new JavaScript files to assets/development/javascript, then run grunt (or grunt uglify) to make a copy of your new JS files, compress/uglify it, and place it into assets/production/javascript for you.

Tags and Categories

To view your current tags and categories, review the files in _data/.

Each tag needs to have its own slug, name, and description, as well as its own file in tag/ folder.

The file needs to specify its frontmatter, such as:

layout: post-by-tag
tag: [your-tag-slug]
permalink: /tag/[your-tag-slug]/

Same concept with categories.

Additional static pages

Add static pages to _static/, specifying frontmatter in each page. Example:

layout: page
link-title: About
page-title: About site and author
permalink: /static/about/

TatianaAb/demo