mdファイルのヘッダを自動生成する自作ツールを導入
2020/05/26
static/img
に置いていたがブログのフォルダ/img
へ変更した。つまりstatic
からBLOG記事直下にimg
フォルダを移動した。画像パスの変更のみであるので無駄な記事を大きく削った。
詳しくは説明しないがgatsby
のとある条件出でるビルドエラーから察するにおそらくBLOG記事(mdファイル)と同じフォルダに画像を置く前提でプログラムが組まれている模様。
Markdownに記述される画像は必ずsrc
配下でアクセスできるようにしよう。
Gatsby
で効率よく記事を書くこと。
Gatsby
はCMS
無しだと少し複雑なため工夫が必要。
私はフリーのMarkdown
エディタとして評価が高いTypora
を採用している。公式サイト
コンテンツマネジメントシステムとしての機能は持ち合わせていないがシンプルで使いやすい。
今回は更新のワークフローを解説する記事なのでエディタがTypora
でなければいけない理由はない。
別の使いやすいマークダウンエディタを使ってもらっても良いかと思う。
ここからは私の記事更新手順を紹介していく。
まずは「テンプレート」となるフォルダを作成する。
重要なのはGatsby
とは全く関係ないフォルダに作ることである。
Gatsbyのフォルダに含めてしまうとbuild
時に無駄な確認が走るのでオーバーヘッドとなる。
template.md
を用意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つ問題が有る。
特に2が面倒である。
いくつも下書きがあったとしてもCMS
があるなら問題ないが、実際に下書きからなにか一つ公開しようと思った時にいちいちdraft:true
のyaml
が記述されている記事を手検索して公開記事に落としていく必要がある。
下書きファイルが3,4件で既に管理が面倒に感じた。
かなり原始的な方法だがテンプレートフォルダを全く別の作業用フォルダでコピーしていく方法が私の中で一番手っ取り早い結果となっている。
また下書きもフォルダごとに管理しているので、Windows
のエクスプローラ上で何個の記事があるのかがわかりやすい。
ただ、それでもファイル名やyaml
部分が手書きなので無駄は存在する。
このあたりはプログラマらしくyaml
入力とファイル名生成のコードを書けばよいかもしれないが、工数を割いてツールを作る必要があるほど面倒には感じていない。手入力で十分だ。
もしより良いCMSや手法などが見つかれば報告したい。