Giter VIP home page Giter VIP logo

rhianvanesch.com-jekyll's Introduction

⚠⚠⚠ This project is now archived. I no longer build my website using Jekyll and the dependencies are very out-of-date - proceed with caution! ⚠⚠⚠

rhianvanesch.com

Install

  • 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.

Check it's working:

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.

Open a command line and run these:

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 gems
  • bundle install - uses Bundler to quickly install all of the Ruby dependencies as defined in the Gemfile
  • npm install gulp -g - uses the node package manager to globally install gulp on your machine - a requirement for running gulp locally
  • npm install - uses the node package manager to install all of our gulp project dependencies, as defined in package.json

Run the main gulp task

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 and build/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.

Publishing the site

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. the site.url variable

You now have a ready-to-go site in build/production.

rhianvanesch.com-jekyll's People

Contributors

rhianvanesch avatar snyk-bot avatar

Watchers

James Cloos avatar  avatar

Forkers

gideonking

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.