GatsbyJSでブログを作ってみた

技術


今回、GatsbyJS という「静的サイトジェネレータ」を使ってブログサイト(このサイト)を構築してみました。 元々 WordPress で自作テーマづくりなどをしていたので、WordPress(動的サイト)と比較して感想をお伝えしていきたいと思います。

静的サイトジェネレータってなぁに

静的サイトと動的サイトの違い

Web サイトの生成方法は大きく分けると 2 つ。

  1. 静的サイト
  2. 動的サイト

違いは、表示する内容をサーバーで生成するかどうか。 動的サイトは、ユーザーがアクセスしてきた際にサーバー側でコードを生成する仕組み。 一方静的サイトはすでにあるコンテンツを表示するだけ。

なので、静的サイトは動的サイトに比べると表示速度が速い!…らしい。

動的サイトの代表格が WordPress。 サイトの情報は MySQL(データベース)で管理して、ユーザーがアクセスすると、PHP でよいしょーっと Web サイトを生成する仕組みですね。

静的サイトジェネレータは静的サイトのお悩みを解決するためのもの

静的サイトって速いんだ!じゃあ、静的サイトにしよう!…っては単純に行かないですよね。

HTML をごりごり書いて静的サイトを作ろうとすると、いろんなお悩みにぶち当たります。

  • ページ遷移どうしよう?
  • カテゴリーが変わった場合は?
  • 記事の更新方法どうするの?

ざっくりいうと、静的サイトに関わるお悩みを解決できるようにするよ!というのが静的サイトジェネレータ。

GatsbyJS でできること

今回のサイト制作に使ったのは、GatsbyJSという静的サイトジェネレータ。

npm を使ってインストールできます。

npm install -g gatsby-cli

細かいコマンドは公式サイトに載っているので割愛するとして、便利なコマンドが用意されていて、それを使って楽に Web サイトを作りましょうね~という感じ。

React ベースなので、React が分かる人はすんなり入れるだろうな~という感じ。 正直 React がわからないと構築には結構手間取るけど、スターターキットや、公式のチュートリアルも充実していて、あんまり凝ったサイトを作るのでなければコピペでもなんとかなる。

基本的な動作環境を作ってあげた後は、develop コマンドを実行して開発環境を立ち上げる。

gatsby develop

開発環境を立ち上げると、ソースを変更するとリアルタイムで表示が変わって便利。

ローカルのソースをデータベース的に検索する機能  ×   Markdown を HTML に変換する機能があって、ブログの記事投稿はこの機能の組み合わせで実現できる。

他にも便利なプラグインが用意されている。 例えば scss、sass をそのまま読込ができるプラグインなど。

プラグインは正直追いきれていないので、実装する都度記事にまとめていきたい。

WordPress と比較すると

WordPress と比較したときのメリット、デメリットを書いていきます。

メリット

  • ソースを自分で制御できるので、CSS フレームワークとの相性が良い
  • HTML に変換した後は確かに動作が早い
  • マークダウンをそのまま記事として公開できる
  • 基本ローカル環境で開発できるので、インターネット環境が整っていなくても開発しやすい

デメリット

  • HTML への変換に時間がかかる

    • ページが増えれば増えるほど変換時間増すのでは?という懸念…
  • JavaScript の知識が必要になる

    • メリットになる人も多いと思いますが、普段全然 JS いじらないので…
  • CSS を外部ファイルとして読み込むとインラインで埋め込まれてレンダリングがブロックされる

    • おそらくこれも私が JS 方式を理解しきれていないため……
  • ソースを組んでいるときに HTML の全体像が若干分かりにくい

    • 例えばheadを初期状態でいじりにいけない。いじるためにはプラグイン入れる必要あり。

デメリットを見ていくと、JavaScript とお友達になる必要がありますね…。

まだまだ実装しきれていない機能も多いため、少しずつ強化していきたいと思います。 この記事を書いてて感じたのは Markdown で記事作成できるのやっぱり楽!ということ。 頑張って JavaScript、そして Gatsby とお友達になりたいです。

sake

現役システムエンジニア。
普段はホスト系のお仕事してます。
ブログでは主にWeb関係の技術について、勉強したことや実際にコーディングしてみた内容を発信していきます。

プロフィール