GitHubに画像ファイルを保存してREADME.mdで表示する方法

GitHub

GitHubのレポジトリページにはREADME.mdの内容が表示されますが、その中に画像を表示したい場合どうするのがよいでしょうか? GitHub上にその画像をアップロードして参照できれば、ローカルや他のWebサイトで画像ファイルを管理する必要がなくなります。今回はGitHubのWikiページを利用する手順をメモします。

手順1 GitHubにレポジトリを作成します

通常の手順でレポジトリを作ります。
ここでは yukisovというユーザ名で、web-sindan-crawler(.git)という名前のレポジトリを作ったとします。

手順2 このレポジトリに対するWikiレポジトリをローカルにcloneします

GitHubのWikiページは1つのレポジトリになっています。元のレポジトリ名の末尾を”.git”から”.wiki”に変えた文字列がこちらのレポジトリ名になります。

Wikiレポジトリをローカルにcloneします。

$ git clone git@github.com:yukisov/web-sindan-crawler.wiki
# この後の操作のためレポジトリに移動します。
$ cd web-sindan-crawler.wiki

手順3 Wikiレポジトリに画像を追加してサーバーに反映します

このレポジトリに画像を追加します。
今回は imagesディレクトリを作ってその中に画像を配置します。

$ mkdir images

画像を追加します。

$ cp path/to/foo.png ./images/

コミットしてGitHubサーバに反映します。

$ git add .
$ git commit -m "Add foo.png"
$ git push

手順4 README.mdに画像リンクを記述します

元のリポジトリ内のREADME.mdに先ほど追加した画像を表示する記述を行ってコミットします。

Wiki内に格納した画像へのリンクは以下になります。

  • https://raw.github.com/wiki/ユーザ名/リポジトリ名/画像へのパス
  • (例)
  • https://raw.github.com/wiki/yukisov/web-sindan-crawler/images/foo.png

imgタグは以下のように記述できます。

  • Markdownの形式で記述する場合
    • ![タイトル](リンクURL)
  • HTMLの形式で記述する場合
    • <img alt=”タイトル” src=”リンクURL” />

手順5 GitHubのWikiページでその画像を見られるようにします(オプション)

追加した画像はそのままではどこにも表示されないので、どんな画像だったか確認できるように表示するページをWikiに作成しておきます。新規にWikiページを追加して、手順4と同様にimgタグを記述すればOKです。

[最終更新日: 2014年3月30日]

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*