Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save y0k4i-1337/2cf181a5283d40afc773240e4c65c309 to your computer and use it in GitHub Desktop.
Save y0k4i-1337/2cf181a5283d40afc773240e4c65c309 to your computer and use it in GitHub Desktop.
Storing Images and Demos in your Repo

Storing Images and Demos in your Repo

In this quick walkthough you'll learn how to create a separate branch in your repo to house your screenshots and demo gifs for use in your master's readme.

How to

1. Clone a fresh copy of your repo

In order to prevent any loss of work it is best to clone the repo in a separate location to complete this task.

2. Create a new branch

Create a new branch in your repo by using git checkout --orphan assets

This will create and switch you to a new branch called "assets". The --orphan flag creates a new branch but without any prior commits. However it does still keep the working tree and index.

3. Remove files from the working tree

git rm -rf .

THIS WILL DELETE ALL FILES THAT THE WORKING TREE RECOGNIZES Any files that were not added to the tree will remain left behind in the folder.

We remove all files from the working tree since we do not want anything but our screenshots and images in this branch.

You can also check what branch you are on anytime by using git branch. The branch with the * next to it is the current branch.

4. Add your images and screenshots and commit the change

git add screenshot.png demo.gif logo.png

git commit -m "Added Assets"

5. Finally push your changes

git push origin assets

Use the images in your README

You can now use ![Demo Animation](../assets/demo.gif?raw=true) in your README to have the gif display on your master's readme. This will always show the latest image on the assets branch. If you wish to link to a specific revision of the image, issue the command

git rev-parse HEAD

and write down the resulting hash (SHA-1). Now, let's say the hash is 3923c60fc66d4223ccf063d169ccf2ff167b1270. In your README you can use ![Demo Animation](../3923c60fc66d4223ccf063d169ccf2ff167b1270/demo.gif?raw=true)

Absolute path

The README example above uses relative path for image source. If you need absolute path instead, the format is

![Demo Animation](https://raw.githubusercontent.com/{user}/{repo}/{sha|branchname}/demo.gif)

Consider using {branchname} (e.g., assets) if you want to always point to the latest revision of such resource.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment