GitHubページを使ってWebページを作成する方法
1. 新しくリポジトリを作成する
GitHub ページを作成するためにまずは新しくリポジトリを作成します。ここでは「test」というリポジトリ名で作成しています。
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 ページが作成されます。
参照: 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 ビルドの制限
制限を超えてしまうとサービス停止かサーバーに与える影響を減らす方法を示唆するメールが届くとのこと。 その他、ガイドラインや禁止事項などの詳細は下記のページに記載されています。