よしかわーるど

プログラミングで世界を変える

hugoからGatsbyに変えてみた

どうも、よしかわです。

hugo から Gatsby.js に乗り換えましたのでブログ記事を書いていきます.

対象読者

  • hugo で静的コンテンツを作っている人
  • Gatsby に興味がある人
  • GraphQL に興味がある人

目次

このブログでは以下のことを行います.

参考文献

GatsbyJS

netlify-templates/gatsby-starter-netlify-cms

Gatsby とは

React.js ベースの静的サイトジェネレータ.

Gatsby は React の公式サイトにも採用されている.

Gatsby の特徴として, GraphQL でデータの取得をしている.

Netlify CMS にも対応している.

移行して良かったこと

hugo から Gatsby に移行して良かったことは 3 つあります.

  • サイト構築に React が使えるので, コンポーネントが使える
  • React のページ遷移の恩恵を受ける事ができる
  • プラグインがめっちゃある

やはり React ベースなのでコンポーネントごとに開発することが出来て, とても楽です.

React のページ遷移は強力ですね, 開発していて一番実感しました.

テンプレート (netlify-templates/gatsby-starter-netlify-cms) を使用すると導入が楽.

上記のテンプレートを使うと, Netlify CMSにも対応することが可能.

最後に, プラグインがめっちゃあると書きましたが, 本当に膨大なプラグインがあります.

PageSpeed Insightsでは好成績をマークすることができました.

移行して悪かったこと

  • hugoと比べるとコンパイルが遅い
  • Reactに慣れないといけない

当たり前なんですけど, Go言語にビルド時間で勝ってくれと言うことはお門違い.

Reactベースなので, 初めての方はきついかもしれないです. ただ, GraphQLなどを扱えるのでめっちゃ楽しい.

終わりに

PageSpeed Insightsではhugoより好成績をマークすることができました.

本当にプラグインが多いので, 遊んでみようと思ってます.