Hosting a JSON API on GitHub Pages

GitHub Pages is an excellent place to host a site for your portfolio or a project, but another helpful use for it is to host JSON API data. Most of the time this isn’t necessary as you can make API calls to a server as you normally would, but there are limitations to that. API’s will typically limit your calls per day, only return a set amount of data, or even cost money to use. But say you have the downloaded JSON file with every data point you need and you just want to use that information for your project. All you would need to do is create a GitHub Pages repository, put that JSON file in there, and your custom URL will have all of that data. From there you make an API call to your GitHub Pages URL rather than the API server. I’ll outline these steps below:

The first thing you’ll need to do is create a GitHub Pages repository so head on over to GitHub and create one called username.github.io, where username is your GitHub username. Make sure that it matches your username or it won’t work!

Creating a new GitHub Pages repository.

As you can see, I’ve already made a GitHub Pages repository but if you haven’t, your custom name will be available. Once that’s been made, head on over to your terminal and clone that repository into a directory of your choosing.

Cloning your repository to your computer.

Once it’s been cloned to your computer, enter the project folder.

Entering the project folder.

Then add an index.html with a standard “Hello World” message so that you can see it in your browser.

Creating an index.html with “Hello World”.

Add, commit, and push your changes!

Adding, committing, and pushing changes to GitHub.

After that, open up your browser and go to username.github.io to see the text from your index.html file!

Now comes the fun part! Create a new folder within your project (I called mine Data) and put your JSON file in it.

Head back on over to your browser and go to your URL with the file path to the data added to it.

Now you have a publicly hosted API! To access this information in your back end all you need to do is make an API call like you normally would, parse that data, then iterate through it to seed your database.

My information was from NYC Open Data in the form of a massive GeoJSON file with just shy of 37,000 data points. Their API limited me to 1,000 so this was the route I had to take!

Source: https://pages.github.com/