GitHub

GitHub ページの作成方法

2016年8月28日

noimage

今回は 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 を使用するのがおすすめです。

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

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

mkdir ibc.github.io
cd ibc.github.io

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

touch index.html

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

内容は

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    GitHub ページ 作成中
</body>
</html>

としておきます。

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

 git init 

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

次に、

 git add .

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

次に、

git commit -m "github page create"

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

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

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

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

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

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

git remote add origin https://github.com/ユーザ名/ユーザ名.github.io.git

という構文になります。

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

git remote add origin https://github.com/ibc/ibc.github.io.git

となります。

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

git push origin master

コマンドを実行すると、

Username for 'https://github.com':

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

次に、

Password for 'https://ユーザ名@github.com':

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

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

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

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

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

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

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

ランキング記事

  • 該当なし
Page Top