Skip to content
Front-End Skeleton for new projects, powered by Grunt, Jekyll and LiveReload
JavaScript
Find file
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

Something went wrong with that request. Please try again.