Use a Github repo to store all your gists' image folders
By Rob Hudek @hudekker
Gists are great ways of sharing information with others and many times you will want to include images to improve readability. If you upload your gist markdown document to Gist along with your image files then your gist will be cluttered with a display of all your image files alongside your markdown document. However, if you do not upload your image files then your gist will display a blank placeholder for that image resource.
There is a workaround process to avoid the clutter of image files in your gist. The process is to drag and drop your image files one by one into the gist file upload input field to create a system generated image address. Next you replace your image address reference in your markdown with this system generated name, and then back out of the image upload process without a commit. Repeat for every image.
My main issues with this workaround are that besides feeling like it is a little hacky, it's also a tedious process. And now your markdown document is not as easy to maintain since your image filenames all have system generated names that are different from your original source filenames.
There is a simpler way to handle the gist/images problem which uses a Github repo to store all of your gists' images, and then in your markdown document you reference this repo in your markdown document. This process makes use of Github's free Page feature which allows you to create a web page which makes all of your images internet addressable.
This is a one-time step to create the repo gist-images which will store all your gists' image folders. The only items in this repo will be your gists' image folders. Next go to the Settings for this repo and create a Page. This will make all your images internet accessible. You do not need an html document to create a Page.
Copy your images folder from your local markdown to this gist-images repo and rename the folder to . This will allow you to address your images by your gist's name. Commit and push your gist-images repo.
If you don't have a local copy of your gist-images repo then you can clone it now. Once you update it and push it, then you can remove it from your local.
In the example below you can see in my gist images repo there are three gists' images folders: git-notes, js-conference, and sf-trip. I also have an images folder for the readme markdown document for this repo.
Above: Local gist repo
Above: Each gist has its own folder in your local gist-images repo
-
Create a .gitignore file and add your images folder name (in this example it is images ) and .gitignore because you do not want your .gitignore file and your images to be pushed to your gist.
Above: .gitignore for gist
sf-trip
-
In your markdown document globally replace the local image folder reference
imageswith your gist-images repo images directoryhttps://<your-account-name>.github.io/gist-images/<your-gist-name> -
Markdown images are of the form
so a "safe" global replace of your images directory may be- Find
](images/ - Replace with
](https://<your-account-name>.github.io/gist-images/<your-gist-name>/.
- Find
-
Example
Above: Before global find/replace
Above: After global find/replace
-
Commit and push your gist
If you change your images, then you will change the images in your local gist-images repo and push. If you add images then you will need to add the image to your gist-images repo and push. Your local gist will always reference the online images directory address.