Front-End Skeleton for new projects, powered by Grunt, Jekyll and LiveReload
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
_includes
_layouts
css/less
js
.gitignore
.htaccess
Gruntfile.js
README.md
TODO.md
_config.yml
apple-touch-icon.png
favicon.ico
home.html
humans.txt
package.json
robots.txt
sitemap.xml

README.md

Front-end Skeleton

A Grunt, Jekyll and LiveReload powered starting point I use for front-end development.

Install

Run npm install to download dependencies then use the Grunt Tasks mentioned below. Edit package.json and _config.yml where you see Author and Shortname variables.

Grunt Config

package.json is used to define the Grunt configuration:

Shortname: fes # Used to name JS and CSS

Jekyll Config

_config.yml is used to define the Jekyll configuration:

Shortname: shortname: fes # Used to name JS and CSS
Assets Path: path_assets: /
Mobile: mobile: true # Used to name JS and CSS
Development: env: dev
Staging: env: stg
Production: env: prd
Debug: debug: false|true # Default is false

The env and debug settings are available in files processed by Jekyll using site.env and site.debug, this allows the targeting functionality at a specific environment.

Example using site.env to include development javascript in when env: dev:

{% if site.env == 'dev' %}
    Do this in development
{% else %}
    Do this in production
{% endif %}

Grunt Tasks

grunt

Build using _config.yml destination _deploy.

grunt deploy

Build a production release _deploy.zip using _config.yml temporary destination _deploy.

grunt dev

Build using _config.yml destination _site and run server on localhost:8080 with auto-regeneration.

Acknowledgements