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 CMSのようなHeadless CMSと組み合わせると更に楽に運用出来るようになります。

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

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

予約投稿を行う

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

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

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

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

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

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

EXCLUDE_PATH="/foo/**"

まとめ

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

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

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

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

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