Software Web

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

投稿日:2014-03-31 更新日:

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

-Software, Web
-

執筆者:


comment

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

CAPTCHA


*

おすすめ記事&スポンサーリンク

関連記事

no image

Bitbucket上にあるリポジトリからJenkinsへの通知フック設定方法

Jenkinsが稼働するサーバへビルドを指示する通知URLは以下になる。 http://<user_name>:<user_api_token>@<server_host …

ドキュメントルートに mvコマンドでファイルを持ってくると、ブラウザからそのファイルにアクセスできない問題(SELinuxが原因の場合)

忘れがちなのでメモしておきます。 環境 OS: CentOS 7 /var/www/ 以下にディレクトリが作ってあり、そこをドキュメントルートにしている。 SELinuxを有効にしている。 問題となる …

Railsの国際化とpluralize

config/application.rb に、”config.i18n.default_locale = :ja” を記述すれば、view の中にある pluralize は …

Kali Linux とは?

Kali Linux はペネトレーションテストに特化したLinuxディストリビューションです。Offensive Security社によって開発・メンテナンスされています。多くのペネトレーションテスト …

Laravel 5 で入力パラメータ値の文字エンコーディングをチェックするMiddlewareを追加する

セキュリティのリスクを少しでも減らすために、想定している文字エンコーディング以外の文字がパラメータとして送信されても受け付けないようにします。 1.以下のミドルウェアを作成する app/Http/Mi …


lathe