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 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 | sudo apt-key add -

and add to our packages sources.list:

cat << EOF >> /etc/apt/sources.list
deb stretch main
deb-src stretch main

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

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
        - node_modules
        - assets/css
exclude: []

default.html Layout

Lets create a pretty simple starter default layout:

cat << EOF > _layouts/default.html
<html lang="en">
	<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">

		{{ 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>

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

cat << EOF > assets/css/main.scss

@import "bootstrap/scss/bootstrap";


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

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=

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";

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

finally, in your _layouts/default.html replace the css line with:

{% capture styles %}
    {% include main.css %}
    {% endcapture %}
    {{ styles | scssify }}

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

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
        - node_modules
        - assets/css
    style: compressed
exclude: []

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

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=
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

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 ./ -b && ./ -s


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

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

$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.
$SCRIPT_NAME [single option]

 -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
    $NPM update
    $NPM install
    cp node_modules/jquery/dist/jquery.min.js $VENDOR_DIR
    cp node_modules/jquery/dist/ $VENDOR_DIR
    cp node_modules/popper.js/dist/umd/popper.min.js $VENDOR_DIR
    cp node_modules/popper.js/dist/umd/ $VENDOR_DIR
    cp node_modules/bootstrap/dist/js/bootstrap.min.js $VENDOR_DIR
    cp node_modules/bootstrap/dist/js/ $VENDOR_DIR 

BuildBundledJS() {
    cat $VENDOR_DIR/jquery.min.js <(echo) $VENDOR_DIR/popper.min.js <(echo) $VENDOR_DIR/bootstrap.min.js <(echo) > $JSBUNDLE_DIR/bundle.js

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

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

case $1 in 

And here’s the video


Techturbid admin

Hey bro, nicely done! I wanted something more technical to read about Jekyll and all I found was the easiest steps using themes that I would probably have to pay. I dont know much about dev in general, all my skills are from infrastructure and linux areas but it is always good to know how to make a simple website without having to use Wordpress or other huge cms that I wont use all the tools. Thanks for taking your time and document the process, this means a lot for people like you and me.


As a follow up. After upgrading to Debian Buster Jekyll stopped working on my dev machine. I wrestled with Ruby for a while, then decided I would follow this “how to” but instead start with a dead clean install of Debian Buster, then install Jekyll, etc etc etc . Everything worked!
So this how to still work from a clean Buster install


hi, i have a problem with the node_modules path : i got this error in my console

[2020-11-18 16:11:48] ERROR /node_modules/jquery/dist/jquery.min.js' not found. [2020-11-18 16:11:48] ERROR /node_modules/popper.js/dist/umd/popper.min.js’ not found.

Any help please ?


Hi mery, I’m guessing that you have this Jekyll site in a subdirectory? as the code in this example is refering to absolute URLs (i.e. /node_modules/ not node_modules/ )

Two things could fix this:

  • Set your baseurl in _config.yml
    cat _config.yml | grep baseurl
    baseurl: /


  • Remove the leading / from the default.html Layout

Leave a Comment

Liked what you've read?

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

It only takes 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
🏠 Home