Jekyll The New Way To Website

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

Layouts are simple HTML templates, with placeholders like

Hey-

I created an "extension" for my Discord bot, that constantly (~5 minutes) pings Minecraft servers, and logs their response containing:

  • Ping
  • Players online
  • Online status

After quite some time, I even got it working with Hypixel, which was very difficult. After it running for about 2 - 3 weeks, I can say that it works perfectly / hasn't crashed yet. Here is some data that it has accumulated by now. The goal for this is to have a set of data, available on my Discord bot, and also data to answer questions like "When is Hypixel most active?", which, in the 5 hours it is active, the data is:

idiprecorded_timestampdatetimepingplayers_onlineonline
32181hypixel.net2023-09-04 10:53:402023-09-0410:53:40139909241
Most active Hypixel time thus far (the last value is just a boolean for if the server is on, i.e. responded to the requests)

Every 5 minutes, the container goes through another table containing the IPs of all servers I want to track. Currently I am tracking:

  • Hypixel.net
  • Minemen.club
  • Minehut.com
  • og-network.net
  • Mineplex.com
  • mc.ltt.gg
  • PurplePrison.net

All data that I have gotten thus far is HERE, in CSV format. (This file comes at about 1.9 MB)

See ya later!

  • Damien B.
where the rendered Markdown will be placed, and AlphaGameDeveloper and My website, hosted on GitHub pages! are set in your site's _config.yml file.

Themes

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.

Get Started

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.html

These files are made from the selected layout, along with given variables. They can be given via the Markdown code as such

```markdown
---
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 Jekyll The New Way To Website would return "My cool webpage". It also has built-in SCSS/SASS transpiling in your _scss folder.

Conclusion

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,

References

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 files

Completed 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 files

If 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,

Sources


Website copyright © Damien Boisvert (AlphaGameDeveloper) 2024. Some rights reserved.

Site last updated: 2024-02-15 04:08:53 +0000

This site (and it's content) is licensed under the terms of the Creative Commons Attribution 4.0 International license. Click here for more information.