コンパイラかく語りき

import { Fun } from 'programming'

Middlemanで静的サイトをGithubPagesにデプロイするまで

タイトルのとおり。

Middlemanでお手軽に作ったサイトを、GithubPagesにデプロイするよー!というお話。

 

僕のスペック

Githubアカウントあり

GithubPages使用者

Middleman未経験

 

まあなんとかなりそう。

 

作るもの

ちょっとしたブログを作ろうかなと考えています。

Railsで開発しているサイトがありまして、そのサイトの開発者ブログ的なものを作ろうかと。

 

こちら↓

russiup.herokuapp.com

 

参考にしたサイト

こちらのサイトを参考にしました。なので、詳しい解説はこちらを参照あれ。

d.hatena.ne.jp

 

1, gemインストール

middlemanのgemをインストールします。

$ sudo gem install middleman

f:id:chuck0523:20151031130506p:plain

 

2, middleman プロジェクトを作成

プロジェクトを作成します。あれですね、rails new的な感じですね。

$ middleman init [プロジェクト名]

f:id:chuck0523:20151031130655p:plain

 

こんなディレクトリ構造が生成されました。

f:id:chuck0523:20151031130717p:plain

 

3, ローカル立ち上げ

$ middleman server (middleman s でもOK) でローカルサーバを立ち上げます。便利。ホストは4567です。http://localhost:4567 

このような画面が表示されれば、立ち上げ成功です。

f:id:chuck0523:20151031131544p:plain

 

4, ファイルの追加

HTMLファイルを追加してみます。HTMLファイルは ./source/ に追加します。

f:id:chuck0523:20151031132644p:plain

firstPage.htmlを追加。

 

中身はこんな感じ。

f:id:chuck0523:20151031132841p:plain

 

ローカルで確認。

http://localhost:4567/firstPage.html

 

f:id:chuck0523:20151031132955p:plain

うん!バッチリ!

 

ちょっと修正。

f:id:chuck0523:20151031133048p:plain

 

6, ビルドする

ビルドします。仕上げ的な感じです。

f:id:chuck0523:20151031133258p:plain

ビルドされたファイルは、build/ に保存されます。

 

7, レポジトリ作成

Github上でレポジトリを作成します。

f:id:chuck0523:20151031133418p:plain

 

そして、gitコマンドを打ちます。

$ git init

$ git remote add origin [リモート先]

 

8, 自動デプロイ化準備

自動デプロイという曖昧な言葉を使ってしまいました。

要は、git コマンドを打たず、しかもビルドやブランチを気にせずデプロイできるようにします。

 

まずは、Gemfileに追記。

f:id:chuck0523:20151031134057p:plain

 

middleman-deployというgemを指定します。

f:id:chuck0523:20151031134105p:plain

 

そしてbundle installです

$ sudo bundle install

f:id:chuck0523:20151031134256p:plain

 

gemが追加されたら、config.rbも書き換えます。

f:id:chuck0523:20151031134334p:plain

 

f:id:chuck0523:20151031134342p:plain

 

9, デプロイ

デプロイします。

$ middleman deploy

f:id:chuck0523:20151031134440p:plain

もちろん、githubのアカウント名とパスワードは求められます。

 

デプロイ結果がこちら。gh-pagesにブランチを切り替えると、このとおり。

f:id:chuck0523:20151031134736p:plain

(https://github.com/chuck0523/RussiUpDevBlog/tree/gh-pages)

 

きちんとpushされています。

 

試しにgh-pagesにアクセスしてみると、

f:id:chuck0523:20151031134931p:plain

http://chuck0523.github.io/RussiUpDevBlog/firstPage.html

 

きちんと動作しています!いえい!

HTMLファイルを追加して、相互リンクを貼れば、ちょっとしたサイトの出来上がりですね!

 

まとめ

いやあ、便利ですね。

これからはmiddlemanを使って、開発者ブログを更新していきます。