Gaji-LaboのコーポレートサイトはGatsbyJSで作られています
こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。
今回はGaji-Laboのコーポレートサイトに使用している 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 は Jamstack 開発の知見があります
高パフォーマンス、表示が早く、SEO についての不安も少ない Jamstack。
フロントエンド開発の専門家として、技術選定からサーバーサイド開発側との調整まで対応します。
「Jamstack にしたいが、社内調整ができるか不安」
「Jamstack 開発がわかるエンジニアがいない」
Jamstack に関わるお困りごとに対して、メリット／デメリットの判断からお手伝いできます。
まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。
フロントエンドの相談をする！
