ブログのデザインリニューアルしました！

2022年1月9日2022年2月28日

明けましておめでとうございます。2022年になりましたね。

昨年から企画して進めていたブログのリニューアルをこの度無事リリースできました！

そこで今回はブログのリニューアルについて紹介します。

技術スタック

フロントエンド：Next.js(React)　TypeScript
ブログ機能 – サーバーサイド：WordPress (Rest API、PHP8 JIT)
サーバー：Firebase Hosting(フロント)、レンタルサーバー(WordPress)

デザイン

元のブログではLuxeritasという無料テーマを使っていました。特にデザインは変えていないので白基調でとてもシンプルな感じでした。ブログ開設のときからデザインに凝っているといつまで経ってもブログが書けないので始めはとりあえず記事がちゃんと表示できれば何でも良いといった感じでこちらで進めていました。

記事も増えてきた段階でそろそろデザインちゃんとするか！ということで昨年の12月あたりからリニューアルを企画しました。

そして、リニューアルしたデザインは更にシンプルな感じになりました。

色んな会社や個人の方のエンジニアブログを参考にさせていただき、この形になりました。

デザインツールにはAdobe XDを用いてデザインしました。

ちなみにロゴはCLIP STUDIO PAINTというイラスト制作ツールで手書きしました。

味が出てて気に入っています(笑)

Next.js × WordPress

元々ブログ自体はWordPressで作っていたので、そのままにしたいと思っていました。ただ単にコーディングするだけではエンジニアとしてつまらないなということで普段使っていない新しい技術を使おう！と思い、Reactを検討しました。SEOなども考慮し、サーバーサイドレンダリング(SSR)ができるReactのWebフレームワークであるNext.jsを採用しました。まぁこのくらいのサイトならSEOへの影響なんてあまりないと思いますが、とにかくNextやりたかったんです！(開き直り)。
ただ最終的にはSSRではなく静的サイトジェネレーター(SSG)という形になり、デプロイ段階でBuildして静的ページを生成する形になりました（Firebase Cloud Functionsが従量課金プラン専用になっていたため）。。

【参考】Client Side Rendering（SPA）・SSR・SSG を整理してみた

Next.js自体は２年ぶりくらいで過去２つくらいサイトは作ったことがありましたが、もうすっかり記憶にはなくなっていたので１から調べつつやりました。また、今回初挑戦のTypeScriptを導入しました。
正直始めはどこがNext.jsでどこがTypeScriptなのか見分けがつかず「TypeScript導入して失敗したなー」と思ったのですが、頑張って型宣言書いているうちに少し慣れてきたので今ではいい経験に思えます。

そしてこのNext.jsをどのようにWordPressに組み込もうか悩んでいたら、なんとWordPressの記事情報はAPIで取れる仕組みがあることを知り、サーバーは分けてAPI連携でやろう！と決まりました。

【参考】WordPres Rest APIについて

サーバー

サーバーもこれまた過去に触ったことがあったFirebaseというGoogleのバックエンドサービスがあるのでこちらを採用しました。Firebase Hostingというサービスを使えば基本無料で静的サイトのホスティングが可能です。更に独自ドメインの設定もできるため、DNSを設定すれば既存のドメインをそのまま使うことができます。

思えば３年ほど前、まだ0→1でサイトを作り始めた頃はサーバーやドメインがどうなっているのか全くわかりませんでしたが、今ではサーバーにネームサーバー、DNSなどのインフラ周りもイメージができるようになって成長を実感しています。。

そんな昔話はいいとして、Firebaseにするとさらに良い点が、なんといってもGithubとの連携です。Firebaseで簡単な設定をするだけでGithubのmainブランチにプッシュするだけでGithub ActionsというCI / CD機能が走って自動ビルドテスト及びデプロイが実行されます。そう、わざわざFTPでサーバーにファイルを上げる必要も無ければCI/CD設定すら自動化してくれるのです！Firebaseなんと素晴らしい。

製作時TypeScriptがよくわからずエラーを放置していた報いがここで来ました。Github様のおかげさまでTypeScriptも理解できてきました(笑)