準備、設定、起動: GitHub ページを使用して静的サイトを作成する

現在人気の Web 開発ツールとフレームワークがすべて揃っているため、Web サイトの作成はますます複雑になっています。 しかし、サイトで多くのインタラクティブ性を必要としない場合もあります。 閲覧者に情報を伝えることに重点を置いていて、複雑な機能を必要としない場合は、静的サイトが適切な選択かもしれません。

このチュートリアルでは、静的サイトとは何か、その利点、制限、および GitHub Pages を使用して無料で HTML と Bootstrap で作成されたシンプルな個人用 Web サイトを作成およびデプロイする方法を学びます。

GitHub ページとは?

GitHub は、Git リポジトリをホストし、ソフトウェア プロジェクトで共同作業するための Web ベースのプラットフォームです。 コード変更の共有と追跡、コードの管理とレビュー、およびプル リクエストを開いてレビューする機能を提供します。

Git と GitHub を混同しないでください。 GitHub は開発者間のコラボレーションを可能にするホスティング サービスですが、Git はソフトウェア プロジェクトの状態のスナップショットを保存するために使用するローカル バージョン管理ソフトウェアです。

GitHub Pages は、GitHub の最高の機能の 1 つです。 GitHub リポジトリから直接静的 Web サイトをホストできるサービスです。 これは、リポジトリを使用して Web サイトのコードとファイルを保存できることを意味し、GitHub はオンラインでアクセスできる Web サイトとしてそれらを自動的に公開します。

要約すると、GitHub ページは、Web サイトを立ち上げて実行するための迅速かつ簡単な方法であり、ポートフォリオ、オープンソース プロジェクト、またはその他の静的コンテンツを紹介するのに特に役立ちます。

静的ウェブサイトと動的ウェブサイト

これまで見てきたように、GitHub Pages は静的 Web サイトをデプロイする方法を提供します。 しかし、静的 Web サイトと動的 Web サイトの違いは何でしょうか?

上記のサイトのコンテンツについて話し合うことから始めましょう。

静的コンテンツとは、ユーザーが誰であるか、またはサイトで実行するアクションに関係なく、すべてのユーザーに対して同じままである Web サイトの要素を指します。 これには、Web サイトのテキスト、画像、レイアウト、およびサイトを構成する基盤となるコードやファイルが含まれます。 静的サイトは、保存されているとおりにユーザーに配信されます。

対照的に、動的コンテンツは、サインイン、ペイウォールとの対話、投稿へのコメントなどのユーザーのアクション、または現在の時間や場所などのその他の要因に基づいて変化するコンテンツです。

たとえば、製品の静止画像を表示する Web サイトは、すべてのユーザーに常に同じ画像を表示します (静的)。 一方、現在の時刻を表示する Web サイトは、ユーザーの場所 (動的) に基づいて、各ユーザーに異なる時刻を表示します。

一般に、フロントエンドに HTML、CSS、JavaScript のみが含まれ、データベースとやり取りする PHP や Python などのサーバー技術が含まれていない場合、Web サイトは静的であると言えます。

GitHub Pages を使用して動的 Web サイトを構築することはできませんが、WordPress などの CMS や Gatsby や Hugo などの静的サイト ジェネレーターを使用して独自の Web サイトを簡単に構築できます。

GitHub ページの主な機能

ホスティング サービスとしての GitHub Pages の強みを見てみましょう。

1. 簡単なセットアップと公開: GitHub Pages を使用すると、いくつかの簡単な手順で簡単に開始できます。 リポジトリに対して GitHub ページを有効にし、Web サイト ファイルのソースを指定すると、GitHub が Web サイトを自動的に公開し、ユーザー名とリポジトリ名に基づいて URL で使用できるようにします。
2. カスタム ドメイン: GitHub Pages を使用すると、GitHub が提供する既定の URL の代わりに、Web サイトにカスタム ドメイン名を使用できます。 これにより、独自のブランディングを使用して、ユーザーが Web サイトを見つけてアクセスしやすくなります。
3. HTTPS のサポート: GitHub Pages は、Web サイトへの安全な接続を可能にする HTTPS のサポートを提供します。 これは、サイトの信頼を構築するために重要です。
4. Jekyll のサポート: GitHub Pages は、テンプレートやその他の機能を使用して洗練された Web サイトを作成できる静的サイト ジェネレーターである Jekyll をサポートしています。 これにより、すべてのコードをゼロから作成する必要がなく、プロフェッショナルな外観の Web サイトを簡単に作成できます。

制限事項

前に述べたように、静的サイトは GitHub Pages でのみ作成できます。 多くの機能を備えた複雑なプロジェクトを構築したい場合は、他のホスティング サービスが必要になります。 また、オンライン ビジネスや e コマースの運営などの商用目的で GitHub ページを使用できないことにも注意してください。

GitHub Pages では、サイトを 1 GB より大きくすることはできません。つまり、リポジトリのファイルがそのメモリ量を超えることはできません。 ほとんどの場合、静的サイトには 1 GB で十分です。 必ず画像を圧縮してください。

また、1 か月あたり 100 GB の帯域幅のソフト制限もあります。 この量の帯域幅は、Web サイトを 1 か月に数千人に配信するのに十分なので、大勢の視聴者がいなければ問題ありません。

GitHub Pages を使用した作成とデプロイ: ステップバイステップ ガイド

GitHub ページの作成は、静的サイトをホストするためのシンプルでわかりやすいプロセスです。 なんらかのデータベース接続が必要な場合は、外部データベース プロバイダーが必要であることに注意してください。

次のガイドでは、GitHub ページをゼロから作成する方法を学習します。 これには、リモート リポジトリの作成、HTML を使用したレスポンシブな個人 Web サイトの構築、GitHub を使用した Web へのデプロイが含まれます。

始めましょう！

1. GitHub にサインアップする

開始するには、アクティブな GitHub アカウントが必要です。 お持ちでない場合は、サインアップページにアクセスしてください。 フォームへの入力に数分以上かかることはありません。

サインインすると、リモート リポジトリを作成できるようになります。

2. リモート リポジトリを作成する

リポジトリは、特定のプロジェクトに関連するすべてのコードを格納するディレクトリです。

GitHub ホームページから、サイトの左側のパネルにある [新規] または [リポジトリの作成] ボタンをクリックします。 これにより、リポジトリの情報を入力するフォームにリダイレクトされます。

これらの次のステップは重要です。

1. リポジトリの名前を"yourusername".github.ioに設定します。
2. 公開ボタンを確認してください。 サイトを公開するには、リポジトリを公開に設定する必要があります。
3. README を追加します。

特定の個人アカウントまたは組織のリポジトリのみを持つことができます。 そのため、リポジトリの名前はユーザー名とgithub.ioドメインです。 後で、リポジトリからサイトをセットアップする方法について説明します。

GitHub Pro を持っていない限り、リポジトリが公開されている場合にのみ GitHub ページを公開できます。 サイトのソース コードを公開したくない場合は、この点に注意してください。

この後、次のようなものが必要です。

サイトの作業ソース コードが既にある場合は、一般的な Git ワークフローをスキップして、代わりにファイルを直接リポジトリにドロップできます。

これを行うには、リポジトリでAdd fileメニューをクリックし、 [ファイルをアップロード]オプションを選択します。 次に、 index.htmlという名前のメイン HTML ファイルを使用して、Web サイトのファイルを選択します。 すべての CSS および JavaScript ファイルもリポジトリに配置することを忘れないでください。

最後に、 [変更をコミット]ボタンをクリックします。

次のセクションでは、HTML と Bootstrap を使用して簡単な個人用 Web サイトを構築します。 次に、それを GitHub にアップロードし、カスタム ドメインを持つ GitHub パブリック ページとして設定します。

3. 個人用サイトを構築する

作成したばかりの GitHub リポジトリのクローンを作成することから始めます。 これを行うには、コンピューターに Git クライアントが既にインストールされていることを確認してください。 (そうでない場合は、Git と GitHub のチュートリアルをご覧ください。)

リポジトリのcodeタブに移動し、 SHHオプションで SSH URL をコピーします。

次に、ターミナルまたはコマンド ラインを起動します。 ほとんどの Linux ディストリビューションと macOS では、ショートカットCtrl + Alt + Tを使用するか、システムのアプリ メニューからTerminalを探すことができます。 Windows では、Git、CMD、PowerShell、または GUI クライアントと共にデフォルトでインストールされる Git BASH を使用できます。

ターミナルで、 git cloneとコピーした URL を入力します。 これにより、ローカル マシンにリモート リポジトリのコピーがダウンロードされて作成されるため、Web サイトを構築できます。

次に、 yourusername.github.ioという名前の新しいフォルダーにcdとlsを入力します。 プロジェクトの構成とメタデータを含む.gitフォルダーと、作成した場合はREADME.mdファイルが表示されます。

お気に入りのテキスト エディター (Sublime Text など) を開いて、Web サイトの作成を開始しましょう。

リポジトリのルートで、 index.htmlという名前のファイルを作成し (この名前は GitHub ページで必要です)、典型的な HTML コード構造を入力します。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinsta User</title> </head> <body> </body> </html>

前述したように、レスポンシブ Web サイトをより簡単に構築するのに役立つオープンソースの CSS フレームワークである Bootstrap 5.0 を使用します。 ご覧のとおり、この特定のサイトにカスタム CSS を使用する必要はありません。

Bootstrap をページに組み込むには、コンパイル済みの CSS と JavaScript を CDN 経由で含める必要があります。 次のコードを HTML <head>内に貼り付けて、Bootstrap CSS を使用できるようにします。

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

これと同じ方法で、一般的なプログラミング言語とテクノロジの SVG アイコンを問題なく使用できるように、Devicon CDN も含めます。

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">

ここで、JavaScript を含めるために、次のコードを</body>タグの末尾のすぐ上に挿入します。

 <!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

まず、Web サイトのヘッダーを作成します。 これは暗いヘッダーで、インデックス ページと他の 2 つのページ (「プロジェクト」と「読書ログ」) へのリンクがあり、後で作成できます。

 <nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav>

Bootstrap ラッパーのnavbarとnavbar-expand-lgを使用して、表示幅が 992px より小さい場合に折りたたまれるレスポンシブ コンテナーを作成します。 これは、グリッド オプションlgが原因で発生します。 グリッド オプションについて詳しく知りたい場合は、Bootstrap のレイアウト ページをご覧ください。

それでは、コンテナー内に 2 つのレスポンシブ列を作成しましょう。1 つは Unsplash からの無料の画像用で、もう 1 つは自分自身の説明用です。

 <div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>

ご覧のとおり、ローカル ファイルからイメージを取得しているため、変更を GitHub リポジトリにプッシュするときは、リポジトリにある必要があります。

最後に、Bootstrap コンテナー内で、Devicon の SVG アイコンと、スキルを目立たせるための内部 CSS を使用します。

 <!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div>

<i> HTML タグを使用しているため、フォントとして扱うことができます。 したがって、 styleタグで宣言することにより、ロゴのサイズを4 emに設定します。

この単純な個人 Web サイトの最終的な結果は次のとおりです。

ウェブサイトのトラフィックの 50% 以上がモバイル デバイスから来ていることをご存知ですか? Bootstrap を使用したため、多くの CSS コーディングを節約でき、レスポンシブな Web サイトも得られました。

このサイトは好きなだけカスタマイズできます。 自由に使える GitHub の完全なソースを次に示します。

フル機能のアプリケーション ホスティング ソリューションの 1 つを使用して、Ghost などのヘッドレス CMS を接続することもできます。 MyKinsta ダッシュボードから GitHub リポジトリに直接接続し、数分で新しいサイトを立ち上げることができます。

ファイルをプッシュする時が来ました。 これを行うには、ターミナルのプロジェクトの最上位で次のコマンドを実行します。

 git add . git commit -m "Added website source code and image" git push

これで、この Web サイトを使用して GitHub ページをセットアップできます。

4. ユーザー GitHub ページの公開

ユーザー名にちなんで名付けられたリモート リポジトリにindex.html をプッシュするとすぐに、GitHub は自動的にワークフロー プロセスを開始してサイトをオンラインにセットアップします。 数分かかる場合がありますが、静的サイトが自動的に起動して実行されます。

サイトの URL は次のようになります: https://kinstauser.github.io/

10 分経ってもサイトがオンラインにならない場合は、コードにダミーの変更を加え (スペースを追加するなど)、再度プッシュして GitHub ページの構築プロセスを再アクティブ化してみてください。

5. リポジトリ GitHub ページの公開

これまではユーザー サイトを作成してきましたが、複数の GitHub サイトを公開したい場合はどうすればよいでしょうか。 次に、プロジェクト サイトを使用する必要があります。

例として、Git for Web 開発チュートリアルで作成した HTML テクノロジ サイトを使用します。

最も簡単な方法は、リポジトリの[設定]タブに移動し、[コードと自動化] セクション内の[ページ]オプションに移動することです。

ソースDeploy from a branchを選択し、ファイルのデプロイ元のブランチをクリックします。 メイン ブランチから公開することを強くお勧めしますが、補助ブランチを使用して機能を作成し、バグを修正してからマージします。 このようにして、公開されたサイトに簡単にエラーを導入することはありません。

ブランチを選択したら、ファイルを提供するフォルダー (通常はルート ( / )) を選択し、[保存] をクリックします。

もう一度、数分待ちます。 サイトは"yourusername".github.io/で利用できるはずです。

リポジトリ サイトを非公開にするには、 [設定] 、 [ページ]の順に移動し、3 つのドットのオプションをクリックします。 Unpublish site というメッセージが表示されたボックスが表示されます。

素晴らしい！ オープンソース プロジェクトのサイトを立ち上げて実行していますが、ドメイン名自体が長く、覚えるのが容易ではありません。 これを改善する方法を見てみましょう。

6. カスタム ドメインの設定

GitHub ページのカスタム ドメインをセットアップし、それが機能することを確認する最も簡単な方法は、DNS プロバイダーにアクセスして、GitHub ページの IP アドレス用に 4 つの A レコードを作成することです。

 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

また、 yourusername.github.ioをターゲットとして CNAME レコードを設定する必要があります。 通常、DNS の変更には時間がかかるため、丸 1 日かかる場合もありますので、しばらくお待ちください。

これを行った後、リポジトリの設定の[カスタム ドメイン]セクションに移動し、ドメインを入力して[保存]ボタンをクリックし、GitHub がカスタム ドメインを確認するのを待ちます。

また、DNS がサポートしている場合は、 [HTTPS を強制する]チェックボックスをオンにして、HTTPS 経由でのみサイトを提供します。

おめでとう！ チュートリアルのこの時点まで進めていれば、GitHub Pages で無料でホストされている静的 Web サイトを持っていることになります。

GitHub ページのベスト プラクティス

別れる前に、GitHub サイトを公開する際に考慮すべきいくつかのベスト プラクティスを次に示します。

1. デプロイ元のブランチに直接コミットしないでください。 他のブランチで変更を作成してから、プル リクエストを作成します。
2. 余裕があれば、サイトに適したドメインを選択してください。 これは、個人またはプロジェクトのブランドにとって最も重要な決定の 1 つです。
3. e コマース サイトの立ち上げなど、商用目的で GitHub ページを使用しないでください。
4. ニーズを評価します。 静的サイトを無料で公開できるのは素晴らしいことですが、大量のトラフィックが予想される場合や複雑な機能が必要な場合は、優れたホスティング サービスに料金を支払うことをお勧めします。

まとめ

Web 開発は日々複雑化しています。 静的サイトはインターネットの出現以来存在しており、プロジェクトの作成を開始するのに最適な方法です。

このチュートリアルでは、静的サイトとは何か、GitHub Pages を使用してそれらをオンラインで設定する方法を学びました。 Bootstrap を使用して簡単な個人用サイトを作成し、GitHub ユーザー サイトとして公開しました。 また、プロジェクトのサイトを立ち上げて実行する方法と、必要に応じて非公開にする方法も学びました。

全体として、GitHub Pages は静的 Web サイトを無料でホストするための便利で強力な方法です。 ポートフォリオを紹介したり、オープンソース プロジェクトを共有したり、オンライン プレゼンスの作成を開始したりする場合でも、GitHub Pages は優れた選択肢です。 十分なトラフィックが得られるか、フルスタック サイトを作成する準備が整ったら、Kinsta のような他のアプリケーション ホスティング サービスにスムーズに移行できます。