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 Hey- I created an "extension" for my Discord bot, that constantly (~5 minutes) pings Minecraft servers, and logs their response containing: 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 Every 5 minutes, the container goes through another table containing the IPs of all servers I want to track. Currently I am tracking: All data that I have gotten thus far is HERE, in CSV format. (This file comes at about 1.9 MB) See ya later!
where the rendered Markdown will be placed, and
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:id ip recorded_timestamp date time ping players_online online 32181 hypixel.net 2023-09-04 10:53:40 2023-09-04 10:53:40 139 90924 1
AlphaGameDeveloper and My website, hosted on GitHub pages! 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
```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.
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.
Site last updated: 2024-05-01 17:11:27 +0000