Serve JSON Data from Github Pages

Question

I have a repository on github which contains a number of csv, json, yml data files in the root directory of the repository.

How do I get it to serve those files using Github Pages?

So for eg: when I go to http://username.github.io/reponame/ followed by

• /posts - serve the contents of the posts.json file
• /users - serve the contents of the users.json file
• /comments - serve the contents of the comments.json file
• /posts.csv - serve the contents of the posts.csv file

Answer 1

You just need to add .json files in your repository and you can access them like a normal JSON API

In the repository username.github.io/reponame add the following files

posts.json

[
  {"id": 1, "title": "Title 1"},
  {"id": 2, "title": "Title 2"}
]

users.json

[
  {"name": "abc", "email": "[email protected]"},
  {"name": "xyz", "email": "[email protected]"}
]

comments.json

[
  {"post_id": "1", "text": "Comment 1"},
  {"post_id": "2", "text": "Comment 2"}
]

posts.csv

id,title
1,Title 1
2,Title 2

And access them with

• http://username.github.io/reponame/posts.json
• http://username.github.io/reponame/users.json
• http://username.github.io/reponame/comments.json
• http://username.github.io/reponame/posts.csv

Working example -

• https://deepakmahakale.github.io/api/users.json

Answer 2

You can create index.json instead of index.html to get application/json; charset=utf-8 header.

That is, create: - posts/index.json to be served at http://username.github.io/reponame/posts/, - users/index.json to be served at http://username.github.io/reponame/users/, etc.

Note that as a directory, access without trailing slash (http://username.github.io/reponame/posts) returns 301 redirect to same path with trailing slash. That is, it works but your client need to follow redirects (curl by default doesn't, curl --location does) and is slightly slower due to extra round-trip...

See https://github.com/cben/sandbox/tree/master/json directory for a working example (served at https://cben.github.io/sandbox/json/).

P.S. avoid more than one index.* and README* file in one dir; when I added a README.md alongside the index.json, the README won and got served at json/, so I had to rename it to something else.

Answer 3

I'm adding a code block on how to consume json from github:

function logResults(json) {
    console.log(json)
}

$.ajax({
    url: "https://raw.githubusercontent.com/cben/sandbox/master/json/index.json",
    dataType: "json"
}).done(function(result){
    console.log(result);
});

Please check the example at jfiddle: https://jsfiddle.net/v_alishauskaite/dxm8cvkL/1/

Answer 4

This type of url (eg : /posts) will only work with html files. You can name your json file posts.html and set its front matter like this :

---
layout: null
permalink: /posts/
---
{ "variable": "value" }

You will then reach your file at /posts or /posts/.

Only drawback is that the returned file is /posts/index.html which is served with Content-Type: text/html mime type and not the expected application/json.