A tale by Caleb (@cjdenio)
The Mayhem website is a fully static site, built with Jekyll and hosted on GitHub Pages.
Except...
I didn't use GitHub Pages's native Jekyll support. 😱 This was mostly because I wanted to use Tailwind CSS (and also React, but more on that later). Instead, the site is built by a small GitHub Actions workflow that compiles everything and deploys to the gh-pages branch.
If you are running Windows: stop, install Ubuntu 22.04 under WSL, and install ruby (with rbenv), nvm, node >=20.
First, install the following:
Then, clone this repository using Git (I assume you already know how to do that)
Open your favorite terminal (or Command Prompt), and run these commands:
bundle install # Install Ruby dependencies, e.g. Jekyll
yarn install # Install Node dependencies, e.g. TailwindThen, run
./bin/dev
and visit http://localhost:4000!
⚠️ ./bin/dev DOESN'T WORK ON WINDOWS!!! Click here for Windows instructions
Your warranty will be voided by using Windows
Open 2 terminals (or Command Prompts), and run these 2 commands:
bundle exec jekyll serve
yarn build:css --watch
-
Pages are HTML files in
source/ -
The code for the Sponsors page is in
source/_data/sponsors.yml -
The navbar is in
source/_includes/header.html -
Images are in
source/assets/images/ -
The "Mayhem In Competition" entrypoint is in
source/assets/src/in-competition/main.js. (more on that in three seconds)
Finally! Some good stuff!
Mayhem In Competition, as I've decided to call it, is a widget that displays semi-real-time match results for events we're currently at.
Barring disaster, it shows up automatically during any event that we're attending.
It's built with React, Tailwind (like the rest of the site), and SWR for data fetching. It's powered by The Blue Alliance's API.
Compilation is handled by esbuild. See the build script here.