Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

これまで 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 の移行ツールを使えば記事データをマークダウンにしてくれます。その後で以下の2点を一括編集して。/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

jaxx2104
コーラとバグが好き
https://jaxx2104.info/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした