
【Codesandboxを利用して、GitHub Pagesの公開に進む手順❤】/GitHub Pagesに更新が反映されない!/ master branchにコミットしてすぐにGitHub Pagesに反映されるわけではありません。1〜2時間ほどかかる❤
TechCommit個人制作2021で、【GitHub Pagesを利用しての公開】を初めて実施しました。
【Codesandboxを利用して、GitHub Pagesの公開に進む手順】と困った事のご報告noteです。※Git初学者のまとめです。ご承知おきください。
【困った事】
・GitHub Pages を使った静的サイトの公開方法にトライしましたが、GitHub Pagesに更新が反映されない。
具体的には、GitのURL※例【https://yukiko1026.github.io/usasa/】を、保存後にすぐ5~10分後に選んでも、エラーが発生して開けない事が発生。
原因を調査・・・
noteライターのnpakaさんから、原因の理由を教わりました。
今後の為の綴りますね。
npakaさんのnoteを引用いたします。
“GitHub Pagesに更新が反映されない master branchにコミットしてすぐにGitHub Pagesに反映されるわけではありません。1〜2時間ほどかかります。”
npakaさん、ありがとうございます。
感謝しています。
【Codesandboxを利用して、GitHub Pagesの公開に進む手順】※簡単まとめ
【Codesandbox】
1: staticにて、HTML・CSS・JSのコード書く。保存する。
2:画面左のGitの猫マークを押す。🐈
3:「Export to new GitHub repository」の下の【repositoryname...】にマウスを持っていく。名前を付けて、保存する。※例:usausa(兎画像) ⇒【creating repository】と表示されます♪
【GitHub】
4:顔写真下の、【Your repositories】をクリックする。
5:【Your repositories】にて、4で作成した【repositoryname...】※例:usausa(兎の画像)を探して、選択する。
6:【Settings】を、選ぶ。※右の方に有ります。
7: 【GitHub Pagesの設定をNone⇒Savaに変更する】
《最初の画面》
GitHub Pages
Source
GitHub Pages is currently disabled. Select a source below to enable GitHub Pages for this repository. Learn more.
None▼
Save
《やり方メモ》
GitHub Pages
Source
GitHub Pages is currently disabled. Select a source below to enable GitHub Pages for this repository. Learn more.
None▼
8:None▼の下三角形をクリックで、選択オプションが表示されるので、【main】に設定変更行う(´ー`*)♪
9:Saveボタンを押す。
10:公開反映まで、1時間~2時間待つ。※早いときはすぐ反映されます。
11:【Settings】の下記ページの、URL
※例【https://yukiko1026.github.io/usasa/】をクリックして、公開出来ているか調査する(^^)
《GitHub画面》
GitHub Pages
GitHub Pages is designed to host your personal, organization, or project pages from a GitHub repository.
Your site is ready to be published at https://yukiko1026.github.io/usasa/.
Source ↑ここに注目(*^-^*)❤
Your GitHub Pages site is currently being built from the main branch. Learn more.
以上です。
<他、TechCommitで井上慎也さんに教わった記事を参考に進めました。>
【GitHub Pages を使った静的サイトの公開方法が、とても簡単になっていた】
おわり。
※拙い簡単な、まとめですが、お役に立てば嬉しいです(⌒∇⌒)♪