Githubで画像を保存してREADME.mdに表示する

初級者の人や、プロジェクトにあとから入ってきた人がわかりやすいようにGithubのREADME.mdを詳細に書いていくことは大切です。しかし、文字ばかりになるのも味気ないですし、やはり絵や図があったほうがわかりやすいはずです。ふと、画像を貼るにはどうしたらいいのだろうと思ったので調べて実践してみました。

README.mdに画像を貼る手段はいくつかあるようで、外部サービスを利用するものもあります。外部サービスに保存し、そこを参照しに行く方法です。

GitHubでREADME.mdに画像を使用したい

個人的にはGithubの同じリポジトリの中だけで閉じておきたいなと思ったので、空のブランチを用意しその中に画像だけ保存しておく方法を選択しました。今回はそのメモです。

空のブランチを作る方法

空のimagesのブランチを作成します。orphanオプションをつけることによって、元のブランチの情報を引き継がないブランチを作成できます。

git checkout --orphan images

空のブランチに画像を入れる方法

フォルダの中を削除し、表示したい画像をコミットし、最後はプッシュします。

今回使う画像はこちらです。 f:id:yoshitaku_jp:20181025163045p:plain

git rm -rf .
git add dog_akitainu.png
git commit -m "犬の画像を追加しました"
git push origin images

これで独立したimagesブランチとdog_akitainu.pngGithub上にあがりました。masterには一番最初に作ったREADME.mdがあります。 f:id:yoshitaku_jp:20181025163157p:plain

README.mdに画像を表示する

masterブランチに移動し、README.mdを編集します。

git checkout master
vim README.md

vimでREADME.mdに書く内容です。

![秋田犬](https://github.com/yoshitaku-jp/test_doc/blob/images/dog_akitainu.png)

masterブランチにコミットしてプッシュします。

git add README.md
git commit -m "画像を表示"
git push origin master

完成

f:id:yoshitaku_jp:20181025163144p:plain

GitHub - yoshitaku-jp/test_doc