Jekyll notes

how to build and deploy static website using jekyll and netlify

prerequisite:

  • 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 https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-installer | bash

# alternatively, with wget
wget -q https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-installer -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. check rbenv path
# Check your install
curl -fsSL https://github.com/rbenv/rbenv-installer/raw/master/bin/rbenv-doctor | bash

# check that default gem paths point to your home directory by default
gem env
  1. install dependencies and then install latest ruby version using rbenv
sudo apt install -y libssl-dev zlib1g-dev

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

# install ruby version 2.7.1
rbenv install 2.7.1

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

# 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
  1. install jekyll
gem install jekyll bundler
  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=0.0.0.0

or add host=0.0.0.0 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 '127.0.0.1'

// or with sed
ifconfig | sed -En 's/127.0.0.1//;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 127.0.0.1 | awk '{ print $2 }' | cut -f2 -d:

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>
    <html>
     {% raw %}{{ content }}{% endraw %}
    </html>
  3. Compress HTML in Jekyll
  4. Compressing HTML in Jekyll without a plugin

© 2020 | Paul Kim