GitHub pagesとは
GitHub Pagesは、GitHub上のリポジトリからHTML、CSS、JavaScriptファイルを直接取得し、必要に応じてビルドプロセスで実行してウェブサイトを公開する静的サイトホスティングサービスです。GitHub Pagesサイトの例は、GitHub Pagesサンプルコレクションでご覧いただけます。
要するに、無料でwebサービスを公開できるというGitHubの機能の1つ
便利ですな〜
手順
手順については下記のprogate様を参考にさせていただきました。
参考:Progate
-
アカウントの作成
-
リポジトリの作成
-
ファイルのアップロード
-
webページの公開
それぞれ解説していきます!
アカウントの作成
まずは、GitHubにて無料のアカウントを作成しましょう!
すでにGitHubのアカウントをお持ちの方はログインしてください。
リポジトリの作成
リポジトリを作成する前にリポジトリについて参考記事を掲載します。
リポジトリは、GitHub の最も基本的な要素です。 これは、コード、ファイル、各ファイルのリビジョン履歴を格納できる場所です。 リポジトリは、複数のコラボレーターが参加することができ、公開用またはプライベートのいずれかにできます。
最も核となる要素でwebページやwebアプリケーション等を、GitHubで管理するための箱のようなものと捉えるとわかりやすいかもしれません。
右上のプラスアイコン「+」をクリックし、New repositoryを選択してください。
以下のリンクからリポジトリを作成することができます。
https://github.com/new
Repository nameの入力欄に任意の文字を入力しましょう。
このリポジトリ名によって公開するwebページのURLが変わってきます。
(https://アカウント名.github.io/リポジトリ名のような感じになります )
注意点
webページを公開するのでpraivateではなく publicで公開してください
(僕はこれに気づかず、pushできなかったので本当に注意してください)
ファイルのアップロード
GitHub Pagesで公開したいファイルを作成したリポジトリ内にアップロードしましょう。
HTML/CSS/JavaScriptファイルをそれぞれアップロードすればOKです。
(本記事はHTML/CSS/JavaScriptの扱い方に関する記事ではないため詳細は割愛します)
webページの公開
該当のリポジトリ内にファイルをアップロードできたらいよいよ公開です。
リポジトリ画面の右上にあるSettingsをクリックします。
Settings画面の左側メニューにあるPagesをクリックします。
Branch部分を任意のブランチ(基本的にはmainブランチだと思います)に変更して、saveをクリックします。

以上で操作は完了になります。
問題なく操作されていればVisit site表記になります。こちらをクリックして頂くとGitHub Pagesを使って公開したwebページを見ることができます
URLをクリックするとWebページが公開されていて感動しましたw
やっぱ俺面白いわと思いますw

感想
Happiness Chainでは実務を想定し、freeのbootstrap templateを
GitHub Pagesを使って
公開する課題になっております。(Git、GitHubも使用)
めっちゃ勉強になりました!!
https://jota96131.github.io/resume/
(自分がGitHub Pagesを使って公開したwebページを掲載します)
git、GitHubに苦手なイメージがありましたが自分が理解していないことに気づき
もっとたくさん勉強しようと思いました!
これからも、勉強を楽しみます✨


