Serve a JSON API with GitHub

I wanted to add stats to a site, but I already capture them in a GitHub Repo. Let's just pull from there.

The Stats Repo

I made a repo that pulls in stats (kasuboski/stats). It uses a GitHub Action I made for a Dev.to Hackathon that pulls post stats from Dev.to.

The repo gets periodically updated with a stats/dev-to.json file. GitHub lets you browse the contents of files at raw.githubusercontent.com. In my case, this file is at https://raw.githubusercontent.com/kasuboski/stats/main/stats/dev-to.json.

Fetching the data

I have a landing page served from my Raspberry Pi Cluster. It was a placeholder with a link to my personal site. Now it also shows stats from my Dev.to posts.

The landing page itself is just vanilla HTML/CSS/JS. It uses mvp.css to get quick styles. You can find the code at kasuboski/joshcorp-site. The javascript needed to add the stats is below. It's just in a script tag in the body.

function getStats() { const stats = document.querySelector('#stats'); const reactions = document.querySelector('#reactions-value'); const views = document.querySelector('#views-value'); const url = 'https://raw.githubusercontent.com/kasuboski/stats/main/stats/dev-to.json'; fetch(url) .then(res => res.json()) .then(data => { console.log(data); reactions.innerText = data.public_reactions_count; views.innerText = data.page_views_count; stats.style.display = "block"; }) .catch(err => { console.error('Error fetching stats: ', err); }) } window.onload = getStats; 

I'm sure this probably isn't something GitHub exactly recommends… but as long as you don't have too much traffic it should be fine.