GithubPagesで画像のホスティング

# はじめに
LINE Bot開発などをしていて、画像のURLを設定しなきゃいけないけど、自分の持っている画像を設定したい。
でも自分でやるやり方がわからない。。。という方のためにGithub Pagesを利用した画像ホスティングの方法を解説します

# 事前準備
Githubアカウントの設定と、SSHの設定ができている前提の記事です。
まだの方は、以下作業してください
[Githubのアカウント登録](https://git-scm.com/book/ja/v2/GitHub-%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E6%BA%96%E5%82%99%E3%81%A8%E8%A8%AD%E5%AE%9A)
[Githubのssh接続の設定](https://qiita.com/shizuma/items/2b2f873a0034839e47ce)

# やること
## githubのリポジトリを作成
githubにログインし、画面右上の「＋ボタン」を押して「New repository」をクリック
![スクリーンショット 2022-05-28 19.27.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/42fe64fc-ce1b-dcb4-a919-7c13929f43e5.png)

適当な名前(英数字)とPublicを選択し、「Create repository」をクリック
![スクリーンショット 2022-05-28 19.29.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/8d9ded9f-4192-c876-473a-f30970663534.png)

この画面がでたら成功です。
![スクリーンショット 2022-05-28 19.32.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/74db9262-37b4-761b-c395-4721053032ac.png)

## 自分のPCにフォルダを作って、それをgithubのリポジトリと繋げる
:::note
ここからは自分のPCから
:::

コマンドラインを開き、
適当なところにフォルダを作って先ほどの画面の赤枠の部分のコマンドを実行していきます
![スクリーンショット 2022-05-28 19.32.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/74db9262-37b4-761b-c395-4721053032ac.png)

```
$ mkdir public_image
$ cd public_image/
$ echo "# public_image" >> README.md
$ git init
Initialized empty Git repository in /Users/riku/Projects/public_image/.git/
221x255x202x91:public_image riku$ git add README.md
221x255x202x91:public_image riku$ git commit -m "first commit"
[master (root-commit) d265401] first commit
 1 file changed, 1 insertion(+)
 create mode 100644 README.md
$ git branch -M main
$ git remote add origin git@github.com:cog1t0/public_image.git
$ git push -u origin main
Enumerating objects: 3, done.
Counting objects: 100% (3/3), done.
Writing objects: 100% (3/3), 218 bytes | 218.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:cog1t0/public_image.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
```

git push したのち、Githubからリポジトリーを再読み込みすると以下の表示になれば成功です
![スクリーンショット 2022-05-28 19.36.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/ab648860-c1d4-77cd-f33b-186982591380.png)

## 自分のPCから画像をアップロードを行う
いらすとやさんなど、著作権に気をつけて、画像をフォルダ内に名前をつけて保存をします
![スクリーンショット 2022-05-28 19.37.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/673a1eda-1ff1-2aaa-810d-dd3c470cec7d.png)

保存が全部終わったら、git add, push を行います
```
$ git add -A
$ git commit -m "add image"
[main 6d51800] add image
 3 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 janken_choki.png
 create mode 100644 janken_gu.png
 create mode 100644 janken_pa.png
$ git push -u origin main
Enumerating objects: 6, done.
Counting objects: 100% (6/6), done.
Delta compression using up to 12 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (5/5), 382.31 KiB | 2.30 MiB/s, done.
Total 5 (delta 0), reused 0 (delta 0), pack-reused 0
To github.com:cog1t0/public_image.git
   d265401..6d51800  main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.
```

リロードを行うと画像のファイル名が表示されていたら成功です
![スクリーンショット 2022-05-28 19.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/2c0cd610-02c3-3c0c-710d-84e1d815c28e.png)

## github_pagesとして公開する

リポジトリのsettingsをクリックします
![スクリーンショット 2022-05-28 19.40.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/500f526d-280a-0a61-91a1-47da5d8f76ad.png)

Pagesをクリックします
![スクリーンショット 2022-05-28 19.40.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/f946e751-3ee4-719f-bee7-c56b1bb3c8ae.png)

Branchを「main」にしてsaveをクリックします
![スクリーンショット 2022-05-28 19.40.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/3fa59015-3ac6-f4f4-cb3c-e66868e597c6.png)

これでURLが発行されました
この場合は、
https://cog1t0.github.io/public_image

![スクリーンショット 2022-05-28 19.40.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/3107d65a-493e-7831-e9c0-76f7b7568e84.png)

数分間は以下のように404ページが表示されるのでしばらく待ちましょう
![スクリーンショット 2022-05-28 19.41.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/8ed0312c-f231-2c7d-a520-817806b7ddd5.png)

数分後以下のように表示されます
![スクリーンショット 2022-05-28 19.42.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/35f1d651-f66a-d8dd-4b12-ddf5b2b66d90.png)

URLにファイル名を注ぎ足せば以下のように画像が表示されるようになります
このURLを利用してLINEBotでリプライに利用する画像の指定等ができます
![スクリーンショット 2022-05-28 19.42.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/27192/4411f033-9763-69f0-6b81-6bb0a2f01e8d.png)

# おわり
以上、Githubを使ったお手軽画像ホスティングでした。
アカウント作成等の事前準備が若干面倒なので、他におすすめがあったらぜひ教えてください。