一般的にWebサイトを公開するためには エックスサーバー のようなレンタルサーバーを使用することが多いです。
しかし、ほとんどのレンタルサーバーはWebサーバーを使用しているため、静的なWebサイトのホスティングには向きません。
今回はいくつかある静的なWebサイトをホスティングするサービスの中で GitHub Pages というサービスを使用してWebサイトを公開するまでの方法を紹介します。
GitHub Pages とは
GitHub Pages は、GitHub が運営している静的なWebサイトを無料でホスティング・公開するサービスです。
公開したいWebサイトを管理している GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、Webサイトとして公開してくれます。
公開時のURL
デフォルトでは以下のような命名規則に沿ってページが公開されます。
https://ユーザ名.github.io/リポジトリ名この際、注意しなければいけないのは、ルートディレクトリが リポジトリ名 ではなく、 ユーザ名.github.io になるというところです。
aタグなどで herf="/" といった記述を行うと 404エラー となってしまいます。
自身の所持している独自ドメインを使用して カスタムドメイン を設定することも可能です。
GitHub Pages の使い方
1. GitHub でリポジトリを用意する
まず、Webサイトのソースコードを管理するリポジトリを用意します。
2. 公開するWebサイトを制作しリポジトリにpush
今回は、お試しというところもあり、シンプルにHTML・CSSだけで作成したWebサイトをリポジトリに push しました。
実際に push したリポジトリはこちら
https://github.com/pitolick/SummerWork
3. Settings （設定） を開く
メニューにある Settings を開くとリポジトリに関する各種設定画面が開きます。
その中でサイドバーにある Pages を開くと GitHub Pages に関する設定を行うことができます。
4. 公開するソースの設定をする
Souce と書かれた項目を選択し、設定を行います。
このときに行う設定の項目は以下の通り。
Select Branch
公開するブランチを選択します。
Git運用フローにもよりますが、 master や main といったブランチ名が多いかなと思います。
ここで選択したブランチが更新されると GitHub Pages で公開されているページも随時更新されるようになります。
Select folder
サイトルートとなるフォルダを選択します。
/ (root) か /docs を選択することができます。
/ (root) はリポジトリ直下のルート階層をサイトルートとして設定します。
/docs はリポジトリ直下にある /docs フォルダをサイトルートとして設定します。
事前に静的サイトジェネレータなどを使用してHTML化したファイルを設置する場合はこちらを選択すると良いでしょう。
Save
公開するブランチとサイトルートを設定したら、 Save ボタンで保存することができます。
5. 公開されたURLを確認する
Save を押して保存するとこのようなメッセージと公開される予定のURLが表示されます。
このメッセージが表示されているときは、 GitHub がリポジトリを解析して静的なWebサイトとして公開するための準備を行っている状態です。
この準備が完了するまでは公開予定のURLをクリックしても 404エラー となってしまいます。
しばらく待ってブラウザを更新すると、先程のメッセージが変わります。
このメッセージが表示されるとWebサイトとして公開が完了しています。
今回、実際に公開してみたWebサイトはこちら
https://pitolick.github.io/SummerWork/
まとめ
このように、 GitHub でリポジトリを作成することと、公開したい静的なWebサイトを作成することができれば、たったの数クリックでWebサイトを公開することができました。
ただし注意点としては、あくまで静的なWebサイトをホスティングするサービスなのでフォームやサイト内検索などの機能を実装するときは注意しましょう。
※実際に今回作成したWebサイト内のフッターにあるフォームは送信しても機能しません。
参考サイト
GitHub Pages について
https://docs.github.com/ja/pages/getting-started-with-github-pages/about-github-pages
