A starting frame for a Jekyll site.
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.
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
- File tree with
- Asset setup with Sass. Grunt setup for managing assets.
- Initial categories and tags structures, and corresponding layouts.
_includes/klipse.htmlscript, to use with embedding runnable code (!!) directly in your site pages or posts. Check out klipse for more information.
Assets are broken down into two folders,
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.
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 resize) to make a copy of your newly added image, resize it, and place it into
assets/production/images for you.
grunt uglify) to make a copy of your new JS files, compress/uglify it, and place it into
Tags and Categories
To view your current tags and categories, review the files in
Each tag needs to have its own slug, name, and description, as well as its own file in
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/