How to install tools for working with Jekyll on macOS

Recently, I decided to transfer all my websites based on a combination of Jekyll + GitHub + GitHub Pages, from fully automatic building with capabilities of GitHub Pages hosting to manual building on my laptop MacBook Pro with macOS Catalina 10.15. In this article I will show you how to install in macOS the tools necessary for local work with websites built on the Jekyll platform. Let’s begin.

Preamble

I have ready-made websites built on the Jekyll platform; version 3.8.6, at the time of the post writing. Until now, the function of building websites from source code I trusted to the GitHub Pages hosting, it does it automatically, I also didn’t use the preview function, as the websites were already well established and the changes, which I contributed were of the same type (mainly the publication of new articles), so the probability of a mistake was very small. But over the years, websites are getting complicated and now it’s time to build websites myself, locally, on my MacBook Pro laptop with macOS Catalina 10.15. In the instructions below I will describe the installation process on macOS of the command line tools necessary for working with websites built on the Jekyll platform (the so-called “Jekyll installation”).

Let’s begin.

In order to install all the necessary tools, which are needed to work with Jekyll on macOS (in my case on a MacBook Pro laptop with macOS Catalina 10.15, but it could be an Apple server), we will use Terminal. This application does not need to be downloaded and installed from anywhere, it already comes with macOS, i.e it is already preinstalled. If this is your first time dealing with Terminal, not be afraid it, just do everything as in my instruction and you will succeed! Installation of Jekyll is a really easy process. Now let’s get started :)

Launch the Terminal app from the Utilities folder of your Applications folder, or use Spotlight to find it.

Now we need to install the command line tools, in order to be able to compile native extensions.

To install, enter the following command and press the Enter key.

xcode-select --install

Click the Install button.

Agree to the “License Agreement” by clicking the Agree button.

Will begin the automatic search, download and installation of tools. Let the installation do its work and don’t interrupt it. This can take a while, so be patient. In my case, it took a little less than 20 minutes, so don’t be scared if at the beginning you will see the indicated download time more than 2 hours :)

Click the Done button when the installation is complete.

Jekyll is written on Ruby therefore we need to install Ruby. I skipped the installation of Ruby since macOS Catalina 10.15 comes with preinstalled Ruby 2.6.3, when Jekyll requires Ruby 2.4.0. or newer, so in my case everything is fine. If you have macOS earlier than Catalina 10.15 then you need to install/upgrade Ruby.

Now we can install Bundler (using a bundler is not a requirement, but it is recommended) and Jekyll. To do this, enter the following command in Terminal and press the Enter key.

gem install --user-install bundler jekyll

And then watching the installation process.

Fetching bundler-2.1.4.gem
WARNING:  You don't have /Users/milenakiseleva/.gem/ruby/2.6.0/bin in your PATH,
	  gem executables will not run.
Successfully installed bundler-2.1.4
Parsing documentation for bundler-2.1.4
Installing ri documentation for bundler-2.1.4
Done installing documentation for bundler after 3 seconds
Fetching public_suffix-4.0.3.gem
Fetching addressable-2.7.0.gem
Fetching colorator-1.1.0.gem
Fetching http_parser.rb-0.6.0.gem
Fetching eventmachine-1.2.7.gem
Fetching em-websocket-0.5.1.gem
Fetching concurrent-ruby-1.1.5.gem
Fetching i18n-1.8.2.gem
Fetching ffi-1.12.1.gem
Fetching sassc-2.2.1.gem
Fetching jekyll-sass-converter-2.0.1.gem
Fetching rb-fsevent-0.10.3.gem
Fetching rb-inotify-0.10.1.gem
Fetching listen-3.2.1.gem
Fetching jekyll-watch-2.2.1.gem
Fetching kramdown-2.1.0.gem
Fetching kramdown-parser-gfm-1.1.0.gem
Fetching liquid-4.0.3.gem
Fetching mercenary-0.3.6.gem
Fetching forwardable-extended-2.6.0.gem
Fetching pathutil-0.16.2.gem
Fetching rouge-3.15.0.gem
Fetching safe_yaml-1.0.5.gem
Fetching unicode-display_width-1.6.1.gem
Fetching jekyll-3.8.6.gem
Fetching terminal-table-1.8.0.gem
Successfully installed public_suffix-4.0.3
Successfully installed addressable-2.7.0
Successfully installed colorator-1.1.0
Building native extensions. This could take a while...
Successfully installed http_parser.rb-0.6.0
Building native extensions. This could take a while...
Successfully installed eventmachine-1.2.7
Successfully installed em-websocket-0.5.1
Successfully installed concurrent-ruby-1.1.5
...
Done installing documentation for public_suffix, addressable, colorator, http_parser.rb, eventmachine, em-websocket, concurrent-ruby, i18n, ffi, sassc, jekyll-sass-converter, rb-fsevent, rb-inotify, listen, jekyll-watch, kramdown, kramdown-parser-gfm, liquid, mercenary, forwardable-extended, pathutil, rouge, safe_yaml, unicode-display_width, terminal-table, jekyll after 50 seconds
27 gems installed

Now we need to update the global variable PATH so that the path to Gem leads to our user home directory.

To do this, we first find out the version number of Ruby that is installed in the system using the following command in Terminal:

ruby -v

ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.x86_64-darwin19]

From the output of the command we see that in my case Ruby version 2.6.3 is installed.

Now add our path to the Gem file by entering the following command in Terminal, in which we replace X.X with the first 2 digits of the Ruby version number in our system:

export PATH=$HOME/.gem/ruby/X.X.0/bin:$PATH

Warning! Do not forget to replace X.X.0 to the Ruby version number in your system, before you press the Enter key. In my case, the version of Ruby is 2.6.3p62 and therefore the command looks like this: export PATH=$HOME/.gem/ruby/2.6.0/bin:$PATH.

Note! In order to enter numbers instead of X in Terminal, use the arrows on the keyboard, the mouse does not work in Terminal.

To make sure that the previous step done correctly and the path to Gem now leads to our user home directory we will enter the following command:

gem env

RubyGems Environment:
  - RUBYGEMS VERSION: 3.0.3
  - RUBY VERSION: 2.6.3 (2019-04-16 patchlevel 62) [universal.x86_64-darwin19]
  - INSTALLATION DIRECTORY: /Library/Ruby/Gems/2.6.0
  - USER INSTALLATION DIRECTORY: /Users/milenakiseleva/.gem/ruby/2.6.0
  - RUBY EXECUTABLE: /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby
  - GIT EXECUTABLE: /usr/bin/git
  - EXECUTABLE DIRECTORY: /usr/local/bin
  - SPEC CACHE DIRECTORY: /Users/milenakiseleva/.gem/specs
  - SYSTEM CONFIGURATION DIRECTORY: /Library/Ruby/Site
  - RUBYGEMS PLATFORMS:
    - ruby
    - universal-darwin-19
  - GEM PATHS:
     - /Library/Ruby/Gems/2.6.0
     - /Users/milenakiseleva/.gem/ruby/2.6.0
     - /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/gems/2.6.0
  - GEM CONFIGURATION:
     - :update_sources => true
     - :verbose => true
     - :backtrace => false
     - :bulk_threshold => 1000
  - REMOTE SOURCES:
     - https://rubygems.org/
  - SHELL PATH:
     - /Users/milenakiseleva/.gem/ruby/2.6.0/bin
     - /usr/local/bin
     - /usr/bin
     - /bin
     - /usr/sbin
     - /sbin
     - /opt/X11/bin

I see that the /Users/milenakiseleva/.gem/ruby/2.6.0/bin line has been added, which means that in my case everything is fine.

Note! Every time you update Ruby to a version with a different first two digits, you will need to update your path to match.

Conclusion

That’s it, you’re done. Now we have all the necessary tools installed for local work with websites built on the Jekyll platform. So simple isn’t it?

I hope this article helped you find out how to install the tools necessary to work with Jekyll locally. If this article has helped you then please leave a comment

Thanks for reading!