ZennのGitHub共有リポジトリに画像をアップロードする方法を紹介します。
作業はすべてGitHub上で行います。
インターネットに接続しておく必要があります。
準備 その1
事前にZennとGitHubを連携させておきます。
やり方はこちら。
ZennとGitHubを連携させる方法 - Qiita https://qiita.com/akiba_burari/items/2423d284bab666e01f45
3 準備 その2 画像を用意
GitHubにアップロードする画像を用意しておいてください。
アップロードする画像ファイルは、
・ファイルサイズ 3MB 以内
・対応する拡張子 .png .jpg .jpeg .gif のみ
の2つの条件を満たしている必要があります。
ここでは「retoro-arck-top.png」という画像ファイルを用意しています。
GitHubにアクセス
GitHubにアクセスし、zennの共有リポジトリを開きます。
例：
AkibaBurari/zenn_connect
ここから画像をアップロードします。
zennの共有リポジトリ画面にある「Add file」をクリック
「Create new file」を選択
ファイル名を入力します。このときに必ず「imeges」ディレクトを記述してください。その中にあるファイルは後で削除するので、テキトーな名前をつけておいてください。
例：
zenn_connect /images/test1.png
画面下の「Commit changes」を選択します。
これで「imege」ディレクト内に「test1.png」というファイルが作成されます。
作成ファイルを確認
「zenn_connect」ディレクトリの中に
「images」ディレクトリが作成されています。
「images」ディレクトリを選択し、
画面右上の「Add file」をクリックし、
「UpLoad files」
を選択。
用意していた画像を選択し、アップロードします。
retoro-arck-top.png
画面下の「Commit changes」を選択します。
これで画像がアップロードされます。
確認と削除
「images」ディレクトリを選択
retoro-arck-top.png
があることを確認します。
最後に
test1.png
を削除します。
ファイルを選択してごみ箱アイコンをクリック
画面下の「Commit changes」を選択します。
これで「test1.png」ファイルだけを削除できました。
test1.pngファイルを削除しても
「images」ディレクトリは残っています。
Zennブログにアクセス
Zennにアクセスしたら、画面右上の自分のロゴをクリックします。
「GitHubからのデプロイ」を選択
デプロイを修正する
履歴を見るとファイルがうまく更新されていないようです。
そこで、上のタブから「リポジトリ設定」を選択
デプロイ対象ブランチを確認すると「master」になっていました。
GitHubでファイルの保存場所を確認すると、
正しくは
「main」
だったので変更します。
※これはGitHubがこれから新規に作成されるリポジトリのデフォルトブランチ名を「master」から「main」に変更したためです。GitHub上でディレクトリを新規で作成すると、自動的にブランチ名が「main」になります。
次に「手動デプロイ」を開始し、再びデプロイ履歴を見てみます。
今度はデプロイがうまくいき、きちんと更新できました。
同じやり方で、GitHub上に
「articles」
「books」
ディレクトリも作成できます。
まだ作成していない人は作成しておきましょう。
参考サイト 一覧
GitHubリポジトリ連携で画像をアップロードする方法 https://zenn.dev/zenn/articles/deploy-github-images
GitHub、これから作成するリポジトリのデフォルトブランチ名が「main」に。「master」から「main」へ変更 － Publickey https://www.publickey1.jp/blog/20/githubmainmastermain.html