ブログを WordPress 👉 Octopress 👉 Hugo と変えてきて記事の書式がバラバラだったのをある程度整えた時の作業ログ 🗒️

古い記事のメンテとかはしていないんだけど、ブログのデザインを変えた時に見てみたら思ったよりも崩れていたのでまとめてある程度修正することにした。
まだ崩れてる記事とかもあるけど、ひとつひとつ見ていくのは大変なので正確さではなくざっくりなんとなくを目的として作業を行う。 💡

前提となる記事の状態

ブログの記事の書き方は以下の変遷を辿ってきた。

  • WordPress で始めた最初は HTML を直接書いていた
  • 途中から WordPress に Markdown のプラグインを入れて Markdown で書いていた
  • ブログを Octopress に変えたが WordPress の記事はインポートしなかった
  • 見出しの書き方を ## ではなく --- のように書いていた
  • 見出しレベルは h1 から h3 まで使っていた
  • ブログを Hugo に変えたタイミングで WordPress と Octopress の記事をインポートした
  • 見出しの書き方を ## にした
  • 本文での見出しレベルは h2 だけを使うようにした

という状態で時期によって記事の書き方がごちゃごちゃ。 😩

見方

  • 使用したツールは WebStorm
  • 👇 の上側が正規表現での置換対象で、下側が置換内容
  • 3 連続してるバッククオートの前にスペースが 4 つ入っているのはコードブロックで囲むためのもので、実際はスペースは不要
  • 半角スペースが 1 個だけ入っているものは中身がなにもないと表示が崩れて見づらくなってしまうのでそれを回避するためのもので、実際は空のまま置換して削除する

以下作業ログ

^(.*)$\n=+

👇

# $1\n

h1 を h2 にしてるのは見出しレベルの h2 だけ使うことにしたから。
h1 のままがいいなら # $1\n で置換すればいい。

^(.*)$\n--+

👇

# $1\n

---- を使ってたやつはリストの - があったので最低 2 個つながっていることをチェックしている。

^\* 

👇

- 

リストに使ってる * を - に統一するため。
* だけだと記事で普通に使ってるからそこそこ多く引っかかる。
行頭チェックと * の後にスペースが入ってるかチェックすることで絞り込む。
それでもひっかかるものはあるのであとは手作業で直す。

"$\n^\++$

👇

"\n+++\n
(^$\n){2,}

👇

\n

Front Matter の後に 1 行空いてたり空いてなかったりしたのを統一するため。
最初は

^\++$\n^([^t^\n])

👇

+++\n\n$1

というやり方でやってたんだけど、これだとなぜか行末のスペースが消えてしまう。
ページ内で置換した場合は消えないのに、ディレクトリ指定で一気に置換すると消える。
困る。
なので、行末にスペースがある行に少しでも触れる正規表現だとだめなのでは?という仮説のもとにそこに触れないようにやってみたら消えずに済んだ。
なので一度全部のファイルに改行を入れてから 2 行以上の空行を 1 行にすることで対応した。
最初に " とか入れてるのは上の方の +++ に引っかからないようにするため。
+++ 内はすでに一度整備していて、最後に " が来ることがわかってるからこの条件でいけた。
すぐできるだろうしついでにあそこも直すかーという気持ちで始めたのにここだけ時間かかって疲れた。
しかもそれでも結局なぜか行末のスペースが消えてるところもあったので見直して手で直した。
あと 2 行以上の空行を削除でやるとコードの中の改行が消えてだめだとわかった。
そこも手で直した。

 

👇

 
^ +$

👇

 
(^$\n){2,}

👇

\n

  を消したり空白だけの行を消したりして空行を 1 行にした。

(.*?)<.*$

👇

[$2]($1)

👇

    ```

👇

    ```

👇

>>>

👇

  \n
<.*?>

👇

 

残しておきたいタグを Markdown に有効なものに置換してから全 HTML タグを削除。
でもこれはコードの中のものや必要なリンクを消すってわかってるのでちゃんと見返す必要がある。

^ +([^ ]+)$

👇

$1

文字の前にある空白を削除。

^ +$

👇

 

空白だけの行の内容を削除。

find . -name "*.md" -type f -print0 | xargs -0 gsed -i -e '$ a korehakesutext'
korehakesutext

👇

 

全てのファイルの最後に空行を追加しようと思ったら正規表現でファイルの最後、というのが取れなかったので sed で追加することにした。
Mac の sed は POSIX sed で使いづらいらしく、 brew install gnu-sed で GNU sed を入れて使った。
空行の追加方法がわからなかったのでダミーの文字列を入れてからダミーの文字を消すことにした。
追加した後にまた 2 行以上の空行を消そう、と思ったらファイルの最後の空行 2 行になってるのは正規表現では検出できないっぽかったので、全てのファイルには追加しないで、日付が古くてファイルの最後に改行が入ってなさそうなものだけに絞って改行を追加した。
結局バラバラなままだしこれはやらなくてもよかった。

まとめ

一括で変換かけたけど見直したらうまくいってないところが思ったよりも多くて、けっこう手で直したので疲れた。 😓
記事のソースとなるデータはできるだけ構造化してある状態で保存しておきたいと思った。

おまけ

WebStorm の Markdown の設定で行末のスペースを削除する設定になっていたので不要な変更点が出たりした。
Hugo は Markdown に厳密で行末にスペース 2 つないと改行しないのでこの設定は切っておくといい。
あと、最近絵文字いいなという気分が高まってきたのでブログに絵文字を使ってみた。 ✨

Author
菅原 浩
Web プログラマー。好きな言葉は「安定的に不安定」。オーストラリアで英語を勉強した後に、現在デンマークで幸せについて考えている。
Next Post
Hugo のブログの記事の URL を変更した時のログ
Previous Post
Scala で JavaFX の Casvas の内容を画像として保存する
Recent Posts
Electron と Scala.js と scalajs-react と ScalaCSS を使ってアプリを作った時のログ
Scala で Flyway と Slick を使って codegen した時のログ
自分とは連続した情報であると定義する
本「リモートチームでうまくいく」の感想
映画「Whiplash」の感想