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
.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 About sections says the following:
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”.
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.”
“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.