Wordpress から Next.js へ移行しました

結構たいへんだったけど面白かった。

理由

お金です。XServer で Wordpress を動かしていたのですが、サーバ代が稼げないので SSG なサイトに移行することにしました。

当初は SSG で作った HTML たちを AWS S3 + CloudFront 構成にして、0 円サーバの出来上がり！ を目指していました。

結局 Netlify にデプロイしました

作っていくいくうちに以下のことがわかり、Netlify にデプロイして SSR にしました。

• Next/Image が SSG に対応していない
• S3 だとパスを lambda@Edge などを使って書き換えるなどひと手間必要
• vercel だと Adsense や過度なアフィリエイトができない

Netlify でも無料プランの範囲で運用できたので採用です。

やったこと

まずは Wordpress からエクスポート

wordpress-export-to-markdown を使って markdown 形式で出力しました。

出力する際は、記事ごとにディレクトリを作成する（デフォルト設定）のだと .md と同じところに画像ファイルが出来てしまいます。 Next.js の場合は画像は /public に配置することで / でアクセスできるようになります。.md は /contens に置くので同じ階層に markdown と画像があると不便だったので分けました。

https://github.com/lonekorean/wordpress-export-to-markdown

Next.js のチュートリアルをやる

チュートリアルが Markdown でサイトを作ることなので React 知らない状態でも必要な知識を一通り得られました。

チュートリアルから変更したこと

チュートリアルをベースにカスタマイズしていきました。細かいところを除くとだいたい以下のとおりです。

• TypeScript 化
• Chakra UI の導入
• MD パーサを next-mdx-remote に変更
• カテゴリ機能の追加
• Google Analitics / Adsense の導入
• sitemap の導入

執筆環境を整える

プライベートのメモをすべて Obsidian に統一していたので、ブログの執筆環境も Obsidian に設定していきました。

画像パスの読み込みが実際のファイルパスとリンクの書き方（/public がない）が違うのでそこが欠点なので改善していきたい。

作っていく中で思ったこと

普段はプログラムを書かない素人なのでプロから見たら色々違うんだろうけど、、、

次は Material UI で作りたい

今回は最初に参考にした記事が Chakra UI を導入していたのでそのまま導入しました。

個人的には CSS in JS の書き方は好きで React のコンポーネント分割していく書き方とマッチしていると思いましたが、Chakra UI は手っ取り早くきれいなコンポーネントを作りたい人にはめんどうだと感じました。

Bootstrap みたいにデフォルトのボタンとかそういうのがたくさんあるのがほしい、、、ということで次は Material UI を調べて検討しようと思います。

Markdown 中の画像／リンク変換がめんどい

Markdown 中の画像を next/image に変換したりするのがとにかく大変だった。

当初は unified を使って変換したかったのですがなかなかうまくいかず、next-mdx-remote を使って Img -> Image 変換しました。 （MDX は採用していないけど MD でもパースする際にマッピングができるので）

Markdown でブログを作る、ということに対してはまだ発展途上だと感じました。ド素人にはなかなかきびしい。

Zenn が綺麗

リメイクを機に CSS 周りも見直していきましたが、やっぱり Zenn の記事は文字が読みやすいのでいろいろ参考にしました。

Wordpress のときも SANGO という Zenn を作った catnose さんの有料テーマを使っていました。サルワカもよく読んでいたのでこの人のセンスが好きなのかもしれない。

Zenn は Markdown パーサと CSS を公開しているので手っ取り早く作るときは、次はそのまま使おうと思う。

React を知らなくてもなんとかなった

Next.js のチュートリアルはやりましたが、React は何もやらずにはじめました。 ある程度の形にはなったのである程度はなんとかなったのかなと思います。

ただきれいな書き方が全然できていないのだろうから、React のチュートリアルはやって Next.js との関係をちゃんと理解したいと思いました。

さいごに

ちなみに Wordpress 特有の書き方をしているところは Export しても崩れちゃうので、コロナワクチンの副反応で頭がぼーっとしているときに一つ一つ書き直しました。

記事数が少ないからできる荒業ですが、記事数が多かったら相当しんどいですね。 これからは Markdown に統一できたので環境依存もなくなって嬉しい限りです。

このブログのコードです。

https://github.com/potof/blog-nextjs