WHAT IS GITHUB GIST???

I was working on a CodePen and after writing a couple of lines, an alert popped up on the top that said that I needed to save my work. Silly me, I’ve made that mistake before. I had even totally forgot title the CodePen.

If you don’t know what CodePen, here’s a description of it from their About page:

👋 CodePen is a social development environment. At its heart, it allows you to write code in the browser, and see the results of it as you build. A useful and liberating online code editor for developers of any skill, and particularly empowering for people learning to code. We focus primarily on front-end languages like HTML, CSS, JavaScript, and preprocessing syntaxes that turn into those things.

We say social, because CodePen is a community. Most creations on CodePen are public and open source. They are living things that other people and the community can interact with, from a simple hearting, to leaving a comment, to forking and changing for their own needs.

After saving and titling the CodePen, I happened to see an Export button on the bottom right of the screen. When I clicked on it, it popped up some options.

Save as GitHub Gist

Export .zip

.zip with Build Process

The option on the bottom is a feature reserved for the Pro version of CodePen, CodePen Pro.

CodePen Pro is one tier higher than the free version and it can be billed Monthly for $12 a month & or Annually for $96 a year.

When I saw the Save as GitHub Gist option, I got excited!

I can save CodePens to GitHub!

After going through the process of authorizing CodePen and GitHub, I saw the code that I had typed show up on the GitHub site…but it looked a bit different.

It looked like all the code was in different sections but on one page, like how it is when you click on the Commits on a Repository on GitHub.

I did some research on GitHub Gist and here’s an overview of what GitHub Gist is.

The following is from GitHub Docs on the topic of Writing on GitHub, subsection Creating Gists.

The About sections says the following:

About gists

Every gist is a Git repository, which means that it can be forked and cloned. If you are signed in to GitHub when you create a gist, the gist will be associated with your account and you will see it in your list of gists when you navigate to your gist home page.

Gists can be public or secret. Public gists show up in Discover, where people can browse new gists as they’re created. They’re also searchable, so you can use them if you’d like other people to find and see your work.

Secret gists don’t show up in Discover and are not searchable. Secret gists aren’t private. If you send the URL of a secret gist to a friend, they’ll be able to see it. However, if someone you don’t know discovers the URL, they’ll also be able to see your gist. If you need to keep your code away from prying eyes, you may want to create a private repository instead.

After creating a gist, you cannot convert it from public to secret.

You’ll receive a notification when:

You are the author of a gist.

Someone mentions you in a gist.

You subscribe to a gist, by clicking Subscribe at the top of any gist.

You can pin gists to your profile so other people can see them easily. For more information, see “Pinning items to your profile.”

You can discover public gists others have created by going to the gist home page and clicking All Gists. This will take you to a page of all gists sorted and displayed by time of creation or update. You can also search gists by language with Gist Search. Gist search uses the same search syntax as code search.

Since gists are Git repositories, you can view their full commit history, complete with diffs. You can also fork or clone gists. For more information, see “Forking and cloning gists”.

You can download a ZIP file of a gist by clicking the Download ZIP button at the top of the gist. You can embed a gist in any text field that supports Javascript, such as a blog post. To get the embed code, click the clipboard icon next to the Embed URL of a gist. To embed a specific gist file, append the Embed URL with ?file=FILENAME.

Gist supports mapping GeoJSON files. These maps are displayed in embedded gists, so you can easily share and embed maps. For more information, see “Working with non-code files.”

A post on Intellipaat.com titled What is the difference between GitHub and gist?, a user named humble gumble asked on Jul 16, 2019 in DevOps and Agile section,

“What is the purpose of gist and how is it different from regular code sharing/maintaining using GitHub?”

User debashis borgohain answered on Jul 17, 2019,

“In simple words, GitHub is the entire site, whereas, gists are nothing but some special services offered by GitHub.

GitHub is a platform where sharing files, information, or even the entire project are made easy. There are options where we can share files among a team privately or make things public to the whole world.

But on the other hand, the gist is a simple way to share code snippets. It is used when we need to share a sample piece of code or technique with our co-workers or friends.”

And I think that’s the gist of it. Get it?? lol

Gists are Git repositories, and because they’re repositories, you can view their full commit history, complete with diffs.

It’s good to know that you can also fork or clone gists.

You can download a ZIP file of a gist.

And you can embed a gist in any text field that supports Javascript, like a blog post.

If you want to dig deeper, there is a StackOverflow post on this topic as well, called What is the difference between GitHub and gist?