didillinois.win post
This commit is contained in:
167
content/post/20211218-didillinoiswin/index.md
Normal file
167
content/post/20211218-didillinoiswin/index.md
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
+++
|
||||||
|
title = "Design of https://didillinois.win"
|
||||||
|
date = 2021-12-18T00:00:00
|
||||||
|
lastmod = 2021-12-18T00:00:00
|
||||||
|
draft = false
|
||||||
|
|
||||||
|
# Authors. Comma separated list, e.g. `["Bob Smith", "David Jones"]`.
|
||||||
|
authors = ["Carl Pearson"]
|
||||||
|
|
||||||
|
tags = []
|
||||||
|
|
||||||
|
summary = "Design of a static site with GNU Makefiles and pandoc"
|
||||||
|
|
||||||
|
# Projects (optional).
|
||||||
|
# Associate this post with one or more of your projects.
|
||||||
|
# Simply enter your project's folder or file name without extension.
|
||||||
|
# E.g. `projects = ["deep-learning"]` references
|
||||||
|
# `content/project/deep-learning/index.md`.
|
||||||
|
# Otherwise, set `projects = []`.
|
||||||
|
projects = []
|
||||||
|
|
||||||
|
# Featured image
|
||||||
|
# To use, add an image named `featured.jpg/png` to your project's folder.
|
||||||
|
[image]
|
||||||
|
# Caption (optional)
|
||||||
|
caption = ""
|
||||||
|
|
||||||
|
# Focal point (optional)
|
||||||
|
# Options: Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
|
||||||
|
focal_point = "Center"
|
||||||
|
|
||||||
|
# Show image only in page previews?
|
||||||
|
preview_only = true
|
||||||
|
|
||||||
|
|
||||||
|
categories = []
|
||||||
|
|
||||||
|
# Set captions for image gallery.
|
||||||
|
|
||||||
|
|
||||||
|
+++
|
||||||
|
|
||||||
|
Introducing https://didillinois.win, a static site with some Illinois sports updates.
|
||||||
|
|
||||||
|
[Did Illinois Win](https://didillinois.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
|
||||||
|
|
||||||
|
## Objectives
|
||||||
|
|
||||||
|
The content on the site changes infrequently and is relatively simple.
|
||||||
|
I settled on a static site, which also makes it much easier to
|
||||||
|
* load quickly
|
||||||
|
* display well on mobile and desktop
|
||||||
|
* not require any javascript (I've never written any javascript before)
|
||||||
|
|
||||||
|
## Implementation (on [github](https://github.com/cwpearson/didillinoiswin))
|
||||||
|
|
||||||
|
Each table is defined in a separate markdown file that looks something like this:
|
||||||
|
|
||||||
|
```md
|
||||||
|
---
|
||||||
|
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](http://pandoc.org) ("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:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<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...
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!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:
|
||||||
|
|
||||||
|
```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, which are organized hierarchically into a table of `row` and `column`.
|
||||||
|
A bit of CSS is used to handle the responsive layout of those divs.
|
||||||
|
|
||||||
|
## Hosting
|
||||||
|
|
||||||
|
I chose to host on Netlify.
|
||||||
|
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.
|
||||||
|
|
||||||
|
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](https://docs.netlify.com/domains-https/custom-domains/configure-external-dns/) for how to configure the external DNS (more on that below).
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 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. |
|
||||||
Reference in New Issue
Block a user