Gaji-LaboのコーポレートサイトはGatsbyJSで作られています

ishigaki

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回はGaji-Laboのコーポレートサイトに使用している GatsbyJS という静的サイトジェネレーターについてまとめたいと思います。

GatsbyJS とは?

GatsbyJSの公式サイトページのキャプチャ画像

GatsbyJS は、React用に作られた静的サイトジェネレーターです。

静的サイトジェネレーターは名前の通り静的なサイトを生成するためのフレームワークです。

ページのテンプレートファイルを用意し、Markdownなどで追加したコンテンツをテンプレートに沿ってHTML/CSS/JSなどの静的なファイルにビルドすることによって高速なWebページを構築します。

静的サイトジェネレーターには

  • ページを動的に生成しないため、表示が高速
  • サーバーの利用・運用コストを抑えられる
  • Gitでコンテンツ管理ができるため、管理コストも低い

などのメリットがあります。

GatsbyJSもその中の一つであり、データ取得にGraphQLを使っているのが大きな特徴です。

この記事では紹介に留めますので、GatsbyJSの詳しい使い方は公式のドキュメントをご覧ください。

Gaji-Labo のコーポレートサイトでも使っています

Gaji-Labo のコーポレートサイトも GatsbyJS + Netlify + Netlify CMS の構成で作られています。

GatsbyJS 単体でも静的サイトを Netlify などにデプロイして運用することは可能ですが、Netlify CMSのようなHeadless CMSと組み合わせると、さらに更新作業を楽に行えるようになります。

詳しくは「Gaji-LaboのコーポレートサイトはNetlify CMSを使っています」もご覧ください。

コーポレートサイトの運用を円滑に進めるためにカスタマイズしている部分があるため、いくつかご紹介します。

予約投稿を行う

「お知らせ」の予約投稿を行うため、gatsby-plugin-draftというプラグインを導入しています。

このプラグインを導入すると、「Markdown の date フィールドが現在日時よりも先に設定されている時、自動で draft フィールドの値を true にする」ため、draft フィールドが true になっているデータを除外することで擬似的な予約投稿を行うことができます。

(2020.11.30追記)詳しくはこちらの記事に書きましたのでご覧ください。

開発時のみにページを表示させる

gatsby-plugin-excludeというプラグインを使用すると、production 環境時にのみページを生成させることが出来るようになります。

{
  resolve: 'gatsby-plugin-exclude',
  options: { paths: process.env.EXCLUDE_PATH },
},

指定は.env.productionファイルで以下のように行っています。

EXCLUDE_PATH="/foo/**"

(2020.11.30追記)詳しくはこちらの記事に書きましたのでご覧ください。

まとめ

今回はGaji-Laboのコーポレートサイトにも使用している GatsbyJS という静的サイトジェネレーターについてまとめました。

これからの記事で、GatsbyJSの TIPS や、今回ケーススタディで紹介したことなどを詳しく書いていければと思っています。

Gaji-Laboブログ内には、他にもGatsbyJSについて取り上げた記事があります。GatsbyJSの開発に興味がある方、GatsbyJSをどう使ったらいいかの情報が知りたい方、実践でのポイントを勉強したいと思っている方などにおすすめの記事シリーズを「GatsbyJSを実践で使ってみた」としてまとめていますので、あわせてお読みいただけるとうれしいです。

Gaji-Labo は Jamstack 開発の知見があります

高パフォーマンス、表示が早く、SEO についての不安も少ない Jamstack。フロントエンド開発の専門家として、技術選定からサーバーサイド開発側との調整まで対応が可能です。「Jamstack にしたいが、社内調整ができるか不安」「Jamstack 開発がわかるエンジニアがいない」などのお困りごとに対して、メリット/デメリットの判断からお手伝いできます。まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

フロントエンドの相談をする!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。