Hugo を使った 個人サイトの作り方 2 マークダウン変換編

tech 1824字：読了まで約3分22秒

Hugo アイキャッチ画像

前回まででHugoのインストールが終わり、サイト雛形のディレクトリ構成が完成しました。とはいっても、中身がなければどうしようもありません。

この企画は私自身のサイト作成の振り返りですので、「私のサイト」をHugoを使って作り替えるのがゴールです。

Hugoでは個々の記事はmarkdown記法で書かれたテキストファイルを利用するので、50作以上ある小説HTMLファイルをすべてmarkdownファイルに変換する必要があります。大変であることは目に見えていますが、やらなくてはいけない作業です。

既存のHTMLファイルをMarkdownファイルに変換

Pandoc

HTML ＝＞ markdown 変換はブラウザ上にツールもありますが、大量になると使っていられないので、 Pandoc を利用することにします。 PandocはCLI操作のファイルの変換ツール。またコマンドラインかよ！ って感じなんですが、さすがに50くらいだとGUIよりも便利なんじゃないかな。

Powershellを起動してscoop install pandocを入力。しばらく待つと「Pandoc(2.19.2) was installed successfully！」と表示され、pandocが使えるようになりました。

これで準備ができたのでHTMLファイルをmarkdownに変換していきます。 コマンドは以下を利用しました！

pandoc [input.html] -t markdown -o [output].md --standalone

HTML文書をスタンドアローンのmarkdownに変換するというコマンドです。元のHTMLファイルは残りますので安心。しかし数が多いですから、一つずつ入力したくはありません。

標準ファイラーでのフルパス複数コピーの様子。[hugo-fullpathcopy.png(59198byte)]

まず、Windows標準ファイラで該当フォルダを開き、Shiftキーを押しつつ小説HTMLファイルを全て選択。「パスのコピー」を選びます。すると複数ファイルのパスをコピーできますので、テキストエディタにコピペし、該当のコマンドに作り替えていくという苦行を行います。「置換」を利用しましょう。短形選択ができるとなおGoodです

さて、コマンドが全て出来たらPowershellから cd コマンドでHTMLファイルのあるフォルダに移動し、上記コマンドをコピペ実行します。バッチが書ければいいんだけどちょっと怖いしわかんないｗ

変換されたmarkdownファイルは三点リーダが「……」になっていたりと行き届きませんが仕方ないと割り切り、置換で対応していきます。

え……結局置換してるんじゃん……！　と無になるのも一興。

FrontMatterの設定

pandocで変換されたmarkdown[hugo-markdown.jpg(79814byte)]

続けて、このマークダウンファイルをテキストエディタで開き、Hugo用に編集します。さきほどの細かい不備もこの時点で修正します。

ファイル冒頭のハイフン「—」で囲まれた部分が Front Matter と呼ばれ、管理用の設定などを書く部分となります。TOML形式などいろいろな記法が使えますが、Pandocの変換ではどうやらYAML形式になるようです。

このファイル群はそのままHugoで利用するため、以下のようにFrontMatterを直していきます。

Frontmatterを書き換えたmarkdown[hugo-frontmatter.jpg(219131byte)]
title
そのままページタイトルとして利用。
date
いわば作成日。記事のソート順に関わるので、入力しておく。
lastmod
最終更新日。Gitを使って自動化する方法などもある。
tags、categories、series
Hugoの機能である taxonomy を使って細かいファイル分類をしたいので設定。seriesだけは私の環境では半角英数で書かないとうまく動作しない。 カテゴリも「・」などの記号を使うとエラーになったりと、安定せず
description
コンテンツの概要。ツイッターカードなどの概要欄に利用。
images
記事に関連した画像ファイルのパスを書く。ツイッターカードなどの画像生成に利用。baseURLからの相対パスを書く。

ほかURLに利用するキーワード「slug」やURLを指定する「url」など多彩な変数が予約されています。ユーザーの必要に応じてオリジナルの設定項目を設けることもできます。私は固定ページかどうかを判断するフラグ「fixed」を入れたりしています。

ぶっちゃけここが一番時間かかるところですが、これからはラクになるんだ！ という希望的一念で細かく修正していきます。

関連記事