Global Static Json API on GitHub Pages

Host read-only API on your GitHub pages

Mohammad Mahmudul Hasan
3 min readJul 25, 2022

GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub.

A static json API could be hosted on a GitHub pages, so you wouldn’t need much maintenance to keep the thing running, even if the underlying data needed to change. But the big downside is it’s only support GET request. Let‘s get started.

Create a repository

If you don’t have your GitHub account yet, please create one.

Go to GitHub and create a new public repository named username.github.io, where username is your username (or organization name) on GitHub.

If the first part of the repository doesn’t exactly match your username, it won’t work, so make sure to get it right.

Create Repository

In this demo I have already created a repository using the username(emraz). So my repository name is emraz.github.io.

Clone the repository

Now it’s time to clone the repository. For this tutorial I have used Terminal. You can use anything, GitHub Desktop, Sourcetree etc. whatever you like.

Go to the folder where you want to store your project, and clone the new repository:

git clone https://github.com/username/username.github.io

For this tutorial:

git clone https://github.com/emraz/emraz.github.io

Host API files to repository

There are two different way you can insert your desire file to the repository:

  1. Add locally and push
  2. Add directly using browser

Add locally and push

After cloning the repository go to the project folder:

cd username.github.ioFor this tutorial
cd emraz.github.io

And add your desire file. You can create folder inside the project folder to organize your API files if there is many.

Now it’s time to push. Add, commit, and push your changes:

git add — all
git commit -m “Initial commit”
git push -u origin main

And you’re done! Now you can access the API using this link:

https://username.github.io/jsonfile.json

For this tutorial I have added config.json file. So the link is:

https://emraz.github.io/config.json

Note: It takes some minutes to bring the changes in live. So as soon you push, maybe your link doesn’t work. Just wait for some minutes and try.

Add directly using browser

You can open the repository in a browser and add files by choosing anyone option below:

  1. Create new file
  2. Upload files
Add API Using Browser

Create new file

You can create a file here. Copy paste from any other sources or write the Json content here. Don’t forget to give a name your file. Finally commit the changes.

Create New File

Upload files

If you have exiting file, you can simply upload by using the Upload files option. Simply drag and drop or browse your desire file to upload. And then commit the changes.

Upload Files

And that’s all! Now you can access the API using the link below:

https://username.github.io/jsonfile.json

For this tutorial I have added config.json file. So the link is:

https://emraz.github.io/config.json

So far that’s all about hosting your Json API to GitHub pages. Thank you for reading. Happy coding :)

Ref: https://pages.github.com/

--

--

Mohammad Mahmudul Hasan

A learner, constantly striving to learn new technologies and look the ways to be better in this rapidly changing industry.