~Webエンジニアブログ~

Webサイトをリニューアル(v4)しました!

# 新年あけましておめでとうございます!Masakiです 🎍🐯

この度、ついにWebサイトをリニューアルしました!以前は Vuepress というJAMStackなCMSを使用していたのですが、いくつかの致命的な問題に直面したため、全面的に作り変えることにしました。

デザイン面ではあまり変化がないように見えるかもしれませんが、一体なぜリニューアルを行ったのか、解説していきたいと思います。

# JAMStackは記事更新がしづらい

まず一つ目の理由ですが、JAMStackはDBを使わず、ローカルのファイルをアップロードする方式、つまり昔ながらのHPと似た仕組みをとっています。 ローカルで記事ファイルを作成し、それをGitにアップロードしてCIでビルドを行い、サイトにデプロイする...。これが意外と手間がかかっていました。

# ビルドに失敗した

これが一番の問題です。Node.jsのバージョンが古くなると、CIが対応しなくなってしまう。 古いバージョンでも動いてくれるPHPのようにはいかず、古いNode.jsに対応しなくなるとCIが通らなくなります。 そのため、ビルドができず記事のアップができない状況になってしまいました。

# Nuxt3 + microCMS でリプレース

ビルドができないとサイトの更新ができません。 古いシステムを直すにもソースコードの状態もあまりよくないので、思い切ってリプレースすることにしました。

# 技術選定について

WordPressはGitHub Pagesで公開できないため却下。そして、Vuepressなどのローカルで記事を作成するJAMStackも上述した理由から却下。 静的サイト + APIの形にするならヘッドレスCMSを使うのがベストだと考え、無料枠もあって導入も簡単な microCMS を採用しました。

フロントエンドには Nuxt3 を採用。Nuxt3の静的出力+APIの組み合わせは、仕事でもよく使っている技術なので開発の流れが分かっていました。

# 今回のテーマ

今回のテーマを紹介しておきます。今回で自分のHP作成は4回目になりますが、毎回新しい技術に挑戦するテーマを設定しています。

バージョン 技術テーマ デザインテーマ
1 HTML+CSSのみを使用し、デザインの基礎を習得 デザイン本を丸パクリ(敢えてアレンジをしない)
2 WebAPIをはさんだフロントエンド + バックエンドの構成 Vueを使用したちょっと動くサイト
当時苦手だった明るい配色 + 丸みあるデザイン
3 Vuepressを使用して爆速開発&リリース
ブログ形式にすることで情報発信を可能にする
キープコンセプト + スタンダードなブログデザイン

そして第4作目となる今回は...

技術テーマ:「自分が設計して人に開発してもらう」

デザインテーマ:「基本デザインはそのままに、よりビビッドな配色とわずかにシャープさをプラス」

というテーマで挑戦しました。Nuxt + APIの構成は自分の中でベストプラクティスが固まっており、デザインも前バージョンの形から大きく変更せず、設計とマネジメントの練習に重きを置きました。

結果として、自分のスキルの至らなさによる課題も発見でき、とてもいい経験となりました。開発の流れや課題については、また別の記事でご紹介したいと思います。楽しみにしていてくださいね!

これからも頑張ってブログ記事を更新していくので、是非チェックしてください!

この記事をシェア