1. Why choosing Jekyll?

  • Free, open souce
  • Easy to install and use
  • Many free themes.

2. Install Jekyll

Install the command-line tools to be able to compile native extensions:

$ xcode-select --install

Install Ruby via Homebrew:

$ brew install ruby

Add Ruby path to your shell config. Replace ~/.zshrc with ~/.bashrc if you are using bash.

$ echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc

Relaunch your terminal and check your updated Ruby setup.

$ which ruby  
/usr/local/opt/ruby/bin/ruby  

$ ruby -v  
ruby 2.6.1p33 (2019-01-30 revision 66950) [x86_64-darwin18]

Install Bundler and Jekyll:

$ gem install bundler jekyll

Check if Jekyll is installed correctly.

$ jekyll -v                                                                
jekyll 3.8.5

If you see the command not found error, add Jekyll path to your shell config. Find your Jekyll path using:

$ gem which jekyll                
/usr/local/lib/ruby/gems/2.6.0/gems/jekyll-3.8.5/lib/jekyll.rb

Try to replace /gems/jekyll-3.8.5/lib/jekyll.rb with /bin. Jekyll should be inside /usr/local/lib/ruby/gems/2.6.0/bin. Use ls to make sure jekyll is there.
Add that path to your shell config:

$ echo 'export PATH="/usr/local/lib/ruby/gems/2.6.0/bin:$PATH"' >> ~/.zshrc

3. Download Theme

You can create a new Jekyll site with default minimal theme by:

$ jekyll new myblog

But there are many free theme for free, so we can forget the default theme and look for a better theme. You can google it or check in jekyll-themes.com.

Download any theme you like. Each theme has its own installation instructions, so follow it.

The most common way is:

// Go to the downloaded folder
$ cd theme_folder

// Install dependency gems
$ bundle install

// Run Jekyll server
$ bundle exec jekyll serve --incremental

Your Jekyll site is served at: http://localhost:4000/

4. Synchronised browser testing

When you edit your post, you want the browser to be refreshed and your changes are displayed right after you saved your files. So you may need Browsersync. That tool will auto synch and reload the browser for you.

Install it by

$ npm install -g browser-sync

Run this command in the same directory of your site. It will watch any changes in the entire _site directory

$ browser-sync start --proxy "localhost:4000" --files "_site/*.*"

This command will open the browser, and your site will be sync real-time in http://localhost:3000/.