【初心者向け】GitHub pagesで無料で静的ページを公開する
本ページはプロモーションが含まれています
GitHubにはGitHub pagesという機能がありまして、自分で作成したページを無料で公開することができます。ホームページを作成するとついて回るのはレンタルサーバーの問題だったり、ドメインの問題があったりして、なかなか敷居が高いところですが、GitHub pagesを利用すれば、アカウントさえあれば無料で公開できますので、勉強にはもってこいです。早速やってみましょう。
公開するページを用意する（html/cssファイルなど）
とはいえ、自分も含めてGitHub pagesの初心者にとっては、ページを用意するといってもすぐに作ることはできないかと思います。なので、ありもの（Bootstrapのサンプル）にちょっと手を加えてページを公開できるようにしたいと思います・
Bootstrapではカスタマイズすればすぐに使えるサンプルを無料で公開していますので、GitHub pagesの勉強用に活用させてもらいましょう。今回、自分は「Album」というサンプルを活用させてもらいます。
Bootstrapのサンプルページを少しだけ書き換える
そのままアップすると、CSSが適用されないので、2箇所だけちょっと書き換えます。エディタは何でも良いので、以下のように変更してください。変更後は保存を忘れないように。
CSSの差し替え
【変更前】
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
【変更後】
Bootstrapのドキュメントに書いてあるCSSの部分をコピーして差し替えてください（以下の画像の部分をコピーして置き換える感じです）
JSの差し替え
JSも同じように差し替えをお願いします
【変更前】
<script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
【変更後】
Bootstrapのドキュメントに書いてあるJSの部分をコピーして差し替えてください（CSSと同じ作業です）
リポジトリを作成する
リポジトリという言葉は聞き慣れないですが、今回のファイルを格納する場所と思ってもらえれば大丈夫です。
GitHubにアクセスして、ログインした状態だとキャプチャのような画面が表示されていると思いますので、画面左上の[Create repository]を選択しましょう。
レポジトリ名を入力して、[Create repository]を選択しましょう。レポジトリ名は何でもOKなので好きなものを入力しましょう。自分はいずれポートフォリオでも作れたらなーと思ってとりあえず適当に「portfolio」としましたが、なんでもOKです。
このような画面が表示されたら、リポジトリの作成は完了です。聞き慣れない言葉で抵抗感ありますが、新しいフォルダ的なのを作成するだけなので、簡単にできましたね。
公開したいファイル（html/cssなど）をアップロードする
ここからは公開したいファイルをアップロードしたいと思います。先程用意しましたBootstrapのサンプルを公開してみましょう。
公開するページとなる「index.html」をアップするため、[uploading an existing file]を選択します。
画面中央に今回アップする「index.html」ファイルをドラッグ&ドロップで持ってきて、[Commit changes]を選択します。
こんな感じの画面が表示されればアップロード完了です。
アップロードしたWebページを公開する
GitHubにページをアップロードしただけではまだ公開はできていません。最後、GitHub側で設定してあげることで、一般に見れるようになります。
画面右上の[Settings]を選択します。
画面を下にスクロールしていくと、GitHub pagesの項目があります。ここで、Sourceの部分を以下のように変更します。
Branch：main
Folder：(root)
この様になっているのを確認したら[Save]を選択します。
もう一度下にスクロールすると、GitHub pagesの項目が変わって、
「Your site is ready to be published at 〜」のようになっているはずです。
今回作成してみたページ：https://monaka496.github.io/portfolio/
アクセスしてみて問題なくページが表示されれば完了です！あとはWEBページを自分好みにカスタマイズしたり、同様の手順でcssや画像ファイルなどもアップすれば、より本格的なページを作成することもできます。
まとめ
今回はGitHub pagesを利用して無料で静的ページを公開してみました。htmlやcssなどいろいろ学習教材が出ていたりしますが、実際に公開するとなるとレンタルサーバーの契約だったりいろいろ大変だったりするので、無料で公開できるGitHub pagesを紹介してみました。
今回、記事を作るにあたり初めて使ってみたのですが、簡単に公開することができました。これが無料で使えるのは非常にありがたいですね。簡単なランディングページを作成するならGitHub pagesでも十分なんじゃないかなと思いました。ドメインも無料でもらえるし。
どこまで続くかわかりませんが、今回のGitHub pagesを足がかりにWEB制作の勉強をいろいろチャレンジしてみたいと思います。
