If you’ve been going through developer blogs reading technical articles, you’ve most probably seen little windows that look just like this one:
This is a GitHub Gist.
A Gist is an easy way to share with others things like code, notes, and snippets in a clean and readable way.
In this crash course, I’m going to show you everything you need to know about Gists:
- how to create them
- what are the common use cases
- tips and tricks
- best practices
- and other juicy stuff
So if you wanna learn about GitHub Gist, or you wanna know more about it, grab a warm beverage and join me.
Want to watch a video to supplement your reading? Check this out:
Let’s get started!
What is a GitHub Gist?
It’s like a lightweight version of a Git repository.
It doesn’t have things like issues, pull requests, and other fully-fledged repository features.
But it’s still a Git repository which means it can be forked, cloned and it has all the benefits of Git such as version control.
How do we create and use Gists?
I’m gonna first assume that you have a GitHub account.
If you don’t, head over to GitHub.com, and create one. And then come back of course.
Good. Now that you’re logged in, there are two ways of getting to the Gists section of GitHub.
Go to GitHub.com and click on the plus sign at the top of the menu and then select New Gist.
Or, you can go to gist.github.com which will also take you to the page to create a new Gist.
On the New Gist page, there are several fields to fill out.
The description box holds the title or the name of the Gist.
The file name and extension box holds the name of the file and the extension for the programming language you have used.
I want to point out that the extension is very important!
This notifies the reader of what language it was written in and it allows the file to be downloaded with the appropriate extension.
Additionally, the syntax highlighting is being auto-detected based on the extension you’ve given.
So it’s a good practice to add the appropriate level of detail.
Add multiple files
Another thing I wanna point out is that you can have multiple files within the same Gist.
There’s the Add file button that lets you add additional files.
So you can imagine different examples of multiple files all contained within the same gist that work together.
If you’ve watched or read my tutorial on “npm vs npx” you may have noticed that I’ve used as an example a gist that has 3 files: a ReadMe, a JavaScript and a package.json file.
Another classic example is where you have HTML, CSS, and JavaScript files altogether.
So this feature really does come in handy.
Prefill Gist with content from a file
Remember when I said that Gist is an easy way to share code?
Take a look at this.
You can drag and drop a file and GitHub will automatically prefill your Gist with the contents of the file, the file name, and its extension.
Now, let’s get this to another level.
We can use Gist to display data from a CSV and TSV file.
I created a CSV file beforehand that contains some data about cars.
When you’re creating your own CSV file, make sure that each column name is separated by a comma and each subsequent row is ordered the same as the column names.
Now let’s drag and drop our file to gist and take a look at the table.
As you can see, GitHub beautifully rendered the CSV as an interactive table, complete with headers and row numbering.
The column names are bolded, the rows are centered correctly, and one helpful feature can be found at the top of the table – the Search box.
So if you want to find a certain value in your dataset, you can start typing in the search bar above the file and the result shows up in real-time.
Types of Gists
We just created our first gist and you’ve probably noticed that I’ve created a secret Gist.
Actually, you can create two kinds of Gists: public and secret.
Public Gists show up in the Discover section of GitHub where people can browse new gists in real-time.
They’re also searchable, so search engines like Brave Search and other people can find them.
Be extra careful when you create a gist!
Make sure to not share things like secret API keys, credentials, and other sensitive information.
Believe me or not, there are bots scraping the Discover page looking for gists in hopes of finding sensitive information.
Which then, for example, can be exploited in various cyber-attacks.
And this leads us to Secret Gists.
Secret Gists are not private.
They don’t show up on the Discover page but anyone can have access to a Secret Gist if they have the URL.
If you want your code to truly be private, you can create a private repository instead and only give access to selected users.
Another thing worth mentioning is that after creating a gist, you cannot convert it from public to secret. So keep that in mind.
Once you have created a Gist, people can leave you comments and you’ll be notified when that happens.
GitHub Gist REST API
GitHub also allows you to list, create, update and delete Gists via a REST API.
This can be useful when you want to integrate gists into your project or software.
I won’t be covering the gist API right now because I think it’s a subject that needs separate attention.
But here is the link to the official documentation so you can explore and play with it as you like.
Revisions tab
I mentioned earlier that gist is a Git repository and has benefits such as version control.
Here I have a Gist which I have modified several times and if we switch to the Revisions tab you can see all the changes I’ve committed.
Stars tab
Going to the Stars tab, we can see everyone who starred the Gist.
The stars are similar to bookmarking, you can save them for later use.
You can see all the Gists you have starred by clicking on your profile menu and then select Starred gists.
Forks tab
Going back to my Gist, let’s also have a look at the Forks tab.
A fork is a copy of a repository that allows you to freely experiment with changes without affecting the original project.
Let’s take the first fork as an example.
We can see that the user – hyokos – modified the original gist to his needs without affecting my original Gist.
That’s a glimpse of the beauty of Git.
Subscribe & Delete
Also if you want to be notified whenever a gist is modified, you can subscribe to it by pressing the Subscribe button on the right top corner.
And of course, if you want to delete your Gist, you can anytime delete it by pressing the Delete button.
Okay, so up until now we’ve covered the basics of Gist as well as certain tricks that can make our job as a developer easier, and also some best practices.
Now let’s look at other exciting and useful ways we can use the Gist feature.
Embed Gists
As developers, bloggers, or website owners we can embed them on our website.
By doing this, we get the huge benefit of having all of our source code hosted and backed up separate from the website.
Additionally, we also benefit from the syntax highlighting that Git is providing out of the box.
All you have to do is copy the script tag and paste it into your desired web page.
Like this one below:
Before I used Gist to share the code, I used a plugin to format the code and add syntax highlighting.
But the plugin was not lightweight and also had many bugs that were annoying.
So Gists are indeed really helpful in this case.
Sync VS Code settings
If you’re using Visual Studio Code, I have good news for you!
You can use Gists to share your VS Code configurations such as settings, keybindings, and installed extensions across your machines so you’re always working with your favorite setup.
To do this, you have to install an extension called Settings Sync by Shan Khan and follow the instructions.
Execute Gists from CLI with npx
Another cool thing you can do with gists is to execute them from the command line using npx.
I already have a video and a blog post on this called “npm vs npx”, so make sure you check that out if you want to find out more about how to run gists from the command line.
Other use cases
There are many more other ways to utilize Gists and I will only mention them in no particular order so we can keep this crash course short.
- Create task lists
- Organize notes
- Use them as a diary
- Save links
- Track text changes
- Host a simple website
- Store configurations and .dotfiles
The choice is yours!
Wrapping up
I hope you are now familiar with GitHub Gist and have a good understanding of how it works and what you can do with it.
If you have any questions please leave them in the comments section below and thanks for reading!
Let me know what you think about this article in the comments section below.
If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.