gh-pages.md

github pages での静的ファイルの公開方法

github pagesはちょっとしたホスティングサービスみたいに使える。

スライドのほとんどを、HTMLとJavaScriptで作っている。使うライブラリはそのときどきで違ったけど、こういった作り方をはじめてもう3年くらい。

以前は Google Code においていて、いまは github pages に置いている。どちらもWebに公開する機能があったので、バージョン管理しながらスライドのホスティングもできる。

メリットはいろいろある。

• WebやWebに関連する技術のスライドが多いので、サンプルもHTMLやJavaScriptのことが多い。サンプルも一緒に公開できる。
• プレゼンもサンプルもブラウザで動くので、サンプルを見せるのが楽。

デメリットもいろいろある。

• 作るのが面倒
• ppt や keynote で出来るあれこれができないか面倒。図形配置とか。
• 印刷するのが面倒。

デメリットの部分については、reveal.jsを使って、MarkDownで書くことである程度解消された。それ以外は、印刷しないし、図とか入れなきゃいいんだと割り切ればいい。僕の場合は。

ツールにあった使い方に、自分を合わせればいいと思う。

前提

ここで書く内容の前提。

• githubのアカウントを持っている
  • 初期設定(?)っぽいことは終わっている
• gitのコマンドをターミナルから操作できる
  • GUIのことは知らない
  • Windowsのことは知らない
• リポジトリごとのgh-pagesについて書く
  • username.github.io のことは書かない
• 公開したいファイルとmasterに置きたいものが同じ
• gh-pagesブランチで作業する
• Jekyllのことは書かない

Let's try

いろんなやり方があるけど、僕はこんな感じでやってる。もっと素敵な方法があれば教えてください。

リポジトリ作成

githubのサイトで作っちゃう。demosってリポジトリ名にする。

TODO: あとで画像。githubの右上のグローバルメニューの+が付いてるアイコンからリポジトリ作れる。readmeやignoreやlicenceはなしで作る。readmeがあると、masterブランチが最初からできているので、以下の手順と多少異なるなる。

リポジトリをローカルにクローンする

リポジトリをローカルにクローンする。

git clone https://github.com/sadah/demos.git

こんな感じ

┌[~/Dropbox/git]
└> sada❤ sadair.local ⨠ git clone https://github.com/sadah/demos.git  22:06:26
Cloning into 'demos'...
warning: You appear to have cloned an empty repository.

gh-pagesブランチを作ってチェックアウトする

gh-pagesブランチを新規作成して、チェックアウトする。

git checkout -b gh-pages

こんな感じ。

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git checkout -b gh-pages          22:06:47  ☁  master ☀

公開したいファイルを作る

まずは作ったリポジトリに移動する。

cd demos

ちゃんと.gitがあるねー。

┌[~/Dropbox/git]
└> sada❤ sadair.local ⨠ cd demos                                      22:06:42
total 0
drwxr-xr-x   3 sada  staff  102 10 26 22:06 .
drwxr-xr-x  18 sada  staff  612 10 26 22:06 ..
drwxr-xr-x  10 sada  staff  340 10 26 22:06 .git

ファイルを作ろう。ひとそれぞれだしサンプルなので、とりあえずこんな感じで。

echo "hello gh-pages." > index.html

add して commit して push する

add して commit して push する。

git add .
git commit -m 'add index.html'
git push origin gh-pages

途中で git st で確認してるけど、こんな感じ。

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git add .                     22:11:10  ☁  gh-pages ☂ ✭

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git st                        22:11:15  ☁  gh-pages ☂ ✚
# On branch gh-pages
#
# Initial commit
#
# Changes to be committed:
#   (use "git rm --cached <file>..." to unstage)
#
#   new file:   index.html
#

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git commit -m 'add index.html'
[gh-pages (root-commit) 1bdef9f] add index.html
 1 file changed, 1 insertion(+)
 create mode 100644 index.html

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git push origin gh-pages        22:11:36  ☁  gh-pages ☀
Counting objects: 3, done.
Writing objects: 100% (3/3), 230 bytes, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/sadah/demos.git
 * [new branch]      gh-pages -> gh-pages

できあがり

開いてみる。

open http://sadah.github.io/demos/

gh-pageの内容をmasterに反映させる

masterブランチを新規作成して、gh-pagesからrebaseして、pushする。

git checkout -b master
git rebase gh-pages
git push origin master

こんな感じ。

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git checkout -b master          22:24:23  ☁  gh-pages ☀
Switched to a new branch 'master'

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git rebase gh-pages               22:24:28  ☁  master ☀
Current branch master is up to date.

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git push origin master            22:25:23  ☁  master ☀
Total 0 (delta 0), reused 0 (delta 0)
To https://github.com/sadah/demos.git
 * [new branch]      master -> master

修正する

同じことの繰り返しだけど、ちょっと違う。最初はブランチを新規作成していたけど、今回はブランチを切り替えるだけなので。

ブランチの確認して

git branch -a

gh-pagesブランチに切り替えて

git checkout gh-pages

ファイル編集して

echo "hello world" > index.html

addして

git add .

確認して

git st

commitして

git commit -m 'change word.'

gh-pagesにpushして

git push origin gh-pages

masterブランチに切り替えて

git checkout master

rebaseして

git rebase gh-pages

masterにpushする。

git push origin master

こんな感じ。

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git branch -a                     22:54:25  ☁  master
  gh-pages
* master
  remotes/origin/gh-pages
  remotes/origin/master

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git checkout gh-pages             22:54:47  ☁  master ☀
Switched to branch 'gh-pages'

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ echo hello world > index.html   22:54:57  ☁  gh-pages ☀

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git st                        22:55:44  ☁  gh-pages ☂ ⚡
# On branch gh-pages
# Changes not staged for commit:
#   (use "git add <file>..." to update what will be committed)
#   (use "git checkout -- <file>..." to discard changes in working directory)
#
#   modified:   index.html
#
no changes added to commit (use "git add" and/or "git commit -a")

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git add .                     22:55:46  ☁  gh-pages ☂ ⚡

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git st                        22:55:49  ☁  gh-pages ☂ ✚
# On branch gh-pages
# Changes to be committed:
#   (use "git reset HEAD <file>..." to unstage)
#
#   modified:   index.html
#

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git commit -m 'change word.'  22:55:51  ☁  gh-pages ☂ ✚
[gh-pages c7e4ef5] change word.
 1 file changed, 1 insertion(+), 1 deletion(-)

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git push origin gh-pages        22:56:06  ☁  gh-pages ☀
Counting objects: 5, done.
Writing objects: 100% (3/3), 255 bytes, done.
Total 3 (delta 0), reused 0 (delta 0)
To https://github.com/sadah/demos.git
   1bdef9f..c7e4ef5  gh-pages -> gh-pages

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git checkout master             22:56:29  ☁  gh-pages ☀
Switched to branch 'master'

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git rebase gh-pages               22:56:51  ☁  master ☀
First, rewinding head to replay your work on top of it...
Fast-forwarded master to gh-pages.

┌[~/Dropbox/git/demos]
└> sada❤ sadair.local ⨠ git push origin master            22:56:59  ☁  master ☀
Total 0 (delta 0), reused 0 (delta 0)
To https://github.com/sadah/demos.git
   1bdef9f..c7e4ef5  master -> master

エラーがでたら

ローカルにcloneしたものを削除して、もう1回クローンすればいいんだ！

リポジトリ削除しちゃえばいいんだ！

etc.

あれこれ。

masterとgh-pagesの内容を変えておきたい場合

masterとgh-pagesの内容を変えておきたい場合は、orphan付けてgh-pagesブランチを作成する。

git checkout --orphan gh-pages

zsh

oh-my-zshを使っているので、shにいろいろでてる。

• robbyrussell/oh-my-zsh

参考にしたもの

• Creating Project Pages manually · GitHub Help
• Easily keep gh-pages in sync with master | Lea Verou

まとめ

1回ここに書いてある通りにやってみて、いろいろ失敗してから、ほんとうにやりたいことをやるといいと思う。

Enjoy gh-pages!