How To Store Images in a GitHub Repository

How To Store Images in a GitHub Repository

skinnyKbyskinnyK

Web images are fairly simple to find and link to in your projects. There are many resources over the internet, but sometimes they don’t meet your needs. Projects delivered on specific platforms, like iCodeThis IDE, do not allow attaching folders with additional files. In this article we will outline a workaround for these situations, by setting up and populating a GitHub repository with images that you can easily link to in your projects.

GitHub Account and Repository

Don’t have a GitHub account yet? No problem. Let’s walk through the easy setup process.

Step 1: Setting up your account.

  1. Go to GitHub
  2. Click the Sign up button in the top right corner Sign Up Instructions
  3. Enter the email address you would like to use and create a password Authentication Instructions
  4. After you have verified that you are not a robot, you will receive an email from GitHub with an 8-digit “launch code”. You will also be asked some background questions such as which version of GitHub you would like to register for. For this example, the free account is enough.
  5. You have created your account! Way to go. You should see the dashboard page that looks similar to this. GitHub dashboard image

Step 2: Creating a new repository

Creating a repository gives you a space to store files or folders on the internet. In this case, we are focusing on images, so we will call our repository web-images.

  1. Here you will enter the name you wish to call the repository.
  2. In this case, the files are not sensitive, so the repository should be designated “Public”. This will also allow us to link directly to the images.
  3. Then simply click Create a new repository. Creating a new repository example

Step 3: Cloning a repository to your machine with GitHub Desktop

GitHub quick setup page

  1. Following the setup, you will be redirected to this page which explains the steps needed to clone this repository to your machine. By doing this, you will be able to update your repo by “pushing” your files to the GitHub server for later access.
  2. The simplest solution is to download and use GitHub Desktop to clone the repository to your machine. Set up in Desktop button
  3. After installing GitHub desktop, open the application, click on File in the top left corner, then on “Clone repository”. Clone repository instructions
  4. To clone the repository, simply add the URL from the quick setup guide and select where on your machine you would like to have the close saved. In my case, I created a folder named “GitHub-repos” on my desktop to have it easily accessible for this demonstration.

Step 4: Adding files to your repository

  1. Now the fun part. Below you can find details on how to copy files over to the repository folder, commiting them, and pushing them to your repository.
  • Firstly, you want to copy the images to the GitHub repository folder you created earlier

Copying images in your GitHub repo

  • Secondly, you will write a Summary for your changes and press the Commit to main button

Committing images to your GitHub repo

  1. After committing and pushing the files to the repository, you can view them on your GitHub profile.

Image showing the uploaded files in the repository

  1. Now these images are linkable within your iCodeThis projects! Simply copy the image URL, add it to the image src attribute and style it as you will.

Additional resources:

For additional information please check out the GitHub docs linked below

GitHub Documentation

Acknowledgements:

Thanks to Florin Pop for the inspiration to write this post.

Thanks to GitHub for resources and fantastic tools to use in development.

Infinite appreciation to the icodethis.com team and discord crew for creating an environment that instigates growth and perpetuates knowledge.

Tags:iCodeThisAssetsGitHub