GitHub: Hosting a free Static Site (College Football Scoreboard Edition)

In a past post, I showed you how to set up and host static websites for free using Azure Static Web Apps with GitHub automation. This time, let’s take a look at another free option: hosting a static site directly on GitHub Pages.

And since college football season is kicking off, let’s build a simple College Football Scoreboard that pulls live scores from the ESPN open API. You can keep this page open on a monitor or TV during game days to stay updated in real time.

I’ll cover:

Setting up a GitHub repository to host your static site.
Uploading the necessary files (HTML, JSON, and a custom 404).
Connecting a custom domain.
Enabling HTTPS and a few extra best practices.

Let’s do this!

What You’ll Need

A GitHub account (free is fine).
An optional custom domain (I’ll show you how to connect one).
If you want to keep your repo private while still publishing the site, you’ll need GitHub Pro ($48/year).

Step 1: Create Your Repository

Create a new GitHub repository that will host your site files.

For this example, I named mine: daves-collegefootball-scores

I’m keeping the repo Public for simplicity and so you can retrieve my files easily if needed. You can make it private if you’re on GitHub Pro, but note that free accounts can only publish Pages from public repos.

Step 2: Add Your Files

Next, upload or create a few basic files in your repo.

Custom 404 File
GitHub will display a default 404 page if a user goes to a missing route. Adding your own 404.html lets you customize this page.

				
					<!DOCTYPE html>
<html>
<body style="background-color:#1560BD;">
<br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
<h1 style="text-align:center;"><span style="color: rgb(255, 255, 255);"><br></span></h1><h1 style="text-align:center;" id="isPasted"><span style="color: rgb(255, 255, 255);"><strong><span style="font-size: 96px;">404 ERROR</span></strong></span></h1><p 

style="text-align:center;"><span style="color: rgb(255, 255, 255);">&nbsp;</span></p><h2 style="text-align:center;"><span style="color: rgb(255, 255, 255);"><strong><span style="font-size: 62px;"></span></strong></span></h2><p style="text-align:center;"><span style="font-size: 62px; color: rgb(255, 255, 255);">&nbsp;</span></p>

<h2 style="text-align:center;"><strong><span style="font-size: 32px; color: rgb(255, 255, 255);">Looks like your team lost. This page is no longer available.</span></strong></h2><p><br></p>

</body>
</html>

The page is basic, and will look something like this:

2 . JSON Routing File
A simple 404.json helps define how missing routes should be handled. This is what sends folks to your 404 page above if the URL doesn’t exist.

				
					 {       
    "responseOverrides": {
      "404": {
        "rewrite": "/404.html"
      }
    }
 }

3. Scoreboard Page
The main file will be the index.html for our College Football Scoreboard page. You can tweak the design, colors, and layout however you’d like.

You can copy or download the current code from my GitHub page:

Site & Code Overview - Click to Expand

The file is a self-contained live college football scoreboard web app. It fetches live game data from ESPN’s public API and displays it in a styled, responsive grid. The scoreboard includes search, filtering, and auto-refresh features.

Structure

Head

Metadata: Title set to “Dave’s Live College Football Scores”, with viewport for responsiveness.
CSS Styling:
- Defines a dark theme using CSS custom properties (--bg, --card, --text, etc.).
- Styles layout (cards, headers, toolbar, search box, games grid).
- Special styles for status indicators: live (red), final (green), scheduled (gray).
- Responsive design with a single-column layout on small screens.

Body

Wrapper (.wrap)
- Header (.header)
  - Title and subtitle (Created by Dave Herrell).
  - Toolbar with:
    - “Auto refresh” chip
    - Search bar (with search icon, input box, and clear button)
    - “Last updated” timestamp.
- Main (#content)
  - Placeholder showing “Loading live scores…” until API data loads.

JavaScript

Located inline at the bottom of the file:

Data Fetching
- Calls ESPN’s API:
  
  https://site.api.espn.com/apis/site/v2/sports/football/college-football/scoreboard
- Refreshes every 30 seconds (only when the tab is visible).
Rendering
- Displays each game as a card with:
  - Status (Final, Live, Scheduled, Halftime, etc.)
  - Broadcast info (Such as ESPN, ABC)
  - Team names and scores
  - Venue and game details.
Filtering / Search
- Users can type in the search bar to filter games by:
  - Team (name, short name, or abbreviation)
  - Venue
  - Broadcast network.
- URL query parameter ?q= is supported for prefilled searches.
- Pressing / focuses the search box.
Error Handling
- If API call fails, displays:
  “⚠️ Failed to load scores. Please check your connection and try again.”
Timestamp
- Displays the last time data was updated.

Features

Auto-refresh every 30 seconds.
Client-side search with instant filtering.
Mobile-friendly design.
Game status badges (Live, Final, Scheduled).
Error resilience (fallback message if API fails).

In summary: This file is a standalone, styled, real-time college football scoreboard app powered by ESPN’s API, with search, filtering, and auto-refresh functionality.

At this point, your repo should have these files:

404.html
404.json
index.html (your scoreboard)

Step 3: Configure GitHub Pages

Now let’s publish the site.

Go to your repo Settings → Pages (under Code and Automation).
Under Branch, select main and choose / (root) as the folder.
Click Save.

GitHub will now generate a live site URL (something like username.github.io/repo-name).

Step 4: Add your Custom Domain

For this example, I’m using: davesfootballscores.site (Domain is $2 from Namecheap, cheap to renew).

In the GitHub Pages settings, enter your domain and click Save.

DNS Records to Add

Add the following A Records in your DNS provider:

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

For www, create a CNAME record pointing to:

<yourusername>.github.io, for example, mine will be: it-dherrell.github.io

DNS propagation may take a few minutes to several hours, depending on your provider. Once confirmed, GitHub automatically provisions an SSL certificate, free of charge.

GitHub will also create a CNAME file in your repo. Do not delete this; it tells GitHub what custom domain your site should use.

Step 5: Best Practices

A few recommendations to finish strong:

Use Cloudflare for DNS (free tier is enough). It provides better caching, faster performance, and extra security.
Enable HTTPS Enforcement in GitHub Pages. This option shows up once your domain is fully confirmed. (Or enforce HTTPS via Cloudflare.)
Keep updates simple: just push changes to your repo, GitHub redeploys in about 1–2 minutes.
Review the Analytics: Sign up for a free Google Analytics account and place the web code on your page to track site visits to your college football scoreboard.

Game overview:

That’s it! You now have a live College Football Scoreboard hosted on GitHub Pages, connected to a custom domain, and secured with SSL, all at zero cost (other than the optional $2 domain).

To update your site, commit changes to the repo, and GitHub takes care of the rest.

Hope this helps you set up your static site, or even your scoreboard, for game day! 🏈

I hope you found this helpful!

August 19, 2025 Dave Herrell

GitHub

Dave Herrell