Gatsby とマークダウン記事の構成でブログを作っている場合, 新しい記事を書くときにマークダウンファイルを用意するのは若干手間だったりします.
例えば, このブログでは,
markdown---title: Gatsbyで技術ブログを作りました!description: Gatsby+TypeScriptで技術ブログを作りました。苦労した点などをまとめます。category: Gatsbytags:- Gatsby- Reactdate: "2020-08-30T22:40:32.169Z"thumbnail: "thumbnails/Blog.png"draft: true---技術ブログを Hugo から, Gatsyby.js に乗り換えて, リニューアルしました!...
こんな感じのマークダウンファイルから記事が作られています.
新しく記事ファイルを作ろうと思うと,
指定のディレクトリ(僕の場合はカテゴリと同名ディレクトリを準備してそこに記事ファイルを置いています)に記事ファイルを置き, 現在時刻をどこかから拾ってきて貼って, …etc みたいなことをする必要があって結構めんどくさいです.
このエントリでは, 簡単なシェルスクリプトを使ってこの辺の処理を自動化する方法について紹介します.
環境
あまり凝って作るつもりはないので, シンプルに bash
で書いて, package.json
の scripts に差し込みます. 関連するランタイムの環境を貼っておきます.
bash$ node -vv14.6.0$ yarn -v1.22.4$ bash --versionGNU bash, version 3.2.57(1)-release (x86_64-apple-darwin19)Copyright (C) 2007 Free Software Foundation, Inc.
Gatsby のディレクトリ構造は以下の通りです.
bash$ tree -I "node_modules|static|src|public".├── LICENSE├── README.md├── bin│ ├── create.sh│ └── template.md├── codegen.yml├── content│ ├── assets│ │ └── thumbnails│ │ └── Blog.png│ └── blog│ ├── Django│ │ └── xxx.md│ ├── Gatsby│ │ └── yyy.md│ └── tutorial│ └── zzz.md├── gatsby-browser.js├── gatsby-config.js├── gatsby-node.js├── package.json├── tsconfig.json├── types│ ├── declaration.d.ts│ └── graphql-types.d.ts└── yarn.lock
マークダウンテンプレートを準備する
まずは, ベースとなるマークダウンファイルを bin/template.md
に設置します.
title---title: "@TITLE"description: まだ書かれていませんcategory: "@CATEGORY"tags:- ブログ- Gatsbydate: "@DATE"thumbnail: "thumbnails/@CATEGORY.png"draft: true---
とりえあずこんな感じで, @HOGE
の部分を入力から受け取って置換してあげるイメージです.
記事ファイル作成用スクリプトの準備
bin/content.sh
に記事ファイル作成 & Frontmatter 置換用のスクリプトを書いていきます.
やることは,
bin/template.md
をコピってくる- テンプレートの一部を置換する
だけです.
title#!/bin/bashprintf "記事タイトルを入力してください >> "; read TITLEprintf "ファイル名を入力してください(sample.md) >> "; read FILENAMEprintf "カテゴリを入力してください\n"printf "既存のカテゴリは以下です\n\n"ls -r content/blog/printf "\nカテゴリ名 >> "; read DIRNAMEEXTENSION=$(echo $FILENAME | cut -f 2 -d .)if [ $EXTENSION != "md" ]; thenFILENAME=${FILENAME}".md"fi;FILEPATH="content/blog/$DIRNAME/$FILENAME"if [ ! -d content/blog/$DIRNAME ]; thenmkdir content/blog/$DIRNAMEficp bin/template.md $FILEPATHCURRENT_TIME=$(date +"%Y-%m-%dT%TZ")function replaceTemplate() {# $1 > $2 で置き換える# Example: replaceTemplate @DATE $DATEsed -i -e "s/$1/$2/g" $FILEPATH}# ReplacereplaceTemplate @TITLE $TITLEreplaceTemplate @DATE $CURRENT_TIMEreplaceTemplate @CATEGORY $DIRNAME\rm $FILEPATH-eprintf "$FILEPATHに記事ファイルを作成しました"
こんな感じの実装になってます.
package.json に指す
先程作成した bin/create.sh
に実行権限を付与してあげつつ,
bash$ chmod a+x bin/create.sh
手打ちしやすいように, package.json
の scripts に追加しておきます.
title{..."scripts": {..."post:new": "git rev-parse --show-toplevel && ./bin/create.sh"}}
これで完成です.
bash$ yarn post:new$ npm run post:new
のいずれかでスクリプトを起動できます.
使ってみる
試してみます.
パッケージマネージャは, yarn
を使っているのでそちらで.
bash$ yarn post:newyarn run v1.22.4$ git rev-parse --show-toplevel && ./bin/create.sh/path/to/blog-name記事タイトルを入力してください >> テスト記事ファイル名を入力してください >> test.mdカテゴリを入力してください既存のカテゴリは以下ですtutorial Django Gatsbyカテゴリ名 >> tutorialcontent/blog/tutorial/test.mdに記事ファイルを作成しました✨ Done in 10.85s.
記事ファイルが作成されました.
中身を見てみます.
title---title: "テスト記事"description: まだ書かれていませんcategory: "tutorial"tags:- ブログ- Gatsbydate: "2020-10-05T09:17:32Z"thumbnail: "thumbnails/tutorial.png"draft: true---
意図通りに動いているのがわかります.
てことで, 簡単ではありますが記事ファイルの自動生成についてでした.
ありがとうございました.