Thursday, March 20, 2014

How To Add Images To A GitHub Wiki

Every GitHub repository comes with its own wiki. This is a great place to put the documentation for your project. What isn’t clear from the wiki documentation is how to add images to your wiki. Here’s my step-by-step guide. I’m going to add a logo to the main page of my WikiDemo repository’s wiki:

https://github.com/mikehadlow/WikiDemo/wiki/Main-Page

First clone the wiki. You grab the clone URL from the button at the top of the wiki page.

wiki-pic-clone

$ git clone git@github.com:mikehadlow/WikiDemo.wiki.git
Cloning into 'WikiDemo.wiki'...
Enter passphrase for key '/home/mike.hadlow/.ssh/id_rsa':
remote: Counting objects: 6, done.
remote: Compressing objects: 100% (3/3), done.
remote: Total 6 (delta 0), reused 0 (delta 0)
Receiving objects: 100% (6/6), done.

If you look in the cloned wiki’s repository you’ll see your pages as markdown files:

$ cd WikiDemo.wiki/

$ ls -l
total 2
-rw-r--r--+ 1 mike.hadlow Domain Users 29 Mar 20 10:29 Home.md
-rw-r--r--+ 1 mike.hadlow Domain Users 27 Mar 20 10:29 Main-Page.md

$ cat Main-Page.md
Hello this is the main page
$ cat Home.md
Welcome to the WikiDemo wiki!


Create a new directory called ‘images’ (it doesn’t matter what you call it, this is just a convention I use):

$ mkdir images

Then copy your picture(s) into the images directory (I’ve copied my logo_design.png file to my images directory).

$ ls -l
-rwxr-xr-x 1 mike.hadlow Domain Users 12971 Sep 5 2013 logo_design.png

Commit your changes and push back to GitHub:

$ git add -A

$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: images/logo_design.png
#

$ git commit -m "Added logo_design.png"
[master 23a1b4a] Added logo_design.png
1 files changed, 0 insertions(+), 0 deletions(-)
create mode 100755 images/logo_design.png

$ git push
Enter passphrase for key '/home/mike.hadlow/.ssh/id_rsa':
Counting objects: 5, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (3/3), done.
Writing objects: 100% (4/4), 9.05 KiB, done.
Total 4 (delta 0), reused 0 (delta 0)
To git@github.com:mikehadlow/WikiDemo.wiki.git
333a516..23a1b4a master -> master

Now we can put a link to our image in ‘Main Page’:

wiki-images-edit-page

Save and there’s your image for all to see:

wiki-pic-result

17 comments:

Steve Doubleday said...

This was really helpful - thanks!

Anonymous said...

Thanks very much !!

Jeff's Blog said...

Yeah! Lots of other sites had instructions that just didn't work. Yours did so thanks a bunch!

Hines III said...

This did not work for me. I had to add the following to the image URL:
'blob/master/'

So the final text would be: [[blob/master/images/logo_design.png]]

hcchen5600 said...

What I've learned from you are:
1. Wiki of a project (or repository) can be a standalone repository.
2. Clone the Wiki to local computer so we can "mkdir image" like a normal repository.
3. commit and push , so the wiki repository has its own folder of pictures.
4. Then certainly you can show them in your wiki page.

Thank you very very very much!

adam wright said...

Very helpful - Thanks!!!

Anonymous said...

Brilliant!

Andric LibreSinn said...

This was super helpful. Thank you!

ElJavato said...

It worked, so thank you for posting it ;).

Obioma Ofoamalu said...

This was on point. Thank You

anon said...

this is ridiculously involved to upload a single image. thanks for the article.

Tony Pujals said...

If you use subdirectories like I do when editing my wiki locally, you will need to update the path. It's easiest to just always remember a leading slash: [[/images/path/to/image.ext]]

aishah mohamed said...
This comment has been removed by the author.
aishah mohamed said...

It worked perfectly. However, I'm trying to add another image in the same file and it appears a red linked instead of the new image. May I know to solve this? Thank you

Oscar Canek said...

It's possible to do the same but with a .mediawiki file?

Alper said...

Spot on.. Thanks..

David Goodwin said...

Thanks - just what I needed too :)