So my web development has taken an interesting path, not that different to some others.
I start back in 1907 doing hand coded html, then moved to hand coded php, then dreamweaver, then CMS.
Eventually making it to Wordpress then back to PHP, and now to Jekyll

My path to adopting Jekyll has been a long one. Every now and then I get a bee in my bonnet about how bloated Wordpress is for many of my web tasks.
It’s great for what it was designed for! Helen uses Wordpress in all her websites, and it is a perfect tool for her. She’s not technical, and just wants to publish articles that she types in an online editor; perfect for Wordpress!

I am technical! and I don’t need all the things that come with Wordpress, in fact what I really want is the fastest loading website possible.
In comes Jekyll (plus bootstrap, jquery, and popper.js ).

So I faffed about on my Macbook and started converting paulwillard.nz to a Jekyll site.
after a few days I realised I’d lost track of what I had installed, and where I had got to with dev.
So I thought I’d start from scratch again, and this time document the steps to get a really simple boostrap site up and running.

Before I continue I’ve got to give credit to a site that has really helped my journey.

I have no idea who this Michael Rose character is, but I reckon he’s taken the same web development path as me, going by his posts!

So here we go:
I start with a dead clean fresh install of Debian Stretch

Installing NodeJS and ruby

Let’s install the deb source key:
curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | sudo apt-key add -

and add to our packages sources.list:

cat << EOF >> /etc/apt/sources.list
deb https://deb.nodesource.com/node_10.x stretch main
deb-src https://deb.nodesource.com/node_10.x stretch main
EOF

Now let’s install some packages:

aptitude update
aptitude install ruby-full build-essential nodejs tree

Environment setup

Let’s install all our gems to our home directory:

cat << EOF >> ~/.bashrc
### Install Ruby Gems to ~/gems
export GEM_HOME=$HOME/gems
export PATH=$HOME/gems/bin:$PATH
EOF 

source ~/.bashrc

Install Jekyll

Let’s install Jekyll:
gem install jekyll bundler

Create a Jekyll site

Let’s start with a blank site:
jekyll new mysite --blank

and add some JS packages from node:

cd mysite
npm init --force
npm install bootstrap
npm install jquery
npm install popper.js

_config.yml Setup

Let’s do a basic _config.yml
This will tell Jekyll to search a few different paths for sass

and tell Jekyll to include node_modules by setting exclude to 0 (by default Jekyll excludes node_modules)

cat << EOF > _config.yml
sass:
    load_paths:
        - _sass
        - node_modules
        - assets/css
exclude: []
EOF

default.html Layout

Lets create a pretty simple starter default layout:

cat << EOF > _layouts/default.html
<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title id="pageTitle">Jekyll Getting Started</title>
	<link rel="stylesheet" href="assets/css/main.css">
	</head>

	<body>
		{{ content }}
	<script src="{{'/node_modules/jquery/dist/jquery.min.js' | prepend: site.baseurl}}"></script>
	<script src="{{'/node_modules/popper.js/dist/umd/popper.min.js' | prepend: site.baseurl}}"></script>
	<script src="{{'/node_modules/bootstrap/dist/js/bootstrap.min.js' | prepend: site.baseurl}}"></script>
	</body>
</html>
EOF 

main.scss ( CSS )

In our _layout/default.html we’ve told the browser to load css from assets/css/main.css, so we better create that:
first create the directory mkdir -p assets/css.

Now let’s put some text in the file:

Note: the file has the extension scss, Jekyll will preprocess the CSS and make a .css file
you must include the first two lines “—”, this tells Jekyll to preprocess the file

---
---

@import "bootstrap/scss/bootstrap";

EOF 

index.html ( Your new webpage )

Let’s create an index.html file.

Note: include the frontmatter, the first 4 lines
This tells Jekyll the layout to use (default.html) and gives the page a title (used in the above layout).

cat << EOF > index.html
---
layout: default
title: Pauls new site
---
My new site
EOF 

Jekyll build and server

we’re done! Let’s build the site, then serve it using the inbuilt Jekyll server:
jekyll build && jekyll serve --host=0.0.0.0

Advanced CSS

Using inline CSS

I like to “inline” my CSS, rather than include a css file.
It’s pretty easy to tell Jekyll to inline the CSS.

Let’s make an _includes directory mkdir _includes.

Now let’s populate a css file in the includes directory:

Note: the file extension is .css
this file has no frontmatter

cat << EOF > _includes/main.css
@import "bootstrap/scss/bootstrap";
EOF

We don’t need the old file anymore so let’s remove it rm assets/css/main.scss.

finally, in your index.html replace the css line with:

{% capture styles %}
    {% include main.css %}
    {% endcapture %}
    <style>
    {{ styles | scssify }}
    </style>

We’re done! Let’s build and serve:
jekyll build && jekyll serve --host=0.0.0.0

Compressing (Minify ) CSS

If you’re like me and like to have the fastest possible website, you’re going to want to minify your css

That’s super easy too! Just add a small config to your _config.yml :

cat << EOF > _config.yml
sass:
    load_paths:
        - _sass
        - node_modules
        - assets/css
    style: compressed
exclude: []
EOF

We’re done! Let’s build and serve:
jekyll build && jekyll serve --host=0.0.0.0

Open your browser and check out the source code the Jekyll produces!

Final notes

– host ?

You may be wondering why I use jekyll serve --host=0.0.0.0?
Why do I use that –host bit?
Well by default Jekyll serves up on localhost, and my development server is remote (i.e. I can’t use localhost).

I could port forward localhost 4000 to the development server (I mean, I’m probably on it anyway doing development).
ssh -L 4000:localhost:4000 development.server.nz

Including node_modules directory ?

No, I don’t actually include the entire node_modules directory. I have a build script that shuffles files around into the right place first.

I put this file in the root of mysite then excute using ./ctl.sh -b && ./ctl.sh -s

#!/bin/bash
VENDOR_DIR=assets/vendor/
NPM=/usr/bin/npm
JEKYLL=/home/paul/gems/bin/jekyll
BUNDLE=/home/paul/gems/bin/bundle

VERSION="2018-10-15 v1.0"

ShowHelp() {
    SCRIPT_NAME="$(basename "$(test -L "$0" && readlink "$0" || echo "$0")")"
    echo "
$SCRIPT_NAME version $VERSION

$SCRIPT_NAME is a small shell script that updates, builds, and serves a local Jekyll project
it can only take one argument at a time.
Usage:
$SCRIPT_NAME [single option]


Options
 -h, --help             Show this help screen
 -u, --update           Update your npm packages ($NPM update && $NPM install)
 -b, --build            Build your Jekyll project
 -s, --server           start a local Jekyll server ($BUNDLE exec $JEKYLL serve)
"
    exit 1
}

UpdateNPM() {
    if [ ! -d "$VENDOR_DIR" ]; then
        mkdir -p $VENDOR_DIR
    fi
    $NPM update
    $NPM install
    cp node_modules/jquery/dist/jquery.min.js $VENDOR_DIR
    cp node_modules/jquery/dist/jquery.min.map $VENDOR_DIR
    cp node_modules/popper.js/dist/umd/popper.min.js $VENDOR_DIR
    cp node_modules/popper.js/dist/umd/popper.min.js.map $VENDOR_DIR
    cp node_modules/bootstrap/dist/js/bootstrap.min.js $VENDOR_DIR
    cp node_modules/bootstrap/dist/js/bootstrap.min.js.map $VENDOR_DIR 
    $BUNDLE
}

BuildBundledJS() {
    cat $VENDOR_DIR/jquery.min.js &lt;(echo) $VENDOR_DIR/popper.min.js &lt;(echo) $VENDOR_DIR/bootstrap.min.js &lt;(echo) > $JSBUNDLE_DIR/bundle.js
}

JekyllBuild() {
    BuildBundledJS
    export JEKYLL_ENV=production
    $BUNDLE exec $JEKYLL build
}

StartServer() {
    BuildBundledJS
    $BUNDLE exec $JEKYLL serve --host=0.0.0.0
}

case $1 in 
    (-u)
        UpdateNPM
        ;;
    (--update)
        UpdateNPM
        ;;
    (-h)
        ShowHelp
        ;;
    (--help)
        ShowHelp
        ;;
    (-b)
        JekyllBuild
        ;;
    (--build)
        JekyllBuild
        ;;
     (-s)
        StartServer
        ;;
    (--serve)
        StartServer
        ;;
    (*)
        ShowHelp
        ;;
esac

And here’s the video

Leave a Comment

Liked what you've read?

  1. Leave me a message, or
  2. Drop me an email

It only take a second of your time, but it means the world to me.
Don't comment on Facebook, comment here !

I don't keep any of your information, I only ask for a name, and an email to stop spammers!
Pretty please !! :)

Your email address will not be published. Required fields are marked *

You won't be notified of replies, so come back and visit again!

⇑ Top