Next & Previous

An 11ty blog for my NFL Fantasy league

I love fantasy football. This is my third season playing NFL fantasy, having been watching the NFL regularly since 2015 (‘All Or Nothing: Arizona Cardinals’ is to blame).

Some might not want to admit this but fantasy football is LARPing. You are role-playing as a Head Coach/General Manager. It’s dress up. And the way I engage with that is to make websites and write articles 😎

Check out The Pigskin Chronicle:

Screenshot of the Pigskin Chronicle site showing team profiles

What’s 11ty

11ty (“eleventy”) is a static site generator. It reads in markdown and/or one or more HTML templates, and outputs a compiled HTML site.

You can use a templating language like Nunjucks or Liquid within your markdown or HTML to create dynamic data-driven features, like I’ve done for the team profiles.(Actually, it supports loads of templating languages including Pug, Handlebars, and even plain JavaScript functions!)

11ty is JavaScript based, and in its config file, you can add functions to extend it with whatever extra features and rendering magic you want. Plus, there are loads of add-ons.

I like simplicity, so The Pigskin Chronicle has only one template, and cuts corners wherever possible 😊

On Glitch

I hosted the site on Glitch because:

🎏 View the source of TPC on Glitch

Team Profiles Data

This year we’re a new league, and not everybody knows each other. As a huge ENFP, I wanted to help everyone get to know each other.

I sent out a Google Form to all of the contestants, and connected it to a Google Sheet. A sheet connected to a form gets this special purple forms icon:

Screenshot of the bottom bar of Google Sheets showing four sheets, where the first has a purple icon and is called Input

And the received data looks like this:

Screenshot of Google Sheets showing some data received from Google Forms submissions

The data needed tidying up, so I made a second sheet, Managers, with nicer column headings and flash-filled it with the content from the Input sheet, then manually overwrote some cells to change, for example, “4” to “4th season”.

Now I needed this as JSON. After looking briefly in the extensions store, I decided to roll my own poor man’s JSON serializer using a formula.

The JSON template lives on the third sheet, JSON, and just has this content in cell A1:

{"TeamName":"{TEAMNAME}", "RealName":"{REALNAME}", "Connection": "{CONNECTION}", "Supports":"{SUPPORTS}", "FanFor":"{FANFOR}", "FanSeason":"{FANSEASON}", "Fact":"{FACT}", "Other":"{OTHER}"},

…then I added a “JSON” column on the Managers sheet with this formula:


A little long-winded but not that hard really. It replaces each brace-enclosed term from the static JSON template with the value of the corresponding cell.

Screenshot of Google Sheets showing the formatted data and JSON output column

Now I can copy the JSON column and paste it into a file in the site. 11ty lets us put data almost anywhere, but by default, anything in a JS file in the /_data directory is global, so I just created an array in there and dumped my content.

11ty hot tips

Mark all your posts as post by default

A lot of the blog tutorials tell you to put frontmatter on each post to tell it that it’s a post. Case in point: the official blog example. Seems like a waste of time to me…?

Perhaps one of the more complex aspects of 11ty is the “data cascade”, which is a system where one piece of data can take precedence over another. For example, a tag on a specific post beats the tag set by default in the directory, beats a tag set globally in /_data (if there was one).

Using directory data files, like /posts/posts.json you can set defaults for everything in the folder. I did this to tag everything in /posts with the post tag, and with the default layout (come to think of it, I should move the default template to global level…)

Do an excerpt

Excerpts are kind of tricky in Nunjucks but dead simple in Liquid. It turned out my Markdown templates are using Liquid by default. An item’s content is stored in templateContent, so rendering an excerpt with Liquid goes like this:

{{ post.templateContent | strip_html | truncate:100 }}

Write simply

I’ll admit that the pages which render lists and loops get a little complex as they mix Markdown, Liquid, and HTML (for styling) - though I could (and should) have extracted my “card” component into its own reusable macro; something which 11ty totally supports.

On the flip side, writing blog posts is extravagantly simple. If you’ve worked with Markdown you’ll know that most of the time, it’s just a plain text file:

title: Draft Report 2022
date: 2022-09-01

The draft room was thick with the aroma of pizza and the tension of coiled banter, ready to be sprung upon unsuspecting peers. 

As such, the barrier for entry for someone to add an article later is pretty low 👍


Briefly:- I used Tachyons for styling, as is my habit, with some nice defaults like wrapping everything in measure-wide. HTML is responsive by default and I just add some common sense styles to not break that. Being a single-column layout makes it pretty easy. Do a traditional View Source (Ctrl+U) on to see what I mean.

I acquired the AllPro font a few years ago to make my first Angular test project, an NFL schedule generator of sorts and rolled it out again here for headlines to make it look football-y.

Finishing up

This has been my hobby project for the last couple of weeks. ‘Perfect’ is the enemy of ‘done’, so for now it is pretty spartan. This is a blog I look forward to expanding, certainly over this coming football season, and perhaps into future years?? (Already dreaming up the JSON scheme for marking teams ‘defunct’, adding colour-coding, shortcodes, hmmm…)

Peace 🏈