⚠⚠⚠ This project is now archived. I no longer build my website using Jekyll and the dependencies are very out-of-date - proceed with caution! ⚠⚠⚠
- Download this repo to a location on your computer
- Download and install Ruby. I recommend using RubyInstaller on Windows (make sure to add Ruby executables to your PATH)
- Install Node.js, again adding to PATH on Windows.
Open a new command line windows and enter the following:
ruby -v
node -v
npm -v
If Ruby, Node and the node package manager are installed correctly, you'll get version numbers for each.
On Windows, do this as an administrator. I also recommend ConEmu as a much-improved upgrade from the built-in cmd.
gem install bundler
- installs Bundler, which lets you manage Ruby gemsbundle install
- uses Bundler to quickly install all of the Ruby dependencies as defined in the Gemfilenpm install gulp -g
- uses the node package manager to globally install gulp on your machine - a requirement for running gulp locallynpm install
- uses the node package manager to install all of our gulp project dependencies, as defined in package.json
gulp
is the default development task. It will do the following:
- delete the existing build/assets directory
- start watching files in jekyll and asset directories for changes
- start BrowserSync
- compile the jekyll site
- compile Sass into css and generate a source map, and lint
- concatenate JavaScript files into scripts.js and generate a source map, and lint
- copy the jekyll site and all assets into the
build/development
andbuild/assets
directories (we take the assets out of the jekyll directory in development because jekyll deletes and rebuilds its containing directory on every site rebuild - a frequent occurrence in the development phase)
Now that it's watching your jekyll and asset directories, any changes will automatically reload your browser window, which is ideal for efficient development.
gulp publish
will get the site ready for deployment:
- compile jekyll site
- compile Sass into css and minify
- concatenate JavaScript files and minify
- optimise all images
- revision assets
- use an additional jekyll
_config.build.yml
file to overwrite any development settings from_config.yml
, e.g. thesite.url
variable
You now have a ready-to-go site in build/production
.