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

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

目次

基本編

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

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

クマ

私はGatsbyの構造を把握するのに時間がかかりました…。

勉強方法

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

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

パーツ化

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

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

ブログ投稿までの準備

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

まとめ

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

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

クマ

随時更新していきたいと思います!

今の仕事に満足していますか?やりがい、給料、ワークライフバランス…現状に不満を持ったり嘆いているのはもったいないと思います。

今の時代、海外のようにキャリアアップのために活動していくのは、志の高い人には必然とも言えます。動かない人は、それなりの人生を歩むしかありません…。「面倒だ」という人はそれでもいいでしょう。しかし、少しずつでも前向きに活動する人は、最終的に「面倒だ」という人よりも遥かに充実したキャリアを歩むことができます

そこで、これからのキャリアを見据えた相談をしてみませんか?実力派エージェントが、今の仕事環境より、もっと高待遇の職場選びをサポートしてくれます!

あなたへオススメ!
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次