⛳

Webホスティング入門: GitHub Pagesで静的ページ作成からデプロイまで

2023/06/27に公開

GitHub

はじめに

クライアントはIPアドレスと信頼できるプロトコル(TCP)を利用してサーバにリクエストを送ります。サーバはクライアントのリクエストを受信すると適切な応答を準備してレスポンスを送ります。

しかし、クライアントのリクエスト対するサーバの適切な応答はいきなり出てくることではありません。サーバはクライアントのリクエストの応答するため、インターネットに連結されてる状態維持しないといけないです。それと、適切な応答をするため、資産を先に準備しておかないといけないです。
もし、サーバがクライアントが求める時に応答しなかったら、クライアントはそのサーバにはリクエストを送ることを諦めて、サーバに要請をしなくなります。それであれば、そのサービスを利用する使用者はなくなると思います。

それであれば、このサーバはどこでインターネットに連結されてる状態を維持するし、資産を保存しておくのでしょうか？

このどこかに保存して待機する空間を提供してくれることをホスティングだと言います。
今回はホステイングは何かと直接無料ホステイングサービスを利用して簡単なページを配布してみたいと思います。

Hostingとは

いつも通りホスティングサーバのWikipediaに検索してみました。

ホスティングサーバとは、インターネットなどのネットワークに接続されたサーバのことで、コンテンツを提供したり、サービスをホスト（host）することができるもののこと。Webサーバをホスト（host）している場合はWebホスティングサーバ、Eメールをホスト（host）する場合はメールホスティングサーバ、データベースをホスト（host）する場合はデータベースホスティングサーバと呼ぶ。

上記を参考すると、インターネット（ネットワーク）でWEBを利用してWEBサイトを提供することを意味します。なので、WEBサイトまたはアプリケーションなどインターネットで接続できるオンラインコンテンツを提供するために空間を借りることだと思います。

WEBアプリケーションを開発したら、どこかで保存しないといけないです。サーバはいつもインターネットに連結されてるしWEBアプリケーションに接続するクライアントのリクエストを処理しないといけないです。

ホステインぐサービスを提供する会社は開発した資産（WEBサイトファイル、データベース、イメージなど）をサーバに保存できるサービスを提供します。
このホステイングサービス会社のサーバを借りて開発したアプリケーションをクライアントに提供します。この時に以前勉強したドメイン名を利用して特定なアドレスも提供できます。

Hostingを提供する会社は多いです。最近はAWSのS3を利用して静的サイトできるし、無料ではGithubの機能を利用してHostingできます。

今回はGithubの無料機能を利用して簡単なページを作ってみると思います。

Github Page

GithubではGithub Pagesという機能を提供します。Github Pageは簡単な静的サイトをGithubリポジトリからホステイングされるので、リポジトリと連動することができます。
GitHub PagesはHTMLを作成できれば、問題なくホスティングができます。それとRuby基盤の静的サイト生成機Jekyellもサポートします。

Githubのアカウントがあればusername.github.ioからホスティングできます。他の設定を利用してリポジトリ名を追記して設定することもできます。
リポジトリと連動されてるので、リポジトリに対してプシュが発生したら、自動的に配布します。なので、簡単にデプロイすることができます。

Github Pageを使用して静的ページ配布

https://pages.github.com/

上記の内容を参考して静的ページを生成してホステイングをやってみたいと思います。

Githubに接続して新しいリポジトリを生成します。私はhosting-exampleという名で生成しました。他の設定はデフォルトままにしました。
リポジトリをクローンするため、コピーをクリックします。
好きなテキストエディターを開いてリポジトリをクローンします。私はVSCodeを使ったので、VSCodeの場合下記のコマンドを入力してリポジトリをクローンしてディレクトリを移動します。

git clone 「2からコピーしたURL」
cd 「リポジトリ名」
code .

移動したら、index.htmlを生成して下記のコードを貼り付けます。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    body {
      background-color: #edf2f7;
      flex-direction: row;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100vh;
      margin: 0;
      font-size: 70px;
      gap: 30px;
    }
  </style>
  <body>
    <div class="container">
      <a href="https://github.com/">
        <svg
          aria-hidden="true"
          height="100"
          width="100"
          viewBox="0 0 16 16"
          version="1.1"
          data-view-component="true"
          class="octicon octicon-mark-github"
        >
          <path
            d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"
          ></path>
        </svg>
      </a>
    </div>
    <div>Github Pageにようこそ!</div>
  </body>
</html>

下記のコマンドを入力してコミットとプシュをします。

git add .
git commit -m "Hello Github Pages"
git push

ソースコードが準備できたので、リポジトリの設定を変更します。
リポジトリの設定をクリックしてPagesのBranchをmain（特定な設定変更しなかったらMainがデフォルトブランチです。）をクリックして保存をクリックします。
その後、ちょっと時間が経ったら、View Siteをクリックします。
View Siteをクリックして以下のサイトを確認します。

まとめ

ここまで、Github Pagesを利用して静的ページを配布してホステイングをやってみました。
ホスティングはサーバがクライアントのリクエストに対する応答を保存するし、リクエストが来るまでに待機する空間を提供してくれます。Github Pagesみたいなどころを利用して別途のリソースやインフラなくても簡単にWEBアプリケーションを配布することができます。

次回は今まで学んだことをまとめてブラウザの動作原理について調査したいと思います。
今までの説明が皆さんにも分かりやすく説明できていればと嬉しいです。