話題のウェブ開発ツールやフレームワークを筆頭に、サイトの構築がますます複雑になっている今日。しかし、サイト上にインタラクティブ要素がほとんど必要ない場合もあります。単にユーザーに情報を提供することだけが目的で、高度な機能が必要でなければ、静的サイトを作成するのが得策かもしれません。

今回は静的サイトとの概要、メリットとデメリットをご紹介し、GitHub Pagesを使用し、HTMLとBootstrapを組み合わせてシンプルな個人サイトを無料で作成、デプロイする方法を見ていきます。

GitHub Pagesとは

GitHubは、Gitリポジトリをホストし、ソフトウェアプロジェクトで共同作業を行うためのウェブプラットフォームです。コードの共有や変更点の追跡、コードの管理やレビュー、プルリクエストのオープンや確認のための機能が豊富に揃っています。

GitとGitHubは別物であることにご注意を。GitHubは開発者同士のコラボレーションを可能にするホスティングサービス、Gitはプロジェクトの状態のスナップショットを保存するために使用するローカル環境のバージョン管理ソフトウェアです。

GitHub Pagesは、GitHubの優れた機能のひとつで、GitHubリポジトリから直接静的サイトをホストすることができます。つまり、リポジトリを使ってサイトのコードやファイルを保存しておけば、GitHubが自動的にオンラインでアクセス可能なサイトとして公開してくれるというわけです。

GitHub Pagesを活用すれば、サイトを即座に立ち上げることができるため、ポートフォリオやオープンソースプロジェクト、その他の静的コンテンツを簡単に配信することができます。

静的サイトと動的サイト

先に触れた通り、GitHub Pagesは静的サイトのデプロイに便利です。本題に入る前に、静的サイトは動的サイトとどのように異なるのかを理解しておきましょう。

まず、静的コンテンツとは。

静的コンテンツとは、その人や行動に関わらず、すべてのユーザーに提供されるサイトの要素です。これには、サイトのテキスト、画像、レイアウト、サイトを構成する基本的なコードやファイルなどが含まれます。静的サイトは、保存されたままの状態でユーザーに配信されます。

対照的に、動的コンテンツはサインイン、ペイウォール（料金を支払うと閲覧できるコンテンツ）、投稿へのコメントなど、ユーザーの行動や時間や場所など、他の要因に基づいて変化するコンテンツを指します。

例えば、商品の静止画を表示するサイトは、どのユーザーにも常に同じ画像が表示（静的）されます。一方、現在時刻を表示するサイトは、ユーザーの位置情報に基づき、ユーザーごとに異なる時刻を表示（動的）します。

一般に、フロントエンドがHTML、CSS、JavaScriptで構成され、PHPやPythonのようなデータベースとやりとりするサーバー技術を含まないサイトは「静的」と定義されます。

X（Twitter）は動的サイト
X（Twitter）は動的サイト

GitHub Pagesで動的サイトを作成することはできませんが、WordPressのようなコンテンツ管理システム（CMS）や、Gatsby、Hugoなどの静的サイトジェネレーターを使用すれば、簡単に構築可能です。

GitHub Pagesの主な機能

ホスティングサービスであるGitHub Pagesには、以下のような強みがあります。

  1. 簡単なセットアップと公開：GitHub Pagesの利用は簡単で、リポジトリのGitHub Pagesを有効にしてサイトファイルのソースを指定すれば、GitHubによってサイトが自動的に公開され、ユーザー名とリポジトリ名に基づいたURLを取得できる。
  2. 独自ドメイン：GitHubが提供するデフォルトのURLではなく、独自ドメインをサイトに設定可能。独自のブランディングを適用することができる。
  3. HTTPS対応：サイトの信頼性を確保するのに重要なHTTPS接続をサポート。
  4. Jekyllのサポート：Jekyllは、テンプレートやさまざまな機能を使って洗練されたサイトを構築できる静的サイトジェネレーターで、コードをゼロから書くことなく、本格的なサイトを簡単に作成できる。

GitHub Pagesの制限事項とKinstaとの比較

GitHub Pagesは、特に初心者にとって静的サイトの入門として費用対効果が高い一方、より複雑なプロジェクトや商業目的のプロジェクトには妨げとなる制約があります。Kinstaでは、このような制約にも対応する包括的な静的サイトホスティングを無料で提供しています。

  1. 静的サイトジェネレーター（SSG）のサポート： GitHub Pagesは、GitHub PagesのデフォルトSSGであるJekyllを主にサポートしています。Kinstaの静的サイトホスティングは、すべてのNode.jsベースのSSGをサポートし、デプロイ前にCI/CDを使用して他のSSGをビルドすることも可能です。多機能なプロジェクトを構築する柔軟性を実現します。
  2. 公開リポジトリの要件： 無料のGitHubアカウントの場合、サイトのデプロイに公開リポジトリを使用することになるため、プライバシーとセキュリティに限界があります。Kinstaでは、リポジトリのプライバシーを維持してコードのセキュリティを確保することができます。
  3. ヘッドレスCMS： KinstaではWordPressホスティングを提供しているため、ヘッドレスWordPressを使用してCMSからSSGにデータを取り込むことができます。また、その他の任意のヘッドレスCMSを使用することも可能です。
  4. ストレージと帯域幅：GitHub PagesとKinstaのどちらも、ストレージは最大1GB、帯域幅は月間100GBまで利用することができます。

開発者の方、または企業でプロジェクトの要件に適したプラットフォームをお探しの場合は、この両者の違いは参考になるはずです。

GitHub Pagesでのサイト作成およびデプロイ方法

GitHub Pagesを使ったサイトの作成はシンプルで、手間をかけることなく静的サイトをホストすることができます。ただし、何らかのデータベース接続が必要な場合は、別途外部のデータベースホスティングが必要になります。

それでは、ゼロからサイトを作成する手順を見ていきましょう。リモートリポジトリの作成から、HTMLを使ったレスポンシブな個人サイトの構築、そしてGitHubを使ったウェブへのデプロイまで網羅します。

1. GitHubでアカウント登録

はじめに、GitHubのアカウントが必要です。まだお持ちでない場合は、こちらからアカウント登録してください。以下のフォームに必要な情報を入力します。

GitHubのアカウント登録ページ
GitHubのアカウント登録ページ

アカウントを作成したら、リモートリポジトリを作成します。

2. リモートリポジトリの作成

リポジトリとは、特定のプロジェクトに関連するすべてのコードを保存するディレクトリを意味します。

GitHubのトップページから、左側の「New」または「Create repository」をクリックすると、リポジトリ情報を入力するフォームにリダイレクトされます。

GitHubリポジトリを作成
GitHubリポジトリを作成

続いて、以下の手順に従ってください。この手順は重要になります。

  1. リポジトリ名を(ユーザー名).github.ioにする。
  2. 「public」にチェックを入れます。サイトを公開するには、リポジトリを「Puclic」に設定する。
  3. READMEを追加する。

リポジトリは、指定した個人アカウントまたは組織でのみ所有することができます（リポジトリの名前がユーザー名とgithub.ioドメインになるのはそのため）。リポジトリからサイトをセットアップする方法は、後ほど見ていきます。

GitHubの有料プランを使用していない限り、リポジトリが公開されていなければ、サイトを公開することはできません。サイトのソースコードを公開したくない場合は、この点に注意してください。

ここまでの手順を終えると、次のような画面になります。

GitHubリポジトリのフォーム
GitHubリポジトリのフォーム

すでにサイトのソースコードが出来上がっている場合は、通常のGitワークフローを省略して、ファイルをそのままリポジトリに追加可能です。

これを行うには、リポジトリのAdd fileメニューをクリックし、「Upload files」を選択。サイトファイルを選択して、メインのHTMLファイルをindex.htmlという名前にしてください。CSSとJavaScriptファイルもすべてリポジトリに追加することをお忘れなく。

最後に「Commit changes」をクリックします。

ファイルをGitHubにアップロード
ファイルをGitHubにアップロード

続いては、HTMLとBootstrapを使ってシンプルな個人サイトを作成していきます。作成後はGitHubにアップロードし、GitHubの公開ページとして独自ドメインを設定します。

3. 個人サイトの作成

まずは、先ほど作成したGitHubリポジトリを複製します。すでにGitクライアントがインストールされていることを確認してください（まだの場合は、GitとGitHubの統合方法をご覧ください）。

リポジトリのcodeタブに移動し、「SSH」タブに表示されるURLをコピーします。

リポジトリのSSH URL
リポジトリのSSH URL

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

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

git cloneコマンド
git cloneコマンド

cdとlsを使って、「ユーザー名.github.io」フォルダに移動すると、.gitフォルダが表示されるはずです。このフォルダには、プロジェクトの設定とメタデータ、README.mdファイル（作成した場合）が含まれています。

任意のテキストエディター（Sublime Textなど）を開き、サイトを作成していきます。

リポジトリのルートにindex.htmlという名前のファイル（GitHub Pagesではこの名前が必須）を作成し、基本的な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>

今回は、オープンソースのCSSフレームワーク、Bootstrap 5.0を使用します。レスポンシブなサイトを簡単に構築するのに便利です。今回作成するサイトでは、高度なCSSは使用しません。

Bootstrapをページに取り込むには、CDN経由でコンパイルされたCSSとJavaScriptを取り込む必要があります。Bootstrap CSSを使用するには、次のコードをHTML<head>の中に貼り付けます。

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

これと同じ方法で、Devicon CDNも取り込み、主要なプログラミング言語や技術のSVGアイコンを使えるようにします。

<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>

まずは、サイトのヘッダーから作成します。暗い色のヘッダーで、インデックスページと後で作成する「プロジェクト」と「読書記録」の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" id="navbarTogglerDemo02">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" href="#">プロジェクト</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">読書記録</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="" srcset="">
        </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>ソフトウェア開発者として、ソフトウェアアプリケーションの創造と開発に情熱を注ぐ。
                    常に新しい技術やアプローチを学び、実験し、
                    複雑な問題に対する革新的で効果的な解決策を生み出すことに尽力。
                    好奇心と問題解決への情熱を原動力に、ユーザーの要望に応える
                    高品質でデザイン性の高いソフトウェアを開発している。
                </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>開発経験</h1>
    </div>
    <div class="row ">
        <style>
            I {
                font-size: 4em;
            }
        </style>
        
        <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>

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

実際の外観は以下のようになります。

個人サイトのページ
個人サイトのページ

サイトのトラフィックの50%以上がモバイル端末から生み出されています。Bootstrapを使用したことで、CSSコーディングの手間が省け、モバイル端末にも対応するレスポンシブなサイトになります。

レスポンシブなページでモバイル端末にも対応
レスポンシブなページでモバイル端末にも対応

あとは自由にカスタマイズしてみてください。ソースコードの全貌はこちらで参照可能です。

Kinstaのアプリケーションホスティングを利用して、GhostのようなヘッドレスCMSを組み合わせることもできます。MyKinstaからGitHubのリポジトリに直接接続し、ほんの数分で新規サイトを構築可能です。

次に、ファイルをプッシュします。ターミナルのプロジェクトのトップレベルで次のコマンドを実行します。

git add .
git commit -m "サイトのソースコードと画像を追加"
git push

あとは、このサイトを使用してGitHubページを立ち上げるのみです。

4. GitHubページの公開

index.htmlをユーザー名のリモートリポジトリにプッシュすると、自動的にワークフローが起動します。数分待つと、静的サイトの立ち上げが完了します。

サイトURLはhttps://kinstauser.github.io/になります。

10分経ってもサイトが公開状態にならない場合は、コードに何らかの変更を加えて（スペースを追加するなど）、もう一度プッシュしてGitHub Pagesのビルドプロセスを再度実行してみてください。

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

ここまではユーザーサイトを作成してきましたが、複数のGitHubサイトを公開したい場合は、プロジェクトサイトが必要です。

例として、Gitでのウェブ開発で作成したHTMLの技術サイトを使用します。

簡単な方法として、リポジトリの「Settings」タブを開き、「Code and automation」セクションの「Pages」を選択してください。

リポジトリの設定
リポジトリの設定

「Deploy from a branch」をソースとして選択し、ファイルをデプロイしたいブランチをクリックします。「main branch」から公開し、補助的なブランチを使って機能を開発したりバグを修正したりして、マージするのがおすすめです。これによって、公開したサイトにエラーを持ち込んでしまう可能性を下げることができます。

ブランチを選択したら、ファイルを配置するフォルダを選択して保存します。通常はルート（/）です。

メインブランチから公開
メインブランチから公開

数分待つと、サイトが（ユーザー名）.github.io/でアクセス可能になるはずです。

リポジトリサイトの公開を停止するには、「Settings」＞「Pages」と進み、3つの点をクリックします。すると、「Unpublish site」というメッセージのボックスが表示されます。

サイトを非公開にする
サイトを非公開にする

これでオープンソースプロジェクトのサイトを立ち上げることができましたが、ドメイン名が長すぎます。独自ドメインを設定して改善しましょう。

6. 独自ドメインの設定

GitHubページで独自ドメインを設定する簡単な方法として、DNSサービスでGitHubページのIPアドレスのAレコードを4つ作成します。

185.199.108.153 (新しいタブで開く
185.199.109.153
185.199.110.153
185.199.111.153

また、（ユーザー名）.github.ioをターゲットにしたCNAMEレコードも設定します。通常、DNSの伝播には時間がかかります（丸一日かかることも）。

これを終えたら、リポジトリの設定にある「Custom domain」セクションでドメインを入力し、「Save」をクリックして、GitHub側での独自ドメインの検証を待ちます。

お使いのDNSがHTTPSをサポートしている場合は、「Enforce HTTPS」ボックスにチェックを入れ、HTTPSでのみサイトを配信するようにしてください。

HTTPSリダイレクトを有効にする
HTTPSリダイレクトを有効にする

これで、GitHub Pagesを使用して、静的サイトを無料でホスティング/公開できているはずです。

GitHub Pagesのベストプラクティス

最後に、GitHubサイトを公開する際のベストプラクティスをいくつかご紹介します。

  1. デプロイ元のブランチに直接コミットしないこと。他のブランチに変更を加えてからプルリクエストを作成する。
  2. 可能であれば、サイトのドメインは優れたものを選択すること。ドメイン名は、個人やプロジェクトのブランディングに重要な要素のひとつ。
  3. GitHub Pagesは、ECサイトの構築など商業目的では使用しないこと。
  4. 要件を見極めること。無料で静的サイトを公開できるのは画期的だが、アクセスが多くなることが予想される場合や、複雑な機能が必要になる場合は、優れたホスティングサービスに投資するのが賢明。

まとめ

ウェブ開発は日々複雑化しています。インターネットが誕生した当初から存在している静的サイトは、プロジェクトを素早く始めるには有用な選択肢です。

今回は、静的サイトの基礎に触れ、GitHub Pagesを使って静的サイトを立ち上げる方法をご紹介しました。Bootstrapを使ってシンプルな個人サイトを作成し、GitHubのユーザーサイトとして公開する例を取り上げました。また、サイトを立ち上げた後、必要に応じて公開を停止する方法もこれで理解できたはず。

GitHub Pagesは、無料で静的サイトをホストできる便利で優れた選択肢です。ポートフォリオを紹介したり、オープンソースプロジェクトを共有したり、オンラインプレゼンスを素早く確立したりするのに役立ちます。十分なトラフィックを獲得できるようになり、フルスタックのサイトを作成する準備が整ったら、Kinstaのようなアプリケーションホスティングにシームレスに移行することも可能です。

Daniel Diaz

Daniel is a self-taught Python Developer, Technical Writer, and long-life learner. He enjoys creating software from scratch and explaining this process through stunning articles. Follow him on Twitter: @DaniDiazTech