Gatsby でブログ

2020/8/14

セットアップ

公式ドキュメントの手順をざっと確認すると、スターターと呼ばれる雛形を利用しているようだったので、https://www.gatsbyjs.com/starters/ を見て、スターが多い gatsby-starter-blog を使ってみることにしました。Node.js と Git はインストール済みの前提です。

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

これで blog フォルダに雛形ができました。次にローカル開発サーバーを立ち上げます。

cd blog
gatsby develop

ここで早速、Cannot find module 'gatsby-cli/lib/reporter' とエラーが・・・。検索すると Github の Issue がヒットし、gatsby バージョン問題っぽかったので、gatsby のバージョンを上げます。

npm update gatsby

差分は下記。

--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "url": "https://github.com/gatsbyjs/gatsby/issues"
   },
   "dependencies": {
-    "gatsby": "^2.24.41",
+    "gatsby": "^2.24.47",
     "gatsby-image": "^2.4.15",
     "gatsby-plugin-feed": "^2.5.11",
     "gatsby-plugin-google-analytics": "^2.3.13",

これで開発サーバーが立ち上がりました。起動時に表示される通り、http://localhost:8000/ にアクセスすれば確認できます。

雛形修正

事前調査

まずは src/ や content/ 、gatsby-*.js 辺りをなんとなく目を通して、全体像を把握します。ポイントは下記でしょうか。

データ

  • ブログ名等の設定は gatsby-config.js 内の siteMetadata に記述され、各所で使われているので適切な内容に修正。
  • 各記事は content/blog/ 以下に配置された md ファイルを元に生成。
  • frontmatter は title と date と description だが、description 記載が無ければ、本文の先頭規定文字を利用（ただし、全記事 description 記載なしにしたければ各所を修正する必要あり）。

ロジック

  • gatsby-node.js が md ファイルを frontmatter___date でソートして、新しいものから最大1000件分記事を生成。
  • 記事の生成には src/templates/blog-post.js を利用。

プラグイン

  • gatsby-plugin-feed は中途半端？

修正内容

以上を踏まえ、下記修正を加えました。

  • twitter アカウントないので関連箇所と、ついでに Bio タグ含めたプロフィール関連削除
  • frontmatter の description がなくても機能するように修正
  • gatsby-plugin-feed を削除
  • 既存画像アセット削除
  • 既存記事削除

Menu

Link