TaNA LABO
エンジニアリング

March 28, 2020

JavaScript
Gatsby.js
Firebase

Reactベース静的サイトジェネレーターGatsby.jsで役立つプラグインの話

post 30

WordPress自体は大変有用なオープンソースだと思うけど、CMSが孕むセキュリティーの問題、コストに難があったり、表示速度の遅さ(インフラ知識があれば、ある程度は改善出来るけど)など、散々無料で使わせてもらっているのに、何かと不満を持っていた。

そんな背景もあって、以前より話題となっていた静的サイトジェネレーターのGatsby.jsを使ってみたが プラグインも豊富で「簡単・便利・カッコいい」の三拍子が揃っているし、何よりMarkdownでサクサク書けて、CMSより爆速で表示されることを実感できた。

post 30 1

Gatsby.js自体がReactとGraphQLをベースに構築されているので、当然JavaScriptやReactの知識や、yarnでのモジュール管理が求められる。ただプラグインは豊富で、機能拡張は簡単に出来るので、構築する上で役立ったプラグインや参考記事を紹介。

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`

ローディングバー

gatsby-config.jsにgatsby-plugin-nprogressを追加。

plugins: [
  {
    resolve: `gatsby-plugin-nprogress`,
    options: {
      color: `#444`,
      showSpinner: false,
    },
  },
]

ページネーション

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

yarn add gatsby-awesome-pagination

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

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

Firebaseへのデプロイ

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

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

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

Gatsby.jsの公式HP
Takumon Blog
suzukalight.com
Crieit
Corylog
キクナントカドットコム
Nakamu Blog
RIGHTCODE


©Copyright2020 TaNA LABO. All Rights Reserved.