GitHub で WEBページ を公開する方法 まとめ
せっかく作ったものを実際に動かせるサンプルページが公開できたら… そんなことを実現できる「GitHub Pages」という機能があります。
GitHub Pages では プロジェクト に関連する ホームページ、WEBサイト の公開、運用ができます。
以下では、 GitHub Pages の 種類、作成方法、基本知識の観点でまとめます。
GitHub ページ の種類 と 作成方法
GitHub ページ には次の 2種類 が存在します。 いずれの種類にしても、レポジトリの作成が必要です。
- ユーザー/組織 ページ (GitHub アカウント に対して WEBページ を作成)
- プロジェクト ページ (レポジトリ に対して WEBページ を作成)
GitHub ページ を作成 & 公開する方法は次の 2通り が存在します。
- 手動作成 & 公開 (HTML を ゼロ から作成)
- 自動生成 & 公開 (デザインテンプレート、README.md を利用して作成)
各組み合わせ通りやり方がありますが、以下のパターンについて実際の方法を記載しています。
GitHub ページ の 基本知識
- 1レポジトリ(1プロジェクト) に対して 1サイト 作成できる
- プロジェクトページ は レポジトリの "gh-pages" ブランチ が WEBページ になる
- ユーザー/組織 ページ は
username.github.io
という名前のプロジェクトにする - ユーザー/組織 ページ は レポジトリの "main" ブランチ が WEBページ になる
今回、参考にしたサイトは以下の通りです。
GitHub の ユーザーページ を 公開 する方法
個人用/組織用 の WEBページ を GitHub で公開する方法、手順です。
個人用 の WEBページ を 作成、公開するためには、特殊な プロジェクト名の レポジトリ を作成します。
具体的には、ユーザー名.github.io
という名前の レポジトリ を作成するのですが…
詳細は以下で見ていきます。
基本的に GitHub for Windows を利用して作業を行っています。 (個人的な趣味趣向の都合です…)
- レポジトリを新規作成します。
"create" を選択します。
- 以下の項目を入力して、"CREATE" を選択します。
- NAME:
ユーザー名.github.io
(必ず命名規則に従います。) - DESCRIPTION:(任意に入力してください。)
- NAME:
- 新規作成した
ユーザー名.github.io
レポジトリを右クリック、"open in explorer" を選択します。
- 開かれた ディレクトリ に WEBサイト を作成します。
(画像では index.html を作っただけです。) - GitHub for Windows へ戻り、
ユーザー名.github.io
レポジトリを開きます。
- 変更をコミットします。
以下の項目を入力して、"COMMIT" を選択します。
- COMMIT MESSAGE:(メッセージ)(必須)
- EXTEND DESCRIPTION:(詳細説明)(任意)
- ローカルの変更を サーバー へ プッシュ します。
"publish" を選択します。
- 以下の URUL へ アクセス して WEBページ が公開されたことを確認します。
http://ユーザー名.github.io/
今回、参考にしたサイトは以下の通りです。
GitHub の プロジェクトページ を 自動生成 & 公開 する 方法
GitHub で 作成した アプリ や ツール を WEBページ にして公開したい!! そんなことを実現できる機能として「GitHub Pages」があります。 GitHub Pages では プロジェクト に関連する ホームページ、WEBサイト の公開、運用ができます。
この、GitHub Pages を作る方法は以下の2種類があります。 ここでは、GitHub Pages を自動生成、公開する手順を見ていきます。
- 手動生成 & 公開
- 自動生成 & 公開
自動生成は テンプレート があるため、最初からそれなりの WEBページ 作成が可能なので、個人的にはオススメです。
自動生成 & 公開
- WEBページ を作成したい プロジェクト を開きます。
- プロジェクト の "Settings" を開きます。
- "Options" を選択します。
- 中段までスクロールし、"Automatic Page Generator" を選択します。
- 以下の項目を修正して、"Continue to Lyout" を選択します。
- Project Name:プロジェクト名
- Tagline:プロジェクトの説明
- Body:本文("Load README.md" を選択するとラク)
- Google Analytics Tracking ID:Google アナリティクス の トラッキングID(必要であれば)
- 好きなレイアウトを選択します。(選択すると下段にプレビューします。)
- "PUBLISH+" を選択して完了します。
- WEBページ が公開されるまで 10分 程度待ちます。
10分後に メッセージ 中にある URL を選択すると ページ が公開されています。
GitHub Pages は "gh-pages" という名前の ブランチ で運用されます。 ページができあがった後は、"gh-pages" ブランチを編集することで、WEBページが更新されます。
今回、参考にしたサイトは以下の通りです。
GitHub の プロジェクトページ を 手動公開 する方法
GitHub で 作成した アプリ や ツール を WEBページ にして公開したい!! そんなことを実現できる機能として「GitHub Pages」があります。 GitHub Pages では プロジェクト に関連する ホームページ、WEBサイト の公開、運用ができます。
この、GitHub Pages を作る方法は以下の2種類があります。 ここでは、GitHub Pages を手動生成、公開する手順を見ていきます。
- 手動生成 & 公開
- 自動生成 & 公開
手動生成 & 公開
GitHub for Windows を利用して作業を行っていきます。 GitHub for Windows の インストールについては こちら をご参照ください。
- GitHub for Windows を起動します。
- GitHub ページ を作成したいレポジトリを右クリック、"open a shell here" を選択します。
- Power Shell が立ち上がるので、以下のコマンドを入力します。
これによりgh-pages
という名前のブランチが作られます。
[master]> git checkout --orphan gh-pages
- 続いて以下のコマンドを入力します。
これにより "." を含むファイル が削除されます。
[gh-pages]> git rm -rf .
- GitHub for Windows へ戻り、ブランチ を作った レポジトリ を開きます。
- レポジトリは空なので、エクスプローラでローカルフォルダを開きます。
(選択されているブランチが "gh-pages" になっているハズです。)
- 開いたエクスプローラの場所で WEBページ を作成します。
(とりあえず今回は index.html のみ作成しました。)
- GitHub for Windows へ戻り、変更を コミット します。
- "publish..." を選択します。
- 作業は以上で完了です。
10分後 に 次の URL へ アクセス して公開されていることを確認します。
http://ユーザー名.github.io/レポジトリ名/
今回、参考にしたサイトは以下の通りです。
マークダウン記法 まとめ
マークダウン記法 の記載例とその表示例を一覧にしてまとめます。
マークダウン記法は簡単なので、普通のテキストエディタでも問題なく書けると思いますが、 個人的にはできあがりイメージがつけにくいので、 Webエディタ(Dillinger) を使っています。
マークダウン記法 一覧
- 見出し
# text
- 水平線
***
- 斜体
*text*
- 強調
**text**
- リスト
* text
- 引用
> text
- インラインコード
`<code />`
- コードブロック
<code />
- アンカー
[text](URL)
- 画像

- 改行
text
見出し
#
の数に応じて h1 ~ h6 まで表現します。
記法例 | サンプル |
---|---|
# 見出し1 |
見出し1 |
## 見出し2 |
見出し2 |
### 見出し3 |
見出し3 |
水平線
記法例 | サンプル |
---|---|
*** |
|
斜体
記法例 | サンプル |
---|---|
*文字列* |
文字列 |
強調
記法例 | サンプル |
---|---|
**文字列** |
文字列 |
リスト
記法例 | サンプル |
---|---|
* 項目1 * 項目2 * 項目3 * 項目3-1 * 項目3-2 |
|
1. 項目1 2. 項目2 3. 項目3 1. 項目3-1 2. 項目3-2 |
|
引用
記法例 | サンプル |
---|---|
> アル晴れた日のこと > 魔法以上のユカイが > > 限りなく降り注ぐ > > 不可能じゃないわ |
|
インラインコード
記法例 | サンプル |
---|---|
`<div>hoge</div>` |
<div>hoge</div>
|
コードブロック
コードの前に タブ または 半角スペース4つ を挿入することで、コードブロック表示になります。
記法例 | サンプル |
---|---|
function foobar() { window.alert('hello world'); } |
function () { window.alert('hello world'); } |
アンカー
記法例 | サンプル |
---|---|
[Google](http://google.com/) |
画像
記法例 | サンプル |
---|---|
 |
![]() |
改行
行末に半角スペースを2つ挿入します。
記法例 | サンプル |
---|---|
文字列 |
文字列 |
jQuery プラグイン の 公開
GitHub for Windows を利用しながら、GitHub 上に作成した jQueryプラグイン を公開してみます。
- jQueryプラグイン名の付け方
- jQueryプラグインの公開手順
プラグイン名の付け方
基本ルールは次の通り。
- 使える文字列は、英数字、ハイフン、ピリオド、アンダースコアのみです。
- プラグイン名は全プラグイン(世界中で公開されているプラグイン)においてユニークな名称である必要があります。
- プラグイン名とファイル名は一致させます。
例えば hoge プラグイン なら jquery.hoge.js 。 - 特定プロジェクトで使っているプレフィックスは利用できません。
例えば jQuery UI の jquer.ui.* は使えません。
要するに、名前は早い者勝ちだそうです。 ただし、名前を先にとって中身がからっぽだと、警告無しに削除するそうです。
プラグインの公開
GitHub for Windows を使いながら jQueryプラグイン を公開していきます。
- GitHub で jQueryプラグイン 用のレポジトリを作成
まずは、公開するプラグイン自体を準備します。 詳細は下記の記事または他のサイトをご参照ください。
- GitHub のレポジトリに Post-Receiveフック を設定
ここでは、基本設定のみ(今回の目標に対して必要最低限のみ)を記載します。 以下の手順は GitHub のウェブページ上で行います。
- パッケージマニュフェストファイル を レポジトリ に追加
jQuery Plugins Registry はレポジトリのルートディレクトリにある
*.jquery.json
という名前のファイルを探します。 jQueryプラグイン レポジトリ のルートディレクトリに、パッケージマニフェスト仕様書に従ったyourplugin.jquery.json
を作成、配置します。パッケージマニフェストファイル の サンプル
{ "name": "depend", "title": "Solution for the dependency problem", "description": "jQuery plugin for resolve of the dependency problem about client browser or/and client platform using userAgent string.", "keywords": [ "browser", "platform", "detection", "html5", "mobile", "tablet", "support" ], "version": "1.0.0", "author": { "name": "garafu", "url": "https://github.com/garafu" }, "licenses": [ { "type": "MIT", "url": "https://github.com/garafu/jquery.depend/blob/master/MIT-LICENSE.txt" } ], "bugs": "https://github.com/garafu/jquery.depend/issues", "homepage": "https://github.com/garafu/jquery.depend", "docs": "https://github.com/garafu/jquery.depend/wiki", "download": "https://github.com/garafu/jquery.depend", "dependencies": { "jquery": ">=1.9.1" } }
パッケージマニフェストファイルの検証は "Publishing Your Plugin" 中段にある "Validate Your Manifest File Here" を利用してください。
パッケージマニフェストの仕様は "jQuery Plugin Package Manifest Specification" を参照してください。 (詳細は後日気が向いたときに記載…するかも…。。)
- 新規バージョンタグ を設定して jQueryプラグイン を発行
Post-Recieve フック の設定、マニフェストファイルの作成が完了したら、いよいよ公開作業に入ります。 以下の手順は GitHub for Windows (+ PowerShell) 上で行います。
- GitHub for Windows で公開したい jQueryプラグイン の レポジトリ を右クリックします
- "シェルを起動(open a shell here)" をクリックします
- PowerShell が起動するので、以下のコマンドを実行します
> git tag v1.0.0 > git push origin --tags
> git tag [バージョン]
で指定する バージョン番号 と、パッケージマニュフェストで指定する バージョン番号 は 一致していないと登録できません。すでに発行済みのタグ(バージョン番号)を上書きすることはできません。
きちんと登録できたかどうかは jQuery Plugins Registry エラーログ 末尾を確認します。
まとめ
jQueryプラグイン を公開する概略手順は次の通りです。
- GitHub で jQueryプラグイン 用のレポジトリを作成
- GitHub のレポジトリに Post-Receiveフック を設定
- パッケージマニュフェストファイル を レポジトリ に追加
- 新規バージョンタグ を設定して jQueryプラグイン を発行
参考にしたサイトは以下の通りです。
GitHub for Windows の 使い方
GitHub for Windows を利用した、基本的な使い方を記載します。 subversion や TFS に慣れていると、理解が早い…と思います。 ここでは、基本的な以下の操作を見ていきたいと思います。
- 新規レポジトリの作成
- クローンの作成
- コードの追加 & 修正
- コードをコミット
- タグ付け
個人的なイメージですが、"クローン(clone)" は "チェックアウト" 、"コミット(commit)" & "発行(publish)" が "チェックイン" に相当するイメージです。 クローンとチェックアウトは厳密には違うと思いますが… クローンを行った後、サーバー側を他から変更してしまうと、発行(publish)するときエラーになるから要注意です。。
GitHub for Windows のインストールと設定は こちら を参照してください。
新規レポジトリの作成
- "add" を選択します。
- "新規レポジトリ(new repository)" ダイアログが表示されるので、次の項目を記載 or 確認します。
- "名前(name)" を記載。必須入力。
- "説明(description)" を記載。
- "保存先フォルダ" を確認。
- "GitHub へプッシュする(Push to GitHub)"にチェック。
- 新規レポジトリが追加されています。
"GitHub へプッシュする(Push to GitHub)" が選択されていると、GitHub へレポジトリの新規作成が反映されています。
クローンの作成
新規レポジトリ作成をすると、ローカルにクローンが作成されますが、 元々、GitHub にしかないレポジトリだと、ローカルにクローンがありません。 以下の手順で、明示的にクローンを作成します。
コードの追加 & 修正
クローンが作成されていると、ローカルに GitHub のレポジトリに対応するフォルダが作成されています。
- 開きたいレポジトリを右クリックし、"エクスプローラーで開く(open in explorer)" を選択します。
(※ウィルスバスターを入れていると警告がでました…が、無視しました。)
- エクスプローラが開くので、開いたフォルダで適当にファイルやフォルダを作ったり修正したり…
コードをコミット
- ローカルを選択します。
- ローカルでコミットしたいレポジトリをダブルクリックします。
- 変更一覧がリストアップされるので
- コミットするファイルを選択 or 確認
- "コミットメッセージ(COMMIT MESSAGE)" を記載(必須)
- "追加説明(EXTENDED DESCRIPTION)" を記載
- "発行(puslish)" を選択します。
(個人的には…発行(publish) というより プッシュ(push) なイメージですが。。)
- GitHub へ変更が反映されます。
タグ付け
GitHub for windows の インストール と 設定
GitHub for windows を使ってみる…の前に、使える環境を整えていきます。 とりあえず、CUIでもいいけど、GUIが便利そうなので、GitHub for Windows を入れてみます。 ちなみに、GitHubアカウントはすでに持っている前提です。
GitHub for Windows の使い方は こちら を参照してください。
インストール
- "GitHub for Windows" をダウンロード。
※ダウンロード先はこちら。
- ダウンロードした "GitHubSetup.exe" を実行。
- 「インストール」を選択。
- しばらく待ちます...
(AWSにデータを保存してるんですね…)
- インストールが終わると、初回起動になるので、初期設定をします。
初回起動 & 初期設定
GitHub アカウントは既にある前提なので、アカウントが場合は GitHub で先に作ってください。
- [connect] 画面。
GitHub への接続情報を入力してログイン(LOGIN)します。
- [configure] 画面。
ユーザー情報を確認、修正して続行(continue)します。
- [repositories] 画面。
ローカルレポジトリの確認、反映をします。
初回はローカルにレポジトリのコピーはないはずなので、そのままスキップ(SKIP)します。
- とりあえず、使える状態。
設定変更
設定変更といっても、ローカルの保存先を変更するだけです。
参考までに… GitHub for Windows はローカルにキャッシュを作るそうです。 (何の情報を保存しているかは分かりませんが…) そのキャッシュの保存先は下記のフォルダ以下のようです。
C:\Users\[ユーザー名]\AppData\Roaming\GitHub
ちなみに削除すると、ログイン情報とか何やらが消えて、初期状態に戻ります。
インストールと初期設定だけだと、特に問題は発生しませんでした。 たぶん、普通に使えるものかと…思ってます。
これで、死んでいた自分の GitHub アカウントが動き出す…かも www