PR
【GatsbyJS製ブログ】Gatsbyでブログを立ち上げるまで
「Gatsby製ブログ」の記事が増えてきたので、まとめておきたいと思います。
実際にGatsbyを使って立ち上げているブログもあわせて見ていただけると嬉しいです。
目次
基本編
インストール、とりあえず立ち上げ、構造把握
特にこの記事で説明している、Gatsby製ブログの各種JSファイルの役割などの構造の把握はしておくことをオススメします。
あわせて読みたい
【GatsbyJS製ブログ】インストールからブログ立ち上げとGatsbyの構造
GatsbyJS（以下Gatsby）、ご存知でしょうか？Gatsbyは今流行りの静的サイトジェネレーター、といわれるブログやHPを作るためのReactベースのフレームワークです。 Gatsb…
クマ私はGatsbyの構造を把握するのに時間がかかりました…。
勉強方法
Gatsbyを勉強するのは、情報が少なくて結構大変です。
こちらの記事では、今までどうやってGatsbyの勉強をしてきたか、を説明していきます。
あわせて読みたい
【GatsbyJS製ブログ】Gatsbyの勉強法
このブログでは結構Gatsby関係の記事を書いていて、情報発信をしています。 もちろん自分でもGatsby製ブログの運営をしています！ ですが、Gatsbyは日本語の情報が少な…
パーツ化
パーツ化はプログラミングの基本です。
ヘッダーとフッターのパーツ化を例に挙げて、GatsbyではどのようにJSファイルを読み込むのか、を解説しています。
あわせて読みたい
【GatsbyJS製ブログ】ヘッダーとフッターのパーツ化「exportとimport」
Gatsby製ブログのカスタマイズ、今回は「ヘッダー、フッター作成と挿入」です。 ヘッダー、フッターのパーツ化をしてプログラミング的にインポートしていきたいと思いま…
GraphQL
GraphQLはGatsbyの目玉機能（？）の一つですが、Gatsbyならではのpropsの渡し方などもあります。
慣れれば問題ないのですが、このGatsby独特のGraphQLの挙動は押さえておきましょう。
あわせて読みたい
【GatsbyJS製ブログ】GatsbyにおけるGraphQLの基本を丁寧に説明
今回はGatsbyの目玉、GraphQLについてです。 このGraphQL、かなり便利なのですが「Gatsbyで扱うGraphQL」という意味で色々と使うときに注意する点があります。 そのあた…
ブログ投稿までの準備
GitHubActions
Gatsbyは立ち上げはそこまで難しくないのですが、作り込もうとすると、プログラミングでゴリゴリと書いていく作業になります。そこで、GitHubでソースコードを管理するケースが出てくる（というか、私はGitHubで管理している）のですが、「GitHubActions」という便利な機能を使って、GitHubにソースコードをpushしたら自動的にレンタルサーバーにデプロイする環境を作ります。
あわせて読みたい
【GatsbyJS製ブログ】GitHubActionsでブログ更新をサーバに自動デプロイ
今回はGatsby製のブログをGitHub Actionsを使ってGitHubにプッシュした際に自動でレンタルサーバーにデプロイする、という挙動を実装していきます。 「その前にGatsbyの…
フォント
フォントは地味ですが、ブログの「顔」とも言えます。ということで、フォント周りの設定の仕方を説明します。Googleフォントは指定の仕方によってはブログのパフォーマンスにかなりの影響を与えますが、自前でフォントを準備し、パフォーマンスに影響のない設定方法も解説します。
あわせて読みたい
【GatsbyJS製ブログ】フォントをGoogleフォントに変更する
Gatsbyのデフォルトの日本語フォントはお世辞にも見やすいもの、とは言えません。なんかこう「海外産」って感じです。今回はフォントの変更をしていきたいと思います。 …
SCSS
CSSはホームページやブログの外見を決める重要で基本的な要素ですが、様々な理由でお世辞にも使い勝手がいいとは言えません。Gatsbyでは、CSSの弱点を補った「SCSS」が使えます。加えて、「CSS Modules」という機能が使えて、「クラス名に悩む問題」から一気に解放されます。
あわせて読みたい
【GatsbyJS製ブログ】SCSS & CSS Modulesで快適CSS開発環境を作る
ようやく開発環境が整ってきましたが、まだまだ快適開発環境への欲は尽きません。ということで、Gatsby製ブログをカスタマイズする記事第３弾は、以前より興味津々だっ…
あわせて読みたい
SCSS(SASS)の@importが廃止！？後継機能@useの使い方と注意点を説明
SCSSにおいて、ファイルインポートは結構重要です。しかし、SCSSでこれまでファイルインポートに使っていた@importが廃止される予定になっています。今後は@useにシフト…
「そもそもSCSSとは？」という方はこちらをご覧ください。
あわせて読みたい
SCSSとは？「基本的な書き方から便利な使い方」
この記事では、SCSSの基本から便利な使い方を説明していきます。SCSSの便利さを知ってしまうと、SCSS無しではサイトの管理ができません。ホームページやブログを作って…
MDX
Gatsbyブログといえば、マークダウン形式でのブログ更新が便利ですが、このブログではマークダウンよりもさらに便利な「MDX」の導入をオススメしています。
あわせて読みたい
【GatsbyJS製ブログ】MDXを使えるようにする！あと書き方とか！
GatsbyでWebサイトを作るようなときは無理にマークダウン形式（.md）を使う必要はないかな、と思うのですが、ブログであればマークダウン形式で記事をガシガシ書いてい…
SEO対策
SEO対策は大事！いわゆる「検索上位を狙った技術」ではなく、クローラーに上手くページ情報を読み取ってもらうための設定です。これができていないと、いくらキーワード選定をしても無意味になってしまいます。
あわせて読みたい
【GatsbyJS製ブログ】これだけ！GatsbyにおけるSEO設定一覧！
ブログをやっている人が「SEO」と聞くと、キーワード選定や、見出しタグにキーワードを入れ込んだり、という「検索上位獲得のための手法」が思い浮かびます。 ですが、…
PWA対応
gatsby-plugin-manifestを使えば、PWA化も一発！ついでにファビコンの設定もやっちゃいましょう。「PWAとは？」という人もこちらの記事をご覧ください。
あわせて読みたい
【GatsbyJS製ブログ】gatsby-plugin-manifestでPWA化
PWA…Progressive Web Apps 「なんのこっちゃ！？」と思う人もいるかもしれませんが、要はWebページをスマホ向けのモバイルアプリのように使えるようになる仕組みです。 …
Googleアナリティクスの設定
Googleアナリティクスの設定はブログでは必須ですが、こちらもプラグインで一発です。
簡単にできますし、環境変数をつかった書き方も説明してあるので、参考にしてください。
あわせて読みたい
【Gatsby製ブログ】Googleアナリティクス設定gatsby-plugin-google-gtag利用
Googleアナリティクスはブログ運営をする上で必須、といえるツールです。 当然Gatsby製ブログでもGoogleアナリティクスは必要になってきます。 この記事では、プラグイ…
実際にブログを書く
実際にブログを書く際に便利な機能を実装していきます。
問い合わせフォームを作る
静的にサイトを作成するGatsbyは、単体でお問い合わせフォームを作ることができません。
入力してもらったデータを外部のサービスを通す形で、問い合わせフォームを実装します。
あわせて読みたい
【GatsbyJS製ブログ】コピペで簡単！問い合わせフォームを設置する
ブログに必須の問い合わせフォーム。 ただ、GatsbyJSは「静的なサイトを作る」ので、問い合わせフォームは基本的に設置できないんですよね。 ですので、問い合わせのペ…
画像の表示
画像の表示は、Gatsbyの鬼門です。「画像の最適化」という謳い文句はありますが、実際には画像の読み込み設定は思いのほか複雑です。
この記事では、画像の最適化の基本であるgatsby-plugin-imageのインストール方法と、静的に画像表示をするStaticImageタグ、動的に画像表示をするGatsbyImageタグを実践的な具体例を示しながら説明します。
あわせて読みたい
【GatsbyJS製ブログ】画像の扱い方（gatsby-plugin-image使用例も）
Gatsbyのウリの一つとして「画像の最適化」があります。 上手く画像指定してあげれば自動的にwebp形式で適切なサイズの表示をしてくれます。 しかし、この画像の最適化…
この記事では、MDXにおけるgatsby-plugin-imageを使った画像読み込みの設定について解説していきます。
あわせて読みたい
【GatsbyJS製ブログ】MDXの記事に画像を表示(gatsby-plugin-imageの利用法も)
こちらの記事で、MDXの書き方について説明しましたが、この記事ではMDX内で画像を表示する方法を説明します。 簡単に画像指定することもできますが、せっかくGatsbyを使…
GoogleマップやYoutubeを埋め込む
GoogleマップやYoutubeをブログに埋め込みたい！という場合もあるでしょう。GoogleマップやYoutubeの読み込みはブログをリッチにしますが、パフォーマンスの低下にも繋がります。そこも上手く処理しているので、ぜひご覧ください。
あわせて読みたい
【GatsbyJS製ブログ】Google マップをAPIなしでブログに埋め込む
皆さんはGoogle マップをブログに使っていますか？ ブログの種類にもよりますが、マップを使う場面も出てくると思います。 この記事ではGoogle マップをAPIなしでブログ…
あわせて読みたい
【GatsbyJS製ブログ】Youtubeの埋め込み（レスポンシブ対応も）
ブログを書いていて「ここにあのYoutubeを埋め込みたい！」もしくは「自分の作ったYoutubeを紹介したい！」ということがあると思います。ちなみに実際Youtubeの埋め込み…
リッチな内部リンクを作る
内部リンクを適切に張ることは、ブログ運営において結構重要な要素です。
こちらで紹介しているのは、slugを渡せば、アイキャッチとタイトルを拾って内部リンクを作ってくれるブログパーツです。
useStaticQueryの使い方についても説明しています。
あわせて読みたい
【GatsbyJS製ブログ】リッチな内部リンクを作る（useStaticQuery使用）
内部リンクを上手く貼ることは結構重要な作業です。 Googleのクローラーが回遊しやすくなったり、ページ同士の関連性が深まることで評価が上がったり、なにより訪問者の…
ちょっと上級編
パフォーマンスについて
Gatsby製のブログは「早い」がウリのひとつですが、調子に乗って色々な機能を実装していくと、思いのほかパフォーマンスが下がります。そのパフォーマンス改善について説明していきます。
あわせて読みたい
【GatsbyJS製ブログ】パフォーマンス改善
Gatsbyでブログを立ち上げて運営し始めてから、色々とカスタムも加えていきました。 GoogleMapやYoutubeを埋め込んだり、アドセンスやアフィリエイトを埋め込んだり…お…
アニメーション
今やWebページにアニメーションをつけるのは、半ば常識になっています。
Gatsbyでももちろんアニメーションをつけることができます。実際に運営しているGatsbyブログでもアニメーションをつけています。
このアニメーションを実装する際にReactのライブラリであるframer-motionを使っています。色々できてかなり便利です！
クマGatsbyはReactベースのCMSなのでframer-motionが使えます！
あわせて読みたい
【Gatsby製ブログ】framer-motionの基本的な使い方
今やサイトにアニメーションで動きをつけるのは必須と言っても過言ではないでしょう。 Gatsby製のブログやサイトでも動きをつけることはできます。実際に私が運営してい…
まとめ
自分でもどんな記事を書いたかわからなくなってきたので、まとめてみました。
参考にしていただければ、と思います。
クマ随時更新していきたいと思います！
Gatsbyを学習している方への私からのオススメ！
私が読んでよかったな、と思うGatsbyの学習をするのにオススメの本を紹介しておきます。
リンク
画も多くてとても読みやすく、ステップバイステップでGatsbyJSのサイトを作ることができます！
また、Gatsbyを学習する上で、Reactを同時に学習することもオススメします。
リンク
こちらも、まず構成や見た目がとても読みやすい本です。加えてReactに対しての専門的な知識を丁寧に学ぶことができます。ここでReactに対する基礎知識をしっかりしておくと、Gatsbyに対する見方が変わって、Webページをサクサク作ることができるようになります！
あと、色々と調べたのですが、Reactの学習ならUdemyもオススメです。必要な知識を１動画単位で購入できるので、学習に無駄がないです。Reactってあんまり学習できるプログラミングスクールみたいなのがないんですよね…。「React」と検索するだけで大量に動画がでてきます！
