【初心者向け】GitHub Pageにアップしたhtmlなどのデータを更新する手順だけを解説!

こんにちは！オトーワンですっ！
今から、半年ほど前に公開した『【初心者向け】GitHub Pageにhtmlをアップして公開する手順だけを解説!』がなんと、オトーワンのnoteアカウントの中で一番読まれてる記事に現状なってるんですｗｗ

今回は、自分の備忘録を兼ねて、今度は「GitHub Pageにhtmlなどのデータをアップしたあと、じゃあ更新するにはどうするの？」を解説しようと思います。それでは、いってみましょ～

（1）GitHubにログインしてDashboardを表示

GitHub（https://github.com/）にログインするとDashboard画面が表示されるので、画面左側に表示されているリポジトリ（サイトのフォルダ）から更新したいものをクリック。

（2）リポジトリ内のディレクトリ（構成）

リポジトリ内のディレクトリが表示されるので、例えば、”index.html”を更新したい場合は、画面真ん中右上あたりの”+”ボタンから、"Upload files"を選択します。

（3）アップロード画面を表示

”+”ボタンから、"Upload files"を選択するとアップロード画面に変わるので、以下の赤枠のエリアに更新したいデータ（今回で言えば"index.html"ファイル）をドラッグ&ドロップするか、"choose your files"を選択してファイルを選択してください。

ファイルが選択されたら、画面下の緑のボタン"Commit changes"をクリックすればファイルがアップロードされます。

ファイルがアップロードされると、リポジトリ内のディレクトリ画面に戻ります。そしてアップロードされたファイル名の右側には、何分、何時間、何何日前に更新されたかの表示がされるので、アップロードされたことが確認できます。
※以下の画面では、2日前になってますが、更新したては"now"と表示されます

（補足）一階層以降のフォルダ内データを更新したい場合

一階層以降のフォルダ内データを更新したい場合は、該当するフォルダを選択します。※今回は"image"フォルダの場合

該当するフォルダを選択すると、フォルダ内の詳細が表示されるので、右上の"Add file"から"Upload files"を選択します。
その後は上記の「（3）アップロード画面を表示」と同じ画面になります。

と、いうことでGitHub Pageにアップしたhtmlなどのデータを更新する手順を解説しました！

一度公開したページも、あとから文章を直したり、画像を差し替えたり、HTMLやCSSを少し調整したりできるようになると、かなり気が楽になります。

もし更新前に表示を確認したい場合は、VSCodeでローカルサーバーを立てて、ブラウザ上で確認してから反映する方法もあります。
いきなり公開中のページを直すのが不安な方は、先にローカル環境で確認しておくと安心です。

今後は、AIに作ってもらったHTMLや小さなWebツールを「確認する、公開する、更新する」ところまで迷わず進めるように、関連する手順をまとめた資料も作っていく予定です。

また、GitHubに関連して覚えたことが増えたら、随時ノウハウの更新をしていきますね。今日はこんなところで！またお会いしましょ～