hugoのブログをzennに移行する
概要
hugoで運用していた技術ブログをzennに移行したので、その際の手順メモです。
事前準備
以下を参考にzenn連携用のリポジトリ準備とCLI設定を行ないnpx zenn initまで実施しておく。
ファイル移設
まずはhugoのファイルをそのままzennリポジトリへ移していく。
記事ファイル(Markdown)
init時に生成されているarticlesディレクトリ内に格納する。
画像ファイル
articlesと同じ階層にimagesディレクトリを作成し、そこは格納する。
※images以外でも大丈夫かもしれないが、本記事ではimagesに格納した前提での手順とする。
ファイル名変更
記事Markdownのファイル名(slugというらしい)は以下の規則に則っていなければならない。
元ファイルが反しているようであれば変更する。
半角英小文字（a-z）、半角数字（0-9）、ハイフン（-）、アンダースコア（_）の12〜50字の組み合わせ
ヘッダ情報修正
以下の記事のヘッダ情報は修正が必要となる。
VSCodeなどの一括置換機能を使うと楽に置換できる。
- summary
- 不要なので削除する
- tags
- topics という名前にする
- date
- published_at という名前にする
- draft
-
draft: falseをpublished: trueにする
-
また、以下のヘッダ情報を追加する
- emoji
- 記事に絵文字が付与できるらしいので、何か適当に付与する
- 例:
emoji: "⚙️"
- type
- 記事の区分を入れる。技術ブログならtechで良さそう
- 例
type: "tech"
本文修正
HTMLタグを直書きしている場合はzennでは使えないので書き換えが必要となる。
こちらもVSCodeなどの一括置換機能を使うと楽に置換できる。
画像
 の形式で記載する。
サイズ指定したい場合は後に =○xと入れれば幅をピクセル指定できるらしい。
ALT指定する場合は以下のように記載する。
リンク
[アンカーテキスト](リンクのURL) の形式で記載する。
[サンプルだよ](https://example.com/)
プレビュー確認
諸々準備ができたら、以下npx zenn previewコマンドでプレビューが見れます。
エラーが出てないかや想定外の表示になっていないかチェックします。
$ npx zenn preview
👀 Preview: http://localhost:8000
上記表示されたらWEBブラウザで上記のlocalhostのURLを開けば確認できます。
gitリポジトリへのプッシュ
反映できる状態になったらMarkdownファイルや画像ファイルをコミットしてプッシュします。
やり方が悪かったのかもしれませんが、１プッシュにつき30件ずつしか反映されないようでした。
記事が30件より多い場合は何回もプッシュすれば全記事反映できます。
※プッシュ時に修正する記事はどれでも良い。
Discussion