The essentialist developer, part one
Over the last 5 months, I have published well over 100 articles. Now that I have enough content, it's time to build my new site. I decided to stick with using Jekyll, as it's pretty powerful and will let me do all of the things I have in mind at the moment for my new site.
I'm going to document the whole process for building my new site.
Setup blank Jekyll Site.
mkdir the-essentialish-developer && cd the-essentialist-developer
git init
bundle init
vim Gemfile
Add the following line to the end of the Gemfile, to enable jekyll on my project:
gem "jekyll"
bundle
I use the Gitmoji command-line client to write commit messages. It lets you add an emoji to the start of your commit message (you can add them yourself, but I like that this provides a searchable list of emojis attached to meanings for consistent commit message types). I follow an imperative style with my commit messages "Do this so that".
vim index.html
Add "Hello World!" to the index
bundle exec jekyll serve
vim .gitignore
Add following to .gitignore:
_site/
.jekyll-cache/
.jekyll-metadata
Setup node-sass
npm install node-sass --save-dev
npm init
echo node_modules << .gitignore
mkdir sass && cd sass
touch main.scss
Add following script to "scripts" section of the package.json file, so that my sass files automatically compile on every sass file save after running the "sass-watch" command in the terminal (npm run sass-watch)."
"sass-watch": "node-sass sass/main.scss css/style.css -w"
In root directory add place to automatically compile CSS code:
mkdir css && cd css && touch style.css
Then add css directory to .gitignore file so that it can't be committed (as it will be automatically generated from the sass files.
echo css/ << .gitignore
Setup accessibility test git hooks (can't commit without passing accessibility tests
Full article on how I did this here
That's the initial setup (Yak Shaving) done. Next step is to create a default layout for each of my pages (boilerplate html with metadata)
Boilerplate HTML (default layout) for Jekyll pages
Create a folder called "_layouts" and add a file to that folder called "default.html". Inside that file, include the following code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="author" content="Rebecca Williams"> <meta name="description" content=""> <meta property="og:image" content="/assets/images/og-images/"> <meta property="og:description" content=" "> <meta property="og:title" content="The essentialist developer, part one"> <title>The essentialist developer, part one</title> <link rel="stylesheet" href="style.css"> </head> <body>
![]()
A Live Developer Journal
![]()
Exploring Liquid templating language
Liquid is a templating language which I am exploring to figure out how to make my static website appear to be more dynamic.
All liquid code can be categorised into 'objects', 'tags' and 'filters'. Objects tell liquid where to display content on the page:
{{ page.title }}
. Tags create the logic and control flow for templates{% ... %}
. Tags can be categorised into: Control flow, iteraton and variable assignments. Filters change the output of a Liquid object{{ "world!" | capitalize | prepend: "Hello, " }}
. Multiple filters can be used on one output, and they are applied from left to right.Operators
- == equals
- != does not equal
- > greater than
- < less than
- >= greater than or equal to
- <= less than or equal to
- or logical or
- and logical and
{% if product.type == "Shirt" or product.type == "Shoes" %} This is a shirt or a pair of shoes. {% endif %}
Contains
Checks for the presense of a substring inside a string, or the presence of a string in an array of strings. It can only search strings.
{% if product.tags contains "Hello" %} This product has been tagged with "Hello". {% endif %}
Truthy or falsy
{% if happy %} Happy and you know it! {% endif %}
Even empty strings are truthy.
Types
You can initialize Liquid variables using the assign (creates a new variable) or capture (captures string inside of opening and closing tags and assigns it to a variable) tags.
- String:"This is a string"
- Number:25, 39.756
- Boolean:true, false
- Nil: empty value returned when Liquid code has no results.
- Array: holds a list of variables of any type.
You can access items in an array using iteration tags:
<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" --> {% for user in site.users %} {{ user }} {% endfor %}
You can use bracket notation to access items in an array:
{{ site.users[0] }} {{ site.users[1] }} {{ site.users[2] }}
You can't initialize arrays in Liquid, but you can use the split filter to break a string into an array of substrings.
Whitespace control
Use a hyphen to remove white space before or after strings (or both):
{%- -%}
Tags
Comments
Anything you put between {% comment %} and {% endcomment %} tags is turned into a comment.
Control flow
If
{% if product.title == "Awesome Shoes" %} These shoes are awesome! {% endif %}
Unless
{% unless product.title == "Awesome Shoes" %} These shoes are not awesome. {% endunless %}
elseif/else
{% if customer.name == "kevin" %} Hey Kevin! {% elsif customer.name == "anonymous" %} Hey Anonymous! {% else %} Hi Stranger! {% endif %}
case/when
{% assign handle = "cake" %} {% case handle %} {% when "cake" %} This is a cake {% when "cookie" %} This is a cookie {% else %} This is not a cake nor a cookie {% endcase %}
Iteration
For
{% for product in collection.products %} {{ product.title }} {% endfor %}
Else
{% for product in collection.products %} {{ product.title }} {% else %} The collection is empty. {% endfor %}
Break
{% for i in (1..5) %} {% if i == 4 %} {% break %} {% else %} {{ i }} {% endif %} {% endfor %}
Continue
{% for i in (1..5) %} {% if i == 4 %} {% continue %} {% else %} {{ i }} {% endif %} {% endfor %}
For loop parameters
- Limit: {% for item in array limit:2 %}
- Offset: {% for item in array offset:2 %}
- Range: {% for i in (3..5) %}
- Reversed: {% for item in array reversed %}
Cycle
{% cycle "one", "two", "three" %} {% cycle "one", "two", "three" %} {% cycle "one", "two", "three" %} {% cycle "one", "two", "three" %} output: one two three one
Cycles can be used to apply odd/even classes to rows in a table. You can also use them to apply a unique class to the last product thumbnail in a row etc.
Tablerow
<table> {% tablerow product in collection.products %} {{ product.title }} {% endtablerow %} </table> OUTPUT: <table> <tr class="row1"> <td class="col1"> Cool Shirt </td> <td class="col2"> Alien Poster </td> <td class="col3"> Batman Poster </td> <td class="col4"> Bullseye Shirt </td> <td class="col5"> Another Classic Vinyl </td> <td class="col6"> Awesome Jeans </td> </tr> </table>
Table row parameters:
- cols: {% tablerow product in collection.products cols:2 %}
- limit: {% tablerow product in collection.products limit: 2 %}
- offset: {% tablerow product in collection.products offset: 2 %}
Variables
You can initialize Liquid variables using the assign (creates a new variable) or capture (captures string inside of opening and closing tags and assigns it to a variable) tags.
Increment
{% increment my_counter %}
{% increment my_counter %}
{% increment my_counter %}
OUTPUT:
0
1
2
Decrement
{% decrement variable %}
{% decrement variable %}
{% decrement variable %}
OUTPUT:
-1
-2
-3