DEV Community

Josh Kasuboski
Josh Kasuboski

Posted on • Originally published at joshkasuboski.com on

9 6

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.

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

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).

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more