Static web pages -- We know them, we love them. (Most of us.). If you have used GitHub pages, some file server like the ones at universities, you've (most likely) used one. They are great, because they don't use many resources in the backend. All they really do is regurgitate a file hosted on the server. They can be great to code individually, not they're not perfect. Not by a long shot. Not until Jekyll comes around!
Jekyll changes this by having a utility to generate these pages beforehand, so you can use all the Liquid / Jinja2 features that you want, but the site is built in the backend, creating static HTML files that can be served via jekyll serve or any other static file server like Nginx or Apache. I started a site for my Improv club at school, and it was really easy and lightweight to run. It can also run in the background (or via GitHub actions) and automatically rebuild your site whenever a file changes!
Jekyll uses a templating language called Liquid, created by Shopify. (I didn't see that coming, either! I thought I misspelled when I saw that!) and allows you to make HTML templates (called layouts or themes). However, don't get layouts and themes mixed up, as they are two entirely different things.
Layouts are simple HTML templates, with placeholders like {{content}} where the rendered Markdown will be placed, and {{site.title}} and {{site.description}} are set in your site's _config.yml file.
Themes are distributed as Ruby Gem packages, and they are just like layouts, but to my knowledge, (I don't know Ruby), they can actually run Ruby code during jekyll build, making them more capable than layouts, but I never bothered to learn it. Layouts always worked for me.
Starting a new Jekyll site is easy, just do jekyll new . (for a more complete site to get started with, along with the default Minima theme, or jekyll new --blank . for one without themes or their associated gems. This is best for layouts, which are in the _layouts folder. You can then run a web server via Jekyll directly via jekyll serve, and the generated site is placed in the _site folder, where the generated files look like your joe static file site.
.
├── 404.html
├── about.html
├── assets
│ ├── css
│ │ ├── main.css
│ │ └── main.css.map
│ └── main.css
├── index.html
├── members.html
└── signup.htmlThese files are made from the selected layout, along with given variables. They can be given via the Markdown code as such
---
title: My cool webpage
layout: default
permalink: /awesome
---
# Hello
I feel good today!
The values between the --- are the properties that can be accessed like {{ page.title }} would return "My cool webpage". It also has built-in SCSS/SASS transpiling in your _scss folder.
All of these reasons make it an amazing solution for sites like GitHub pages with GitHub actions!
I like to make templates, so I will eventually make a page with downloads, or eventually making themes.
Cheers,
Jekyll file structure (jekyll new --blank .)
.
├── assets
│ └── css
│ └── main.scss
├── _config.yml
├── _data
├── _drafts
├── _includes
├── index.md
├── _layouts
│ └── default.html
├── _posts
└── _sass
└── base.scss
8 directories, 5 filesCompleted Jekyll site (jekyll new --blank .) for my Improv club at school
.
├── 404.md
├── about.md
├── assets
│ ├── css
│ │ └── main.scss
│ └── main.css
├── _config.yml
├── _data
│ ├── motd.yml
│ └── nav.yml
├── _drafts
├── getstarted.md
├── _includes
├── index.md
├── _layouts
│ └── default.html
├── members.md
├── _posts
├── _sass
│ └── base.scss
└── _site
├── 404.html
├── about.html
├── assets
│ ├── css
│ │ ├── main.css
│ │ └── main.css.map
│ └── main.css
├── index.html
├── members.html
└── signup.html
11 directories, 20 filesIf you wish, you may see the Improv site that I made at improv.alphagame.dev. It is made using Jekyll (with --blank, and using a custom theme that I made.)
Cheers,
Website copyright © Damien Boisvert (AlphaGameDeveloper) 2024. Some rights reserved.
The site was last updated on: 11/13/2024