Introducing https://didillinois.win, a static site with some Illinois sports updates.
Did Illinois Win is a static site that shows an overview of the current season for each of the University of Illinois sports that I follow. The source for the website is available here
The content on the site changes infrequently and is relatively simple. I settled on a static site, which also makes it much easier to
Each table is defined in a separate markdown file that looks something like this:
---
title: "2021 Football"
result: "yes"
---
| Date | Opponent | Result |
|-|-|-|
| 11/27/2021 | vs Northwestern | [W 47-14](https://www.espn.com/college-football/game/_/gameId/401282722) |
| 11/20/2021 | at Iowa | [L 23-33](https://www.espn.com/college-football/game/_/gameId/401282721) |
...
The first part of the file is the "frontmatter", which defines the title and the result that are floating above the table. The rest is just a markdown table with a column for the game date, the opponent, and the result. These files are updated manually by the site administrator (me) and then converted to HTML using Pandoc ("a universal document converter").
pandoc --template static/template.html input.md -o output.html
--template static/template.html: this argument specifies the template file (more on that below)input.md: this positional argument specifies the markdown file to convert-o: this specifies the output HTML file.The template file looks likes this:
<h1 class="sport">$title$</h1>
<h1 class="$result$">$result$</h1>
<!-- put the table in a div so we can center with CSS -->
<div align="center">
$body$
</div>
$title$ and $result$: the text from the markdown frontmatter is subsituted in these fields.$body$: the rest of the markdown content is substituted here after being transformed.This produces a fragment (not a complete webpage) of HTML for each of the sports. These fragments are combined with an HTML header fragment...
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Find out if Illinois NCAA athletics won">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Did Illinois Win?</title>
<link rel="stylesheet" href="style.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-WQY4PM3M68"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-WQY4PM3M68');
</script>
</head>
...and stitched into a webpage using bash:
cat header.html > index.html
echo "<div class="row">" >> index.html
echo "<div class="column">" >> index.html
cat basketball.html >> index.html
echo "</div>" >> index.html
echo "<div class="column">" >> index.html
cat football.html >> index.html
echo "</div>" >> index.html
echo "</div>" >> index.html
echo "<div class="row">" >> index.html
echo "<div class="column">" >> index.html
cat volleyball.html >> index.html
echo "</div>" >> index.html
echo "</div>" >> index.html
The combind result is that each sport's HTML fragment is put into its own div.
The divs are organized into a table of row and column.
A bit of CSS is used to handle the responsive layout of the divs wrapping the sports.
I chose to host on Netlify.
Instead of creating an index.html file and uploading it, Netlify can run some automated steps every time there is a push to a github repository.
I automated the generation of the website from the markdown files using GNU Make.
Then, on Netlify under "Site Settings" > "Build and Deploy", I specified make as the build command.
Netlify will clone the repository every time I push a modification to the markdown files, run make to produce index.html, and serve that as the site.
As of this writing, Netlify provides 100GB bandwidth and 300 build minutes, which is more than sufficient for a 0-traffic small static website. Netlify provides instructions for how to configure the external DNS.
I purchased the didillinois.win domain from Google.
I then had to aim the domain at where the site was hosted on Netlify:
| Host Name | Type | TTL | Data | |-|-|-|-| | didillinois.win | A | 1 hour | 104.198.14.52 | | www.didillinois.win |CNAME | 1 hour | didillinoiswin.netlify.app. |