読者です 読者をやめる 読者になる 読者になる

pixyzehn blog

iPhone App, Mac App, Programming, Web service, Tool, Evernote, etc

Github&Middlemanで静的な個人サイトつくった

f:id:inagex:20140313115901p:plain


静的なぺらいちの個人サイトを公開しました。
http://pixyzehn.github.io


ややはまってしまったので、公開するまでの手順を紹介したいと思います。


ベストプラクティクスではないかもしれませんが。


まずMiddlemanでプロジェクトを作成します。

middleman init my_new_project


これでMiddlemanのベースとなるファイルはすべて生成されます。


f:id:inagex:20140313120618p:plain


sourceディレクトリの内部を変更していきます。


このあたりは普通のHTMLとほぼ同じで詳しいことは公式サイトで扱っています。


http://middlemanapp.com/jp/basics/getting-started/#toc_1


ではこのMiddlemanをデプロイするための環境を整えます。


my_new_project/Gemfileを編集していきます。


f:id:inagex:20140313120854p:plain


上記のように

gem 'middleman-deploy'


を追加します。


追加したらmy_new_project直下のディレクトリに戻り、

bundle install


して先ほどのmiddleman-deployをインストールします。


次はmy_new_project直下のconfig.rbを編集します。


f:id:inagex:20140313121258p:plain


上記のように

activate :deploy do |deploy|
    deploy.method = :git
    deploy.branch = 'master'
end


を追加します。


ここではGithubPageを利用し、Githubのユーザかorganizationに対するサイトであり、レポジトリの名前はusername/username.github.ioというネーミングスキーマに従って作成したのでmasterブランチにする必要があります。


ではデプロイの環境は整ったのでGithubにusername/username.github.ioというネーミングスキーマに従ってレポジトリを作成しましょう。


作れたと仮定します。


ではここで作成したプロジェクトmy_new_project直下に戻り、静的ファイルを生成します。


my_new_project/build直下に作成されます。

bundle exec middleman build


f:id:inagex:20140313121951p:plain


build直下にみたことあるようなファイルが生成できました。


ではこれをGithubの先ほど作成したレポジトリにpushしていきます。

cd build


buildディレクトリにいきます。

git init
git add .  
git commit -m "initial commit"
git remote add origin git@github.com:username/username.github.io.git


usernameは各々のGithubのusernameです。


デプロイします。

bundle exec middleman deploy
## Deploying via git to remote="origin" and branch="master"
Already on 'master'
Counting objects: 17, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (12/12), done.
Writing objects: 100% (12/12), 7.47 KiB | 0 bytes/s, done.
Total 12 (delta 0), reused 0 (delta 0)
To git@github.com:pixyzehn/pixyzehn.github.io.git
   9186cf7..4ec1efb  master -> master


こんな感じでしばらくするとhttp://username.github.ioで先ほど生成されbuild以下のファイルが反映されています。


ただこれだとbuild以下しか管理ができていないので、僕はmy_new_projectディレクトリそのままは別のブランチで管理してみました。


いいのか悪いのかはわかりませんが、これだけ別にレポジトリを作成するというのも面倒だったので。。


my_new_project直下に戻って

git init
git remote add origin git@github.com:username/username.github.io.git
git checkout -b gh-pages


masterから派生したgh-pagesブランチを作成。

git add .
git commit -m "initial commit" 
git push origin gh-pages


これでgh-pagesブランチにpushできました。


でできたものはこんな感じでこっちがmasterブランチ


f:id:inagex:20140313123111p:plain


こっちがgh-pagesブランチ


f:id:inagex:20140313123140p:plain


今後Travis CIとかでpushしたら本番反映とかやってみたい。


https://travis-ci.org/


今回作ったページのGithubリンク


https://github.com/pixyzehn/pixyzehn.github.io


参考リンク


http://blog.coiney.com/2013/06/21/host-middleman-blog-on-github/


http://tricknotes.hateblo.jp/entry/2013/06/17/020229


http://middlemanapp.com/jp/basics/getting-started/#toc_1