Gatsby でブログ
August 14, 2020
セットアップ
公式ドキュメントの手順をざっと確認すると、スターターと呼ばれる雛形を利用しているようだったので、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 を削除
- 既存画像アセット削除
- 既存記事削除
