Jekyll notes

author: Paul Kim

categories: jekyll

tags: jekyll

how to build and deploy static website using jekyll and netlify


  • ubuntu or mac. use ubuntu vm on windows.
  • install ruby using rbenv (ruby -v)
  • install nodejs using nvm
  • github account (free)
  • netlify account (free)

ubuntu steps:

  1. install rbenv using rbenv-installer
# with curl
curl -fsSL | bash

# alternatively, with wget
wget -q -O- | bash
  1. add the following to .bashrc and restart shell or source ~/.bashrc
# rbenv
export PATH="$HOME/.rbenv/bin:$PATH"
eval "$(rbenv init -)"
# install Ruby Gems to ~/gems
export GEM_HOME="$HOME/gems"
export PATH="$HOME/gems/bin:$PATH"
  1. install dependencies and then install latest ruby version using rbenv
sudo apt install -y build-essential
sudo apt install -y libssl-dev zlib1g-dev # ubuntu
sudo dnf install -y libssl-dev zlib1g-dev # fedora

# list only stable releases for each ruby implementation
rbenv install -l

# list all ruby versions available for installation
rbenv install --list-all

# install ruby version 2.7.2
rbenv install 2.7.2

# set ruby 2.7.2 as the global version of ruby
rbenv global 2.7.2

# list all ruby versions known to rbenv with an asterisk next to the currently active version.
rbenv versions

# display the currently active ruby version
rbenv version

# print ruby version
ruby -v
  1. check rbenv path
# Check your install
curl -fsSL | bash

# check that default gem paths point to your home directory by default
gem env

# print gem version
gem -v
  1. install jekyll
gem install bundler jekyll
  1. create a new jekyll site
mkdir ~/sites
cd ~/sites
jekyll new myfirstsite
cd myfirstsite
bundle exec jekyll serve

serve jekyll within local network

To serve jekyll from another machine on your local network (i.e., a mobile device):

bundle exec jekyll serve --host=

or add host= to your _config.yml file.

To find the IP address of the computer hosting the Jekyll site:

// using grep to filter IP address from ifconfig
ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.){3}[0-9]*' | grep -Eo '([0-9]*\.){3}[0-9]*' | grep -v ''

// or with sed
ifconfig | sed -En 's/;s/.*inet (addr:)?(([0-9]*\.){3}[0-9]*).*/\2/p'

// or with grep and awk (this is the most agnostic disregarding locale (i.e. en)
ifconfig | grep -E "([0-9]{1,3}\.){3}[0-9]{1,3}" | grep -v | awk '{ print $2 }' | cut -f2 -d:

add bootstrap 4 to jekyll

  1. Install bootstrap via npm package
jekyll new myblog
cd myblog
npm init --yes
npm install bootstrap@4.0.0-alpha.5 --save
  1. Copy everything under node_modules/bootstrap/scss folder to _sass folder.
  2. Create css folder and add main.scss file.



@import 'bootstrap';

compress html in jekyll

compress html in jekyll without a plugin using jekyll-compress-html

  1. Extract and copy compress.html to your _layouts.
  2. Reference the compress layout in your highest-level layout (i.e., _layout/default.html):

    layout: compress
    <!DOCTYPE html>
     {% raw %}{{ content }}{% endraw %}
  3. Compress HTML in Jekyll
  4. Compressing HTML in Jekyll without a plugin


© 2021 All rights reserved.