【GatsbyJS製ブログ】Gatsbyでブログを立ち上げるまで

「Gatsby製ブログ」の記事が増えてきたので、まとめておきたいと思います。

実際にGatsbyを使って立ち上げているブログもあわせて見ていただけると嬉しいです。

基本編

インストール、とりあえず立ち上げ、構造把握

特にこの記事で説明している、Gatsby製ブログの各種JSファイルの役割などの構造の把握はしておくことをオススメします。

勉強方法

Gatsbyを勉強するのは、情報が少なくて結構大変です。

こちらの記事では、今までどうやってGatsbyの勉強をしてきたか、を説明していきます。

パーツ化

パーツ化はプログラミングの基本です。

ヘッダーとフッターのパーツ化を例に挙げて、GatsbyではどのようにJSファイルを読み込むのか、を解説しています。

GraphQL

GraphQLはGatsbyの目玉機能（？）の一つですが、Gatsbyならではのpropsの渡し方などもあります。

慣れれば問題ないのですが、このGatsby独特のGraphQLの挙動は押さえておきましょう。

ブログ投稿までの準備

GitHubActions

Gatsbyは立ち上げはそこまで難しくないのですが、作り込もうとすると、プログラミングでゴリゴリと書いていく作業になります。そこで、GitHubでソースコードを管理するケースが出てくる（というか、私はGitHubで管理している）のですが、「GitHubActions」という便利な機能を使って、GitHubにソースコードをpushしたら自動的にレンタルサーバーにデプロイする環境を作ります。

フォント

フォントは地味ですが、ブログの「顔」とも言えます。ということで、フォント周りの設定の仕方を説明します。Googleフォントは指定の仕方によってはブログのパフォーマンスにかなりの影響を与えますが、自前でフォントを準備し、パフォーマンスに影響のない設定方法も解説します。

SCSS

CSSはホームページやブログの外見を決める重要で基本的な要素ですが、様々な理由でお世辞にも使い勝手がいいとは言えません。Gatsbyでは、CSSの弱点を補った「SCSS」が使えます。加えて、「CSS Modules」という機能が使えて、「クラス名に悩む問題」から一気に解放されます。

「そもそもSCSSとは？」という方はこちらをご覧ください。

MDX

Gatsbyブログといえば、マークダウン形式でのブログ更新が便利ですが、このブログではマークダウンよりもさらに便利な「MDX」の導入をオススメしています。

SEO対策

SEO対策は大事！いわゆる「検索上位を狙った技術」ではなく、クローラーに上手くページ情報を読み取ってもらうための設定です。これができていないと、いくらキーワード選定をしても無意味になってしまいます。

PWA対応

gatsby-plugin-manifestを使えば、PWA化も一発！ついでにファビコンの設定もやっちゃいましょう。「PWAとは？」という人もこちらの記事をご覧ください。

Googleアナリティクスの設定

Googleアナリティクスの設定はブログでは必須ですが、こちらもプラグインで一発です。

簡単にできますし、環境変数をつかった書き方も説明してあるので、参考にしてください。

実際にブログを書く

実際にブログを書く際に便利な機能を実装していきます。

問い合わせフォームを作る

静的にサイトを作成するGatsbyは、単体でお問い合わせフォームを作ることができません。

入力してもらったデータを外部のサービスを通す形で、問い合わせフォームを実装します。

画像の表示

画像の表示は、Gatsbyの鬼門です。「画像の最適化」という謳い文句はありますが、実際には画像の読み込み設定は思いのほか複雑です。

この記事では、画像の最適化の基本であるgatsby-plugin-imageのインストール方法と、静的に画像表示をするStaticImageタグ、動的に画像表示をするGatsbyImageタグを実践的な具体例を示しながら説明します。

この記事では、MDXにおけるgatsby-plugin-imageを使った画像読み込みの設定について解説していきます。

GoogleマップやYoutubeを埋め込む

GoogleマップやYoutubeをブログに埋め込みたい！という場合もあるでしょう。GoogleマップやYoutubeの読み込みはブログをリッチにしますが、パフォーマンスの低下にも繋がります。そこも上手く処理しているので、ぜひご覧ください。

リッチな内部リンクを作る

内部リンクを適切に張ることは、ブログ運営において結構重要な要素です。

こちらで紹介しているのは、slugを渡せば、アイキャッチとタイトルを拾って内部リンクを作ってくれるブログパーツです。

useStaticQueryの使い方についても説明しています。

ちょっと上級編

パフォーマンスについて

Gatsby製のブログは「早い」がウリのひとつですが、調子に乗って色々な機能を実装していくと、思いのほかパフォーマンスが下がります。そのパフォーマンス改善について説明していきます。

アニメーション

今やWebページにアニメーションをつけるのは、半ば常識になっています。

Gatsbyでももちろんアニメーションをつけることができます。実際に運営しているGatsbyブログでもアニメーションをつけています。

このアニメーションを実装する際にReactのライブラリであるframer-motionを使っています。色々できてかなり便利です！

まとめ

自分でもどんな記事を書いたかわからなくなってきたので、まとめてみました。

参考にしていただければ、と思います。