DEV Community

Josh Kasuboski
Josh Kasuboski

Posted on • Originally published at joshkasuboski.com on

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.

Stats on the landing page

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.

Top comments (2)

Collapse
 
stephenwhitmore profile image
Stephen Whitmore • Edited

I like this idea for data that's public. I store notes publically in a GitHub repo and have been dancing around the idea of building a webapp that displays them for easier reading. They're all markdown files rather than json though.

Collapse
 
raghavmisra profile image
Raghav Misra

What you could do, is fetch the contents, use a parser such as remarkable to convert it to HTML and either serve it from a server, or set something's innerHTML! That's how I built a blog two years ago :D (I used this GitHub method too).