タイトルのとおり。
Middlemanでお手軽に作ったサイトを、GithubPagesにデプロイするよー！というお話。
僕のスペック
Githubアカウントあり
GithubPages使用者
Middleman未経験
まあなんとかなりそう。
作るもの
ちょっとしたブログを作ろうかなと考えています。
Railsで開発しているサイトがありまして、そのサイトの開発者ブログ的なものを作ろうかと。
こちら↓
参考にしたサイト
こちらのサイトを参考にしました。なので、詳しい解説はこちらを参照あれ。
1, gemインストール
middlemanのgemをインストールします。
$ sudo gem install middleman
2, middleman プロジェクトを作成
プロジェクトを作成します。あれですね、rails new的な感じですね。
$ middleman init [プロジェクト名]
こんなディレクトリ構造が生成されました。
3, ローカル立ち上げ
$ middleman server (middleman s でもOK) でローカルサーバを立ち上げます。便利。ホストは4567です。http://localhost:4567
このような画面が表示されれば、立ち上げ成功です。
4, ファイルの追加
HTMLファイルを追加してみます。HTMLファイルは ./source/ に追加します。
firstPage.htmlを追加。
中身はこんな感じ。
ローカルで確認。
http://localhost:4567/firstPage.html
うん！バッチリ！
ちょっと修正。
6, ビルドする
ビルドします。仕上げ的な感じです。
ビルドされたファイルは、build/ に保存されます。
7, レポジトリ作成
そして、gitコマンドを打ちます。
$ git init
$ git remote add origin [リモート先]
8, 自動デプロイ化準備
自動デプロイという曖昧な言葉を使ってしまいました。
要は、git コマンドを打たず、しかもビルドやブランチを気にせずデプロイできるようにします。
まずは、Gemfileに追記。
middleman-deployというgemを指定します。
そしてbundle installです
$ sudo bundle install
gemが追加されたら、config.rbも書き換えます。
9, デプロイ
デプロイします。
$ middleman deploy
もちろん、githubのアカウント名とパスワードは求められます。
デプロイ結果がこちら。gh-pagesにブランチを切り替えると、このとおり。
(https://github.com/chuck0523/RussiUpDevBlog/tree/gh-pages)
きちんとpushされています。
試しにgh-pagesにアクセスしてみると、
http://chuck0523.github.io/RussiUpDevBlog/firstPage.html
きちんと動作しています！いえい！
HTMLファイルを追加して、相互リンクを貼れば、ちょっとしたサイトの出来上がりですね！
まとめ
いやあ、便利ですね。
これからはmiddlemanを使って、開発者ブログを更新していきます。