VALUEDOMAIN+Middleman+github pagesでブログを作ろう

# 前提条件

* [VALUEDOMAIN][]で独自ドメインを取得していること
* [GitHub][]のアカウントを取得していること

[VALUEDOMAIN]: http://www.value-domain.com/
[GitHub]: https://github.com/

## VALUEDOMAIN側の設定をする
1.メニューをクリック
2.取得済みドメイン一覧のDNSレコード/URL転送の変更をクリック
3.使用したい独自ドメインを選択
4.設定フィールドに `a @ 204.232.175.78` と書き加える
5.保存する

これでバリュードメイン側の設定は終わり。
ただ反映されるまで１５分ほどかかるのでその間に次の作業を進めよう。  

## GitHubでリポジトリを作成する
リポジトリを作成する。
Repository nameは `username.github.io` とする。usernameは各自のusernameを入れる。

READMEやLicenseはめんどくさくなるので設定しないほうがいいだろう。
というのも、READMEやLICENSEを置くとそこが自動的にmasterブランチになるらしい。
理由は後述するが今回はgh-pagesブランチを作らずにmasterブランチで作業する。


## Middlemanをインストールする
Middlemanとブログ機能？をインストールする。
よくわからないけどブログのテンプレ的なものがあるらしい。  

	$gem install middleman
	$gem install middleman-blog


### プロジェクトの初期化
ブログのプロジェクトを作成する。
いろいろ便利かなと思ってDropboxにおいた。一応GitHubで管理しているがこれなら家が燃えても大丈夫だろう。
GitHubというディレクトリを作成してその中で作業をする。
my-blogのところは各自好きなワードを入れるといい。 ex)my-site,mypage,new_project,etc...
今回のプロジェクト名はmy-blogで統一する。  

	$cd ~/Dropbox/GitHub
	$middleman init my-blog --template=blog


### リモートリポジトリの登録
作ったusername.github.ioのリポジトリをremote登録する。  

	$cd my-blog
	$git init
	$git remote add origin git@github.com:username/username.github.io.git


### Gemfileに書き加える
ここで色々入れておけばシンタックスカラーリング等できるらしいがあまり理解できていないので恩恵を受けられていない。
後々便利になることを願って一応書き加えておく。  

	gem "therubyracer"

はRails云々でエラーが出た時に入れればなんとかなると書いてあったが、私の環境でも同じエラーが出たため一応書き加えておいた。  


```Gemfile
gem "middleman-deploy"
gem "middleman-livereload"
gem "middleman-syntax"
gem "nokogiri"
gem 'redcarpet'
gem "therubyracer"
```


ここまで終わったら　`bundle install` しておこう。 __※ `bundler install` ではない__
もしbundlerがない場合はインストールしておこう。  

	$gem install bundler


### config.rbの中身を変更する
開いてみると色々書いてあるが全部英語なのでとりあえず日本語の記事を探してみた。
コメントアウトされている中から適当に外していけば形になるらしい。  

	Time.zone = "Tokyo"
	blog.prefix = "blog"

はタイムゾーンと階層？の名前を設定するらしい。
例えば、blogをentryとかにすれば<http://erutaso.jp/entry>となる。
調べたら

```ruby:config.rb
activate :blog do |blog|
  blog.name = "dogs"
  blog.prefix = "dogs"
end
```

のようにしていけばいくらでもブログが作れるらしい。  

話がずれたが、その他の設定をしていく。
細かいレイアウト等の説明はめんどくさいからつまずいたところだけ書いていく。  

	
```ruby:config.rb
activate :deploy do |deploy|
  deploy.method = :git
  deploy.branch = 'master'
end
```

これはデプロイしたときの設定でmasterブランチにpushするという設定らしい。
だからこれを `deploy.branch = 'gh-pages'` とすれば新しいブランチを作成してそこにpushするらしい。
しかしそこに落とし穴があって、 __gh-pagesにpushしてもwebサイトに反映されない__ ということだ。
反映されるのはmasterブランチの中身であってgh-pagesにいくらpushしても本体には反映されないのでcheckoutしておいてrebaseするなりなんなりするといい。  


### デプロイして実際に反映させてみよう
config.rbの中身をいじったのでデプロイすればブログの枠組みは完成するだろう。
まだ独自ドメインを設定したり記事を書くにはとかいろいろあるが、とりあえずデプロイしよう。

	$middleman build && middleman deploy

初デプロイはなかなか時間がかかるので１５分ほど時間を潰そう。次からはデプロイすればすぐに反映されるだろう。
これで `http://username.github.io` にアクセスすればシンプルなひな形とご対面できるだろう。  


### 独自ドメインを使用する
middlemanを使った場合、 `username.github.io` 直下にCNAMEをおいても意味がない。
CNAMEの置き場はプロジェクト内のsourceの下だ。なので、

	$cd ~/Dropbox/GitHub/my-blog/source
	$echo example.com > CNAME

とすれば独自ドメインが使用できるようになる。
階層は `tree` を使えば一目瞭然だ。インストールされていない場合は、

	$apt-get install tree
	$tree -N PATH

としてインストールしておこう。２つ目は文字化け対策らしい。  


### 記事を書こう
ブログの枠組みができたら次は記事を書こう。
記事を書くためには、

	$bundle exec middle article "title"

とすれば、source/blogが作成されてそこにタイトルと日付とタグだけが書き込まれたmarkdownファイルが生成される。
この中身に好きなエディタで記事を書いて保存すれば完成だ。書き終わったら、

	$middleman build && middleman deploy

して反映させよう。デプロイすればリポジトリにpushされるようになっている。
私はemacsを使用しているのでmarkdown-modeをインストールして `C-c C-c p` で記事の確認をしているので、各自記事を確認できるようにしておいたほうがいいだろう。  


## 最後に
これで最低限の環境は整った。
CSSやHTMLの設定は私がわからないのでここには書いていない。
はじめはとても殺風景だろうが、CSSやHTML、JavaScriptの勉強をしながら豪華なウェブサイトを構築してもらいたい。


# 参考
* [GitHub Pagesで独自ドメインを使う方法](http://blog.awairo.net/blog/2013/12/14/custom-domain-for-gh-pages/)
* [GitHub Pagesで独自ドメインを使用する際のDNS設定について](http://blog.lindwurm.biz/2014/04/github-pages-dns-config.html)
* [Middleman + GitHub Pages でブログ環境を構築する](http://blog.rythgs.co/archives/2014/05/01/middleman-blog/)
* [ubuntu で tree コマンド](http://bukbuntu.blogspot.jp/2010/06/ubuntu-tree.html)
* [MIDDLEMAN](http://middlemanapp.com/jp/)
* [３分で終わる！Twitterのツイートボタンとフォローボタンをブログに設置する～4ステップ～](http://viral-community.com/twitter/twitter-button-add-480/)
* [静的サイト開発にmiddlemanを使う](http://washiiku.hatenablog.com/entry/2013/12/01/035808)
* [MiddlemanでGitHub Pagesにブログをつくる](http://horaotoko.github.io/blog/2014/02/02/make-middleman-blog.html)
* [ツールを使いたいだけの人のための bundler 入門 (例: vagrant + veewee)](http://qiita.com/znz/items/5471e5826fde29fa9a80)
* [middleman で構築したサイトを GitHub Pages で公開するまでの流れをまとめてみたAdd Star](http://d.hatena.ne.jp/osyo-manga/20140209/1391955805)
* [ブログをWordPressからMiddlemanに移行してGitHub Pagesで運用するようにしてみた ](http://re-dzine.net/2013/10/wordpress-to-middleman/)
* [Github Pages を独自ドメインで使用する](http://takuya71.hatenablog.com/entry/2014/04/13/233704)
* [WordPressからmiddlemanに移行してGithub Pagesで運用する方法 ](http://camuro.org/blog/2013/09/renewal.html)
* [ブログを WordPress から Middleman + GitHub Pages へ移行しました](http://blob.geishatokyo.com/archives/2014/05/02/yamauchi.html)
* [middleman-blogをgithubでホストする](http://blog.coiney.com/2013/06/21/host-middleman-blog-on-github/)
* [文章作成やメモ書きにも便利、Markdown記法](http://kojika17.com/2013/01/starting-markdown.html)
* [Emacsのmarkdown-modeを使ってみる](http://blog.s-amemiya.com/development/emacs%E3%81%AEmarkdown-mode%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/)