【GitHub】GitHub Pagesを使ってリポジトリを静的ページとして公開する

　以前にBitbucketにおいて静的ページを公開する記事を書きました。

【Bitbucket】Bitbucketで静的ページを公開する方法 - ソースに絡まるエスカルゴ

　今回は同じような機能であるGitHub Pagesを使ってリポジトリを静的ページとして公開する方法の備忘録になります。

　GitHubアカウントを作成している前提で進めるので、この記事の内容を行う場合は先にGitHubアカウントを作成しておいてください。

　では、始めます。

１：リポジトリの作成
　GitHubにサインインし、右上にある自身のアイコンをクリックし、出てきた中の「Your repositories」をクリックします。

　リポジトリ一覧が表示されるので、右側にある「New」をクリックします。

　リポジトリ作成の画面になるので「Repository Name」を入力します。PublicとPrivateはどちらでも良いですが、ある程度作ってから公開することが多いと思うので一旦Privateに設定しています。他はデフォルトのままです。設定が終わったら「Create Repository」ボタンをクリックします。

　するとリポジトリが作成されて以下のような画面になります。今回だと何もない空のリポジトリを作ったので、cloneしてファイルを追加してpushしてね、みたいな内容が書かれています。

　ひとまずこれで公開用のリポジトリができました。

２：Webページとして公開するファイルを作成してpushする
　リポジトリを作成したので、クローンして公開用のページファイルを作成していきます。

　作成したリポジトリのページにあるURLをコピーします。

　PowerShellやコマンドプロンプトを開いてクローンしたい階層まで移動して以下のコマンドを実行します。空のリポジトリなので「warning: You appear to have cloned an empty repository.」というメッセージが出る場合があります。

$ git clone [コピーしたURL]

　クローンしたリポジトリ内にページとして表示するファイルを作成します。今回は以下のように作成しました。

web-test
│   index.html
│
└───sub
    │   sub.md
    │
    └───img
            test.png

　markdownファイルもいい感じにページにしてくれるので、サブページとしてsub.mdを作成しています。

・index.html

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>web-test</title>
</head>
<body>
<h1>Web-test</h1>
<a href="./sub/sub">サブページリンク</a>
</body>
</html>

・sub.md

# サブページです
markdownファイルを作成してもいい感じにページにしてくれます。
- - -

- 画像

![](./img/test.png)

- 表

|項目1|項目2|
|---|---|
|内容1|内容2|

- ソースコード

~~~python
import sys
from time import sleep

def count_up(num, count):
    print("--- start ----")

    for i in range(0, count):
        print(num + i)
        sleep(0.5)

    print("--- end ----")

if __name__ == '__main__':
    count_up(1, 10)
~~~~

・test.png