Development Environment

開発環境

開発環境の構築手順や使い方について記載します。

実行環境・ツールの準備

サイトの基盤フレームワークとして Octopress を使っています。 Octopress を動かすためには、まず Ruby および Bundler がインストールされている必要があります。

また、フロント周りのタスク自動化ツールに Grunt を使っているので Node.js もインストールされている必要があります。

Ruby

Ruby は .ruby-version に記載されているバージョンが必要です。

Ruby バージョン管理ツールは rbenv を推奨します。

1. rbenv をインストール (手順：https://github.com/sstephenson/rbenv#installation)
2. rbenv で使われる ruby-build プラグインをインストール (手順：https://github.com/sstephenson/ruby-build#readme)
3. rbenv で Ruby をインストール！

$ rbenv install # `.ruby-version` に記載されたバージョンの Ruby がインストールされる
$ rbenv version # インストールされた Ruby バージョンを確認
$ rbenv rehash # Ruby 関連のインストール後は必ずリハッシュ！

Bundler

Bundler は Gem のバージョン管理ツールです。後の手順で Octopress で必要な Gem モジュールを一括で自動インストールできます。

$ gem install bundler
$ rbenv rehash # Ruby 関連のインストールなのでハッシュ！

Node.js

Node.js は .node-version に記載されているバージョンが必要です。

Node.js バージョン管理ツールは ndenv を推奨します。

1. ndenv をインストール (手順：https://github.com/riywo/ndenv#install)
2. ndenv で使われる node-build プラグインをインストール (手順：https://github.com/riywo/node-build#install)
3. ndenv で Node.js をインストール！

$ ndenv install # `.node-version` に記載されたバージョンの Node.js がインストールされる
$ ndenv version # インストールされた Node.js バージョンを確認
$ ndenv rehash # Node.js 関連のインストール後は必ずリハッシュ！

ローカル開発環境の構築

まずは本リポジトリをクローンします。

$ git clone [email protected]:front-core/front-core.github.io.git
$ cd front-core.github.io.git

Bundler より 必要な Gem モジュールをインストールします。

$ bundle install
$ rbenv rehash # Rehash

Grunt プラグインなどの Node モジュールをインストールします。

$ npm install
$ ndenv rehash # Rehash

Bower で必要な JS 系のライブラリーをインストールします。

$ bower install

最後に、デプロイ用の設定を行います。下記コマンドを実行した後、プロンプトに Repository url: が表示されたら [email protected]:front-core/front-core.github.io.git を入力して Enter キーを押してください。

$ rake setup_github_pages

ローカル開発環境の使い方

記事の作成からデプロイまで、すべて以下の Grunt コマンドで行います。

$ grunt serve        # Watch と同時にローカル WEB サーバーを立ち上げる (ポート番号デフォルト `9001`)
$ grunt build        # 本番デプロイ用の静的ページ ＋ その他リソース生成（`public-dist` に出力）
$ grunt serve:dist   # ビルドした物をプレビューするローカル WEB サーバーを立ち上げる (ポート番号デフォルト `9001`)
$ grunt deploy       # 実際に本番（GitHub Page）にデプロイ配布！
$ grunt deploy:force # grunt deploy で rejected エラーが発生した場合に使う

新しいブログ記事やページを書いたり、その他サイトの機能開発を行う際には grunt serve でローカル WEB サーバーを立ててからソースコードを編集してください。