Gatsby で書いていた Markdown ファイルを Astro に合わせる

heroimage

ここで書いていることはあくまで自分専用のものです。

AstroではGatsbyJSと比べてMarkdownファイルから見た画像の相対パスが違っていたり、Markdownファイルごとにlayoutファイルの指定が必要などの相違点がある。 そのためMarkdownファイルのfrontmatter書き換えが必須となる。

注意点として 以下の方法では改行コードが LF であるファイルのみが対象になる。

frontmatter の例

ここで扱うMarkdownはfrontmatter先頭がtitleになっていること前提です。

---
title: ブログタイトル
date: "2022-12-12"
featured: ./img/res.jpg

フォルダ内の markdown ファイルの frontmatter の先頭行に layout をいれる

pcregrep は標準でインストールされていないのでインストールする

Terminal window
sudo apt install pcregrep

カレントディレクトリ内のすべてのファイルを置き換え対象かどうか検索し、 対象が変換された場合は置き換え後に。bakファイルを生成する。

pcregrep のオプション

-M 複数行対象検索
-l 検索該当ファイルをリスト表示

sed のオプション

GNU版sedでのみ可能。Linuxではデフォルトで入っているので大丈夫。

-z 複数行対象

layouts を title の上に挿入する

Terminal window
pcregrep -M -l "^\-\-\-\ntitle" ./* | xargs sed -z -i.bak -e "s/^---\ntitle/---\nlayout: \"..\/..\/layouts\/BlogPost.astro\"\ntitle/g"

GatsbyではMarkdownファイルのあるディレクトリからサブディレクトリやカレントディレクトリにある画像が読み出せたがAstroは基本publicフォルダにアクセスしてしまうためパスを書き換える必要がある。

コマンド

Terminal window
pcregrep -l "^featured: \." ./* | xargs sed -i.bak -e "s/featured: \./featured: /g"

最後に

正常に書き換えがされたならば .bak ファイルを削除する。