2020.11.17

GitHubページを使ってWebページを作成する方法

Github

1. 新しくリポジトリを作成する

GitHub ページを作成するためにまずは新しくリポジトリを作成します。ここでは「test」というリポジトリ名で作成しています。

alt

2. ローカルにリポジトリを複製しファイルを作成する

リポジトリを作成したら、git cloneコマンド（ターミナルを使用）を使ってローカルにリポジトリを複製します。git clone HTTPS または SSHで複製が可能です。

git clone https://github.com/kakioku/test.git

複製が完了するとリポジトリ名のフォルダ（test）が作成されているので、そのフォルダに GitHub ページで表示したいファイルを作成します。ここでは下記のようなhtmlをいれてみます。

<!--index.html-->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index</title>
  </head>
  <body>
    <h1>Index</h1>
  </body>
</html>

3. GitHub へ反映

ファイルを作成したら GitHub へ反映させます。

まず、リポジトリを複製したファルダに移動します

cd test

git に変更を登録

git add -A

メッセージを指定してコミット

git commit -m "first"

プッシュで GitHub に反映させます

git push -u origin master

4. GitHub ページを作成

GitHub にファイルが反映されたら、**Settings ページへ移動し、GitHub Pages の Source を None から master に変更し save ボタンを押します。**GitHub ページが作成されるまで少し時間がかかりますが（1 分くらい）これで GitHub Pages ページが作成されます。

alt

参照: GitHub Pages

5. 新しいページを作成してリンクをつける

ここでは、新しく content フォルダを作成し、その中にpage.htmlを新しいページとして作成し、index.htmlとpage.htmlにそれぞれリンクをつけてページ移動をしてみます。

index.htmlからpage.htmlへのリンクは下記のようになります。リンクは絶対パスでも相対パスでも大丈夫です。

<!--index.html-->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Index</title>
  </head>
  <body>
    <h1>Index</h1>
    <ul>
      <li>
        <a href="https://kakioku.github.io/test/content/page.html"
          >Page(絶対)</a
        >
      </li>
      <li><a href="./content/page.html">Page(相対)</a></li>
    </ul>
  </body>
</html>

page.htmlからindex.htmlへのリンクは下記のようになります。

<!--page.html-->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Page</title>
  </head>
  <body>
    <h1>Page</h1>
    <ul>
      <li><a href="https://kakioku.github.io/test/">Index(絶対)</a></li>
      <li><a href="../">Index(相対)</a></li>
    </ul>
  </body>
</html>

二回目以降は下記のように push の部分を少し省略できます。

git add -A

git commit -m "second"

git push

更新が反映されてindex.htmlとpage.htmlのページ移動ができていれば完了です。

6. GitHub ページの使い方

GitHub ページは無料で利用できカスタムドメインなどの使用も可能ですが下記のような制限があります。

公開されたサイトが 1GB 以上は NG
月/100GB の転送量の制限
1 時間あたり 10 ビルドの制限

制限を超えてしまうとサービス停止かサーバーに与える影響を減らす方法を示唆するメールが届くとのこと。その他、ガイドラインや禁止事項などの詳細は下記のページに記載されています。

GitHub Pages について