2020/05/29 : ツールを使う方法へアップデート

mdファイルのヘッダを自動生成する自作ツールを導入

2020/05/26：内容アップデート

2020/05/26

• 今まで画像データをstatic/imgに置いていたがブログのフォルダ/imgへ変更した。つまりstaticからBLOG記事直下にimgフォルダを移動した。
• 記事が大きく修正されるので打ち消し線ではなく書き直ししている。

画像パスの変更のみであるので無駄な記事を大きく削った。

詳しくは説明しないがgatsbyのとある条件出でるビルドエラーから察するにおそらくBLOG記事(mdファイル)と同じフォルダに画像を置く前提でプログラムが組まれている模様。

Markdownに記述される画像は必ずsrc配下でアクセスできるようにしよう。

目標

Gatsbyで効率よく記事を書くこと。

GatsbyはCMS無しだと少し複雑なため工夫が必要。

Typora

私はフリーのMarkdownエディタとして評価が高いTyporaを採用している。公式サイト

コンテンツマネジメントシステムとしての機能は持ち合わせていないがシンプルで使いやすい。

今回は更新のワークフローを解説する記事なのでエディタがTyporaでなければいけない理由はない。

別の使いやすいマークダウンエディタを使ってもらっても良いかと思う。

ここからは私の記事更新手順を紹介していく。

テンプレート用のフォルダを準備

まずは「テンプレート」となるフォルダを作成する。

重要なのはGatsbyとは全く関係ないフォルダに作ることである。

Gatsbyのフォルダに含めてしまうとbuild時に無駄な確認が走るのでオーバーヘッドとなる。

画像用フォルダとtemplate.mdを用意

新しい方法 2020/05/29

YAMLヘッダとファイル名を手入力すを作るのが面倒なので、ヘッダ入力とファイル生成を助けるツールを作った。

次の記事を参考にしていただければと思う

【Gatsby.js】CMSを使わずにMarkdownファイルを作ってくれるツール

古い方法

----------------------------------------- 古い方法ここから -----------------------------------------

imgフォルダは実際にGatsbyの画像アドレスと同じ相対パスになるように名前を合わせること。

blogのショートカットはGatsbyフォルダの中の自分のMarkdownファイルを入れているところにつながっており、記事が完成したらこのショートカットにドラッグ＆ドロップしてすぐに移動するために置いている。

template.mdの中身

こちらは頭にyamlデータのテンプレートだけ書いている。

私の場合は

---
templateKey: blog-post
title: ''
date: 2020-01-01
description: ''
draft: false
featuredimage: 
tags:
  - 
author: CrypticToilet
---

こんなかんじ。ここだけ別のプログラムから生成できたら楽かもしれないがコレは各個人で違うのでおまかせする。

日付は正確さを必要としなければ日にちまで入力してあれば良いので手入力で十分。

----------------------------------------- 古い方法ここまで -----------------------------------------

imgフォルダの中身

こちらも実際にGatsby側に保存する画像フォルダのショートカットが入っており、記事が完成したらこちらにD＆Dで放り込むだけにしてある。

Typoraの良いところ

ドラッグ＆ドロップで画像を指定フォルダ(ここではimg)にコピーした上でmd内で相対パス表記に変えてくれるところ。

正直ほかのエディタでもできそうだが一番重要なポイントである。

もちろん記事編集がしやすい点(バグが少ない、ショートカットキーが豊富、プレビューが見やすいなどなど)も重要。

※相対パス表記と画像を自動コピーはファイル＞設定＞画像から設定してやる必要があるので注意。

実際に記事を書くときは

ここまでで作成したテンプレートフォルダをまるっとコピーしてそちらで記事を書き始める。

最後にmdファイルのファイル名の更新も忘れないように。

完成したらショートカットへ放り込む仕組みだ。

なぜこんなふうに別フォルダで作業するのか

ここからはGatsbyのクセを説明していくだけなので全て読み飛ばしてもらっても良い。

なぜこんなふうに別フォルダで記事を書いたほうが良いのだろうか。

Gatsbyで記事を作成する場合はdevelopモードを使って「記事保存→ブラウザで確認」という手順を踏んでいる人が多いはずだ。

これはこれで良いのだが一つ問題がある。

下書きモードが無い

本番の記事フォルダにいれて記事を保存しブラウザで実際の画面を確認するためこのままpushしてしまうと本番BLOGにそのまま記事が投下されてしまう。

下書きモードを実装すればよいのでは？→ダメ。よりめんどい。

この対策として私も実際に下書きモードをコーディングした。つまりBlog記事の頭にあるyamlでdraftがtrueである記事はBLOGに表示しないという設定だ。

これには2つ問題が有る。

1. 下書きにになっている記事も毎回ビルド時に確認が入るので処理のオーバーヘッドとなる
2. そもそも公開前に下書きになっている記事だけ拾い直すという作業が面倒

特に2が面倒である。

いくつも下書きがあったとしてもCMSがあるなら問題ないが、実際に下書きからなにか一つ公開しようと思った時にいちいちdraft:trueのyamlが記述されている記事を手検索して公開記事に落としていく必要がある。

下書きファイルが3,4件で既に管理が面倒に感じた。

というわけで...フォルダコピー法

かなり原始的な方法だがテンプレートフォルダを全く別の作業用フォルダでコピーしていく方法が私の中で一番手っ取り早い結果となっている。

また下書きもフォルダごとに管理しているので、Windowsのエクスプローラ上で何個の記事があるのかがわかりやすい。

ただ、それでもファイル名やyaml部分が手書きなので無駄は存在する。

このあたりはプログラマらしくyaml入力とファイル名生成のコードを書けばよいかもしれないが、工数を割いてツールを作る必要があるほど面倒には感じていない。手入力で十分だ。

もしより良いCMSや手法などが見つかれば報告したい。