JEKYLL WITH REQUIRE.JS

21 Jul 2019

As i’m sure you know, Jekyll is an excellent static site generator with a prefect setup for blogging. This blog is built with Jekyll. It is writen in ruby, and the real star of the show is the liquid markup templating language.

Installation

Jekyll is a Ruby gem. You can use RubyGems cli command, gem, to install Jekyll:

gem install --user-install bundler jekyll

Basic Setup

Cool. Now Jekyll depends on a very strict file structure in order alot of it’s compiling to work correctly. It looks like this:

You will need to add other directories needed by hand. This post isn’t really meant to be a full on Jekyll tutorial, so I will refer you here to get you up and running.

Now, what I loved about Jekyll was it’s intelligent use of the file structure to make it easy to code every little bit of your app in it’s own file. I did this in two ways with the HTML, creating layouts and creating includes. Just put a html file inside of the _inlcudes folder and include it inside the layout like so:

{% include home.html %}

I created an index.html in the root directory and included all my sections like so:

Front Matter

The three lines at the top of the file are what Jekyll describes as ‘Front Matter’. It’s a basic yml syntax that tell Jekyll, you need to process this file with all your Jekyll magic. You can define variables, and parameters you can then use inside your Liquid markup. This is very useful for blog posts. Here is an example of a Jekyll post file’s front matter:

---
layout: post
title: "My Awesome Post"
date: 2019-05-29 12:44:11 +0000
permalink: my_awesome_post
excerpt_separator: <!--more-->
---
This is the first paragraph of my post! I can tell Jekyll which part I want to use an the excerpt by using the excerpt_seperator I defined about like so: <!--more-->
Now, everything after this will be the body of the post but won't be included in the excerpt.

Data

Jekyll is designed to be used without a database, obviously since it’s a static site generator, but you can put data to iterate over inside of .yml files inside the _data directory. Here is en example for my navigation links:

The liquid template language has tons of its own filters to apply to data inside these template tags. Here is an example where I used the index of the loop, with the forloop.index variable that comes free with liquid, to generate animation delay times for each element:

I am just scratching the surface of Liquid here, definitely read more here

Require.js

Ok, so I loved how all my files, scss and html were neatly seperated and included in the index file. I wanted this for me Javascript as well. There are a few ways to do this, Webpack being an obvious other choice, but I decided to go with Require.js. Here is how it works:

We are creating, in config.js, what require.js calls module IDs, so to easier define them when including them in other files. The baseUrl just lets require know where all of these files reside, my js directory tree looks like this:

As you can see, I have all of my vendor librarys in lib, and all of my custom made scripts in custom. I load everything into index.js like so:

(function(){define(["jquery","jqueryui","jquerymodal",'scrollAnimations','slick'],function($,$ui,modal,scrollAnimations,slick){// all of my logical code will now go here}})();

Now, as you can see, it told require.js which libraries I need to run the code inside this define block. I need almost everything, since this is the index, I only define what I actually would need for this block.

Ok, getting close. Now, I was only actually able to get this code to execute in the browser by adding this line to the html layout:

That’s what actually loads, and executes the code inside index. Now, all my js is conveniently seperated into different files to help keep my sanity when trouble shooting, which is the main reason I went down this road. But other benefits of require.js is it will optimize all your code, combine it into onw minified js file, for production. That process can be read about in more detail here.