在宅ワーク知恵袋

GitHub ページの作成方法


今回は GitHub ページの作成方法についての解説となります。

GitHub ではアカウントを取得することで、無料でwebページを作成することができます。

GitHub ページの作成には、最初にログインしてリポジトリを作成します。

GitHub へログインし、+アイコンをクリック、
次に New Repository をクリックします。

Screenshot from 2016-08-26 22:57:48

次にリポジトリの設定を行います。

ここで重要なのが、リポジトリ名です。
GitHubページを作成する場合、リポジトリ名は
ユーザ名.github.io
となります。

この部分を間違えると Githubページが表示されません。
もし、ページが存在しないというエラーがでた場合には、リポジトリ名を確認してみましょう。

それでは、リポジトリの設定項目の解説になります。

Repository name にはリポジトリ名を入力します。
これは、先ほども解説したように
ユーザ名.github.io
となります。

Description(optional) はリポジトリの説明になります。
ここは GitHubページというように簡単な説明でOKです。

次に Public と Private がありますが、これはリポジトリの公開、非公開の設定です。
基本的に GitHub は無料で使えますが、それは Public の公開の場合です。
Private にすれば非公開にできますが、有料となります。

これらの設定ができたら、Create repository をクリックすればリポジトリが作成できます。

Screenshot from 2016-08-26 23:00:35

これでリポジトリができたので、あとは git を使い、作成したwebページを GitHub へ転送すればGitHubページが作成されます。

今回は、仮に GitHubユーザ名 ibc と仮定し、ターミナルで操作しているとします。

実際に作成する場合には、ibc の部分をユーザ名に置き換えて実践してみましょう。

作成にあたり、git の導入が必要になるので、cloud 9 を使用するのがおすすめです。

それでは作成してきましょう。

まず、作業用のディレクトリを作成し、移動します。

次に、ここに index.html を作成します。

Screenshot from 2016-08-26 23:28:46

内容は

としておきます。

ここまでできたら、git を使っていきます。

git init コマンドでローカルリポジトリを作成します。

次に、

git add . で git インデックスに変更点、つまり今回作成したファイルを登録します。
ファイルに . を指定すると、変更したすべてのファイルが対象となります。

次に、

とすることでコミットされ、バージョンとして認識されます。
なお、-m オプションの後はコメントになります。

ここまででローカルリポジトリができました。

Screenshot from 2016-08-26 23:38:25

なお、git のリポジトリには2種類あり、自分の開発マシンなどで作成するローカルリポジトリと、
GitHub や 開発サーバーで使われる GitLab などのリモートリポジトリがあります。

今回作成する GitHub ページは リモートリポジトリとなるため、転送のための設定が必要になります。

まずは転送のためにリモートリポジトリを登録します。

という構文になります。

もし、ibc というユーザ名なら

となります。

次にリモートリポジトリに転送します。転送には git push コマンドを使います。

コマンドを実行すると、

と表示されるので Github のユーザ名を入力します。

次に、

となるので、Githubのユーザパスワードをいれます。
なお、セキュリティのため、表示はされません。

Screenshot from 2016-08-26 23:54:28

これで Github ページができましたので、ブラウザで
https://ユーザ名.github.io
とアクセスして表示できれば成功です。

もし、表示されない場合、リポジトリ名などを確認してみましょう。

それでは、今回の要点をまとめてみましょう。

・GitHub ページを使い、無料でサイトの作成が可能(ポートフォリオサイトなども作成可能)。
・あらかじめログインしてリモートリポジトリの作成が必要。
・リポジトリ名を間違えるとアクセスできないため作成し直すことになる。
・GitHub ページ作成には git コマンドの操作が必要。

レンタルサーバーなどを使わずに無料でポートフォリオサイトが作成できる上、
ソースコードの公開など、様々な活用ができるので、ぜひ作成してみましょう。


この記事を書いた人:IBC

ITブートキャンプ運営事務局です。 随時ブログを更新していきます。