GithubPagesで画像のホスティング

GithubPages

Last updated at 2022-05-28Posted at 2022-05-28

はじめに

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

事前準備

Githubアカウントの設定と、SSHの設定ができている前提の記事です。
まだの方は、以下作業してください
Githubのアカウント登録
 Githubのssh接続の設定

やること

githubのリポジトリを作成

githubにログインし、画面右上の「＋ボタン」を押して「New repository」をクリック

適当な名前(英数字)とPublicを選択し、「Create repository」をクリック

この画面がでたら成功です。

自分のPCにフォルダを作って、それをgithubのリポジトリと繋げる

ここからは自分のPCから

コマンドラインを開き、
適当なところにフォルダを作って先ほどの画面の赤枠の部分のコマンドを実行していきます

$ 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からリポジトリーを再読み込みすると以下の表示になれば成功です

自分のPCから画像をアップロードを行う

いらすとやさんなど、著作権に気をつけて、画像をフォルダ内に名前をつけて保存をします

保存が全部終わったら、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'.

リロードを行うと画像のファイル名が表示されていたら成功です