More than 5 years have passed since last update.

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

Last updated at 2014-05-06Posted at 2014-05-06

前提条件

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

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

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となる。
調べたら

config.rb

activate :blog do |blog|
  blog.name = "dogs"
  blog.prefix = "dogs"
end

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

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

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の勉強をしながら豪華なウェブサイトを構築してもらいたい。

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up