今更だけどコロナで外出自粛なのでGatsby.js + Firebaseで個人ブログを作ってみた #React

WordPress自体は大変有用なオープンソースだと思いますが、色々思うところもあり、またコロナ騒動で外出自粛だったので、Gatsby.jsで個人ブログを作ってみました（まだまだ細かい部分が完璧ではないですが...）

Qiita上でも色んな方がGatsby.jsを推していますが、プラグインも豊富で、比較的に簡単に実装出来ました。

記事もマークダウンでサクサク書けて快適（もうWordpressには戻れません）

構築する上で役立ったプラグインや参考記事を紹介します。

環境構築

公式ページのチュートリアルを一度読めば出来ます!!

npm install -g gatsby-cli
gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

まずはHello World表示までを確認。

cd hello-world
gatsby develop

■ Gatsby.jsのチュートリアル

gatsby-imageでの画像表示

Gatsby.jsの初心者殺しと言われる最初の関門らしい。

以下の記事が参考になりました。

■ GatsbyJSのimageを使ってみよう@Crieit

マークダウン上では楽に画像表示が可能だが、Gatsby.js上ではかなり癖がある模様。

カテゴリとタグの実装

こちらの記事が参考になりました。

■ GatsbyJSで作っているブログにタグ機能を導入した@キクナントカドットコム

Markdown記述 → gatsby-node.jsの追記 → templates作成の順に作れば、タグでの検索が可能。

タグ検索さえ実装出来れば、カテゴリ検索もほぼ同様なので、簡単に実装出来ると思われます。

サイトマップ作成

gatsby-config.jsにsiteUrlを設定することで、最低限のサイトマップが作成されます。

siteMetadata: {
  siteUrl: `https://hogehoge.com`,
},
plugins: [`gatsby-plugin-sitemap`]

Youtubeの埋め込み

gatsby-config.jsにgatsby-remark-embed-youtubeを追加。

{
  resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: "gatsby-remark-embed-youtube",
          options: {
            width: 800,
            height: 400
          }
        },
        {
          resolve: `gatsby-remark-responsive-iframe`,
          options: {
            wrapperStyle: `margin-bottom: 1.0725rem`,
          },
        },
      ],
    },
},

マークダウンファイルには以下のフォーマットで追記。

`youtube:https://www.youtube.com/embed/XXXXXXXXX`

ページネーション

ページネーション用のプラグインを追加。

yarn add gatsby-awesome-pagination

Gatsby.jsにもGraphQLにも慣れていなかったので、一番大変だったかも。

後は以下リンク先を参考に実装。

■ Gatsbyにページネーションを実装する
■ ことばを学ぶ　LEARN GATSBY 週間 #5日目

Firebaseへのデプロイ

ローカル環境からFirebaseへのデプロイ手順。

yarn global add firebase-tools
firebase login
firebase init
firebase deploy

参考にさせて頂いたブログ

■ Takumon Blog
■ suzukalight.com
■ Crieit
■ Corylog
■ キクナントカドットコム
■ Nakamu Blog
■ RIGHTCODE