React.js製の静的サイトジェネレーターGatsbyに移行した

これまで WordPress を使って技術メモを書いていたのですが、静的サイトジェネレーターの記事を読んで試してみたいと思いました。
とりあえず有名どころの jekyll, Hugo, Hexo などを一通り使ってみたのですが、React.js 製の Gatsby が面白そうだなと思って WordPress から移行してみました。

gatsby
https://github.com/gatsbyjs/gatsby

ちなみに移行したサイトはこちら

Gatsbyの特徴

• React.js ならではのリロード無しでのページ遷移
• サイト構築のためのコンポーネント・モデルが使える
• ライブで開発できる

導入方法

事前に　Node.js と npm をインストールしておく必要があります。

インストール

npm install -g gatsby

プロジェクト作成

gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog

開発サーバー開始

cd blog
gatsby develop

localhost:8000 にアクセスするとページ確認できると思います。ライブリロードが有効になっているのでリアルタイムで変更が反映されます。

各ディレクトリの役割

テーマなどによって微妙に違うかもしれませんが理解してる範囲で。

• config.toml 設定ファイル
• /components コンポーネントディレクトリ
  • _template.js テンプレートファイル
  • index.js インデックスファイル
• /pages データファイル（記事や固定ページ）
• /wrappers 記事や固定ページの wrapper?
• /static css や fonts

WordPress から Gatsby に移行する

jekyll の移行ツールを使えば記事データをマークダウンにしてくれます。その後で以下の２点を一括編集して。/pagesに移しました。

• permalink を path に置換
• 画像ファイルパスの書き換え

jekyll-import
http://import.jekyllrb.com/

Github Pages に公開する

Project Page の場合

パスを揃えるため config.toml の linkPrefix にプロジェクト名を入れ、Github にリモートレポジトリを設定し、

npm run deploy 

するとpackage.jsonの

gatsby build --prefix-links && gh-pages -d public

が実行されて、gh-pagesブランチでサイトが更新されます。

Profile Page の場合

自分は Netlify を使いこの方法で公開しました。Netlify については以下の記事が詳しいです。

高機能ホスティングサービスNetlifyについて調べて使ってみた
http://qiita.com/TakahiRoyte/items/b7c4d1581df1a17a93fb

使い方は Netlify にサインアップ後 GitHub とアカウント連携し今回のレポジトリを指定、以下の設定で保存します。

• Branch: master
• Build Cmd: gatsby build
• Public folder: public/

あとは管理画面上でカスタムドメインを設定しHTTPSを有効化したら完了。
master に push するとサイトが更新されます。

感想

機能的にはReact.js のコンポーネント設計によるテーマ作成のし易さと、生成されたページがリロード無しでの遷移出来るのがいいと思いました。gatsby build は少し時間がかかるかなという感じ。

費用的にはレンタルサーバー代の月1,500円分を節約出来ました。カスタムドメインも使わなければ0円で運用できるのでいいですね。

あと今回公式のテーマを参考にBootstrapを使ったテーマを作ってみました。
まだ技術的な情報が少ないので使う人が増えてくれるといいなと思います。

jaxx2104/gatsby-starter-bootstrap
https://github.com/jaxx2104/gatsby-starter-bootstrap