3 ways to get data from GitHub Gists

While working on some of my projects, I needed to fetch some data from GitHub Gists. Here are three ways I found to do this.

1. The JavaScript way

This is the official way to do it, the one that is mentioned in the GitHub Documentation. It consists of adding .js to the end of the URL and including it in a script tag:

<!-- If we have the following Gist: https://gist.github.com/m1guelpf/53e1780a5a68fe9281cfbbc9820d381f -->

<script src="https://gist.github.com/m1guelpf/53e1780a5a68fe9281cfbbc9820d381f.js"></script>

2. The JSON way

Adding .json to the end of the Gist URL returns the following response:

{
	"description": "Personally written version of Chris Fidao's video on setting up a Forge like server: https://youtu.be/VQNrsMYCOFg ",
	"public": false,
	"created_at": "2017-07-13T21:01:10+02:00",
	"files": ["forgeLikeServerSetup.md"],
	"owner": "m1guelpf",
	"div": "GIST_CONTENTS_HERE",
	"stylesheet": "https://assets-cdn.github.com/assets/gist-embed-3cc724162479db25e452fdf621f2349adef3e742b53552c2a93f82d28156cb96.css"
}

This is the option I've personally been using since it's perfect for quickly fetching the data from a server.

3. GitHub API

If you need more data about the Gist, you can use the official GitHub API. According to the API documentation, you have to make a GET request to https://api.github.com/gists/$GIST_ID where Gist ID is the part of the URL that appears after your username.

Here's an example response:

{
	"url": "https://api.github.com/gists/53e1780a5a68fe9281cfbbc9820d381f",
	"forks_url": "https://api.github.com/gists/53e1780a5a68fe9281cfbbc9820d381f/forks",
	"commits_url": "https://api.github.com/gists/53e1780a5a68fe9281cfbbc9820d381f/commits",
	"id": "53e1780a5a68fe9281cfbbc9820d381f",
	"git_pull_url": "https://gist.github.com/53e1780a5a68fe9281cfbbc9820d381f.git",
	"git_push_url": "https://gist.github.com/53e1780a5a68fe9281cfbbc9820d381f.git",
	"html_url": "https://gist.github.com/53e1780a5a68fe9281cfbbc9820d381f",
	"files": {
		"forgeLikeServerSetup.md": {
			"filename": "forgeLikeServerSetup.md",
			"type": "text/plain",
			"language": "Markdown",
			"raw_url": "https://gist.githubusercontent.com/m1guelpf/53e1780a5a68fe9281cfbbc9820d381f/raw/a74da413bd8ad348523b4535053687533cc10485/forgeLikeServerSetup.md",
			"size": 7434,
			"truncated": false,
			"content": "GIST_CONTENTS_HERE"
		}
	},
	"public": false,
	"created_at": "2017-07-13T19:01:10Z",
	"updated_at": "2017-07-13T19:01:10Z",
	"description": "Personally written version of Chris Fidao's video on setting up a Forge like server: https://youtu.be/VQNrsMYCOFg ",
	"comments": 0,
	"user": null,
	"comments_url": "https://api.github.com/gists/53e1780a5a68fe9281cfbbc9820d381f/comments",
	"owner": {
		"login": "m1guelpf",
		"id": 23558090,
		"avatar_url": "https://avatars0.githubusercontent.com/u/23558090?v=4",
		"gravatar_id": "",
		"url": "https://api.github.com/users/m1guelpf",
		"html_url": "https://github.com/m1guelpf",
		"followers_url": "https://api.github.com/users/m1guelpf/followers",
		"following_url": "https://api.github.com/users/m1guelpf/following{/other_user}",
		"gists_url": "https://api.github.com/users/m1guelpf/gists{/gist_id}",
		"starred_url": "https://api.github.com/users/m1guelpf/starred{/owner}{/repo}",
		"subscriptions_url": "https://api.github.com/users/m1guelpf/subscriptions",
		"organizations_url": "https://api.github.com/users/m1guelpf/orgs",
		"repos_url": "https://api.github.com/users/m1guelpf/repos",
		"events_url": "https://api.github.com/users/m1guelpf/events{/privacy}",
		"received_events_url": "https://api.github.com/users/m1guelpf/received_events",
		"type": "User",
		"site_admin": false
	},
	"fork_of": null,
	"forks": [],
	"truncated": false
}

These are the three ways you can get data from GitHub Gists. Now it's up to you to decide which one of them suits your use-case better.

Happy coding!