Gatsby を選んだ理由と初期設定

Gatsby を選んだ理由

ウェブサイトを開設するにあたり、今まで触ったことがある WordPress ではなく、全く新しい Gatsby を選んだ理由として、次の点が挙げられる。

• 高いパフォーマンス
• React の勉強がてら
• CSS 練習の取っ掛かり
• Markdown で記事が書ける
• 既に高い人気を誇る

都度データベースにアクセスして動的にページを生成する代わりに、事前に全てのページを生成しておくという SSG (Static Site Generator) の高いパフォーマンスは、まず何よりも最大の魅力だ。

そして SSG の中でも React ベースの Gatsby を選ぶことで、最近勉強している React の良い実践の場が得られるのも大きい。何事でも習熟には練習が不可欠だと思うので、これを機により多くの経験を積みたい。また、Gatsby のサイト・テンプレートはシンプルなものが多いので、CSS でのスタイリングに苦手意識がある僕にとって、敷居が低い取っ掛かりとなる事も期待したい。

あと、普段から日記やノートを Markdown で書いているので、それらがシームレスに活かせるという利便性の高さも大切。何となくサイト運営を続けて行けそうな、気にさせてくれる。

Gatsby は GitHub で 50.2k のスター数（一方 WordPress は 15.9k）を獲得しており、業界で既にかなり受け入れられているようだ。次のデファクト・スタンダードになる可能性を念頭に、今から慣れ親しんでおく価値は十分にある思う。

初期設定

スターターは、今後のカスタマイズのやりやすさを考えて、シンプルな Gatsby Starter Blog を選んだ。

設定作業では、下記の記事を参考にさせて頂きました！

• gatsby-starter-blog のカスタマイズ | shidaru blog
• GatsbyJS の Starter Blog を使用してブログを作った際に変更した箇所についての備忘録 | hiko1129’s note

サイト全体の属性情報

• gatsby.conf
  • siteMetadata
  • gatsby-plugin-manifest: favicon
• Seo コンポーネント (src/components/seo.js)
  • lang のデフォルト値を “ja” に変更

favicon は https://favicon.io/favicon-generator/ を利用して作成

プロフィール表示（Bio コンポーネント）

トップページのヘッダや各記事のフッタに表示されるプロフィールを、自分用に変更する。共に Bio コンポーネント (src/components/bio.js) から生成される。

• プロフィール画像（39 行目）
  • src/images/profile-pic.png (400x400) を変更
• About（はじめに）ページへのリンクを追加（49 行目〜）
• SNS へのリンク（49 行目〜）
  • Twitter はまだやってないので、とりあえず Facebook と GitHub へのリンクを表示するように変更

{
  author?.name && (
    <p>
      Written by <strong>{author.name}</strong> {author?.summary || null}
      {` `}
      <Link to="/about">About</Link>
      {` / `}
      <a
        href={`https://facebook.com/${social?.fb || ``}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        Facebook
      </a>
      {` / `}
      <a
        href={`https://github.com/${social?.github || ``}`}
        target="_blank"
        rel="noopener noreferrer"
      >
        GitHub
      </a>
    </p>
  );
}

日本語対応

日本語で記事を書くと 要約が表示されない問題 を修正して( cf. Excerpts for non-latin languages)、日付表示 を日本で馴染みの記法に直す。

インデックページ・コンポーネント (src/pages/index.js)

• 記事の要約が正しく表示されるように修正（77 行目）
  • excerpt → excerpt(truncate: true)
• 日付表示の変更（82 行目）

allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
  nodes {
    excerpt(truncate: true)
    fields {
      slug
    }
    frontmatter {
      date(formatString: "YYYY-MM-DD")
    // 省略

記事のテンプレート (src/templates/blog-post.js)

• meta description のデフォルト値がとして、記事の要約が正しく取得されるように修正（82 行目）
• 日付表示の変更（86 行目）

markdownRemark(id: { eq: $id }) {
  id
  excerpt(truncate: true, pruneLength: 160)
  html
  frontmatter {
    title
    date(formatString: "YYYY-MM-DD")
    description
  }
  // 省略

SEO 対策

• サイトマップ
  • gatsby-plugin-sitemap
  • デフォルトでは、サイトマップは /sitemap/sitemap-index.xml に生成 される
• Google Analytics
  • インストールされていた旧式の gatsby-plugin-google-analytics (analytics.js) を削除
  • GA4 に対応した新しい gatsby-plugin-google-gtag (gtag.js) をインストール

スタイル

とりあえずフォントを @fontsource/noto-sans-jp で Noto Sans JP に変更した。今後少しずつカスタマイズしていく予定。

結果

無料の Gatsby Cloud にデプロイして Lighthouse で評価してみた。上は自分が WordPress で運営している別のウェブサイト、下が今回 Gatsby で新しく作ったサイト。

おぉ、確かに目覚ましい改善が確認できた！！

今後の展開

• 見栄えに個性を出す
• ナビゲーション・メニュー
• 記事のタグ
• 記事に目次を追加
• サイト内の検索