I.T.の
エンジニアブログ

WordPressで作ったこのブログ、地味にお金がかかる

このブログは、以前なんとなくWordPressで作ったものなのですが、いかんせんインスタンスをずっと立ち上げっぱなしなので、地味にお金がかかります。
そろそろMathQのインフラとかを見直さないといけなくなってきていて、 ついでだからブログも静的サイトに作り変えて節約しようかと思いました。
フレームワークは何にしようかと考えて、勉強がてらNext.jsを使うことにしました。

React・Next.jsの勉強に長い時間を費やす

Reactは久しく使ってないし、Next.jsに至っては使ったこともないので、 公式のチュートリアルとかを読みながら基礎を勉強しました。
まあいずれ役に立つこともあるでしょうから無駄にはならないでしょう。
もちろん読んだだけではまだ理解が不十分でしょうが、 とりあえず作りながら調べつつ身につけていきます。

とりあえず適当に作っていく

今回は静的サイトを作るので、まずSSGの設定をします。こういうタイプのフレームワークによくある機能ですね。

next.config.mjs

const nextConfig = {
  output: 'export'
};

export default nextConfig;

あと、記事用のコンポーネントを作ったら、 それを自動でルーティングとか一覧画面とかサイトマップとかに反映させるようにしたかったんですけど、 これがとても苦労しました。
結局、記事コンポーネントとかを書いてるファイルが置いてあるディレクトリにindex.jsを置いて、 まとめてexportすることにしました。

とにかく思ったより苦労した

ReactとかNext.jsの仕様にかなり苦しめられたり、 体調も悪いし仕事も忙しい中で全然やる時間ないし、思ったより大変でした。
すでにあるブログだし、静的サイトだしそんなに時間かからないだろと思っていたのですが、見当違いでした。
それでもなんとか完成させられたのでよかったです。

まとめ

次はインフラの見直し作業が待っているのでまだ気が重いですが、とにかくやっていくしかないですね。
皆さんもやらなければいけない事は早めに終わらしましょう。