2025年05月02日
2021年に作った自分のポートフォリオサイトを11ty + Newtで作り直してみました。
デザインはそのままで、運用の手間減らすために管理体制を変えました。
今回の移行の理由や更新したところをまとめていきます。
これまで運用していたサイトは、PHPで動くヘッドレスCMS「Cockpit」が、仕事で使えそうか試したくて、
当時静的サイトを作るときにメインで使っていた静的サイトジェネレーターの11tyで作成したものでした。
そんなに複雑なことをやっていないので、たまに制作実績などを更新しながら問題なく使っていました。
Cockpitの新しいバージョンが出ているのは知っていたのですが、複雑なことやってないし、とりあえずそのままで良いかなと思っていたら、脆弱性が見つかって対処しないといけないなと思ってました。
JVN#23-003603 Cockpit における複数の脆弱性
ただ、他の仕事もある関係で後回しになっていたのですが、埋め込みのフォームで使っていたHyperFormの無料プランの上限（ 累計100件までの問い合わせ）が近づいてきたと通知が来たので、合わせてリニューアルすることにしました。
最初は、ヘッドレスCMSの乗り換えではなく、Cockpitのアップデートを予定していました。
ただ、使っていたCockpitのバージョンが、v0.12.2と古いバージョンかったので、（2025/05/01現在は、v2.11.3）公式のフォーラムに載っていた方法では更新できず、Cockpitが公式ドキュメントはそこそこあるもののネット上にあまり情報がなくそこで、詰まってしまいました。
そんなにデータがたくさんあったわけではないので、新しいver.のCockpitを入れ直して手作業で引っ越ししてもよかったのですが、またこういうことがあり得ると思うと自分のサイトはともかくお客さんの案件で使うのは悩ましいなと思い、サーバーのお世話が必要ないSaaSへの乗り換えを考えました。
ヘッドレスCMSのSaaSも一昔前に比べるといろいろ選択肢が増えてきたのですが、仕事でも使うかもと思うと日本語対応している日本発のサービスがいいなと思い、microCMSかNewtが候補でした。
microCMSは、以前仕事でも使ったことがあり、今回も先に試したのですが、既存のサイトのAPI数が、
のAPI4個使っており、フリープランだとAPI3個までだったmicroCMSだとつくりを変えないといけませんでした。
また、Newtは気になっていたのですが、今まで触れてなかったので、この機会に触ろうと思い選択しました。
（2025年5月3日追記）
microCMSは、6月から無料プランのAPI数が3→5になるとのことで、今後案件で同じ構成になる場合は、microCMSでも良さそうです。
【重要】料金プランの価格改定／統合のお知らせ（microCMS公式サイト）
今のサイトは、HyperFormというformタグのaction属性にURLをセットするだけで使えるサービスを使っていました。
フリープランでも、
など、基本的な機能はあり、今回引っかかった累計100件までのお問い合わせという制限こそありますが、そんなに高くないし、有料プランもありかなと思っていました。
ただ、調べてみるとSSGformという似たサービスが、月間100フォーム送信という制限がHyperFormより緩い無料プランがあり、こちらも仕事で使う前に自分のサイトで試してみるかということで、採用しました。
また、セキュリティ対策としてreCAPTCHA対応だったので、reCAPTCHA v3を採用しました。
Jamstackを実現させるためには、NetlifyやVercelのようなプッシュするだけで公開できる環境もあります。
ただ、仕事だと英語のサイトを敬遠されたり、すでに契約したレンタルサーバーがあったりします。
なので、既存サイトはエックスサーバーにGitHub Actionsで、
の場合にビルド、デプロイするように設定していました。
昨年、エックスサーバーからもXserver Staticという静的サイトのホスティングサービスがリリースされました。
それなら日本語のサイトだしありだなぁと思っていたのですが、結局FTPへGitHub Actionsを使ってビルド、デプロイするという手順は変わらなそうなので、今後の新規のサイトではありかもしれませんが、メールなど他の設定をあるので、引き続き、エックスサーバーを使うことにしました。
差し替えればうまく動くかなと思っていたのですが、最新のNode.jsだとビルドがこけてしまいました。
当時実装したNode.jsであれば動くには動いたのですが、なんか不安定だったので、npmのパッケージも入れ替えて最新バージョンに更新しました。
3、4年でフロントエンドの開発環境もトレンドが変わってるんだなぁと改めて思いましたが、いい機会だったのでキャッチアップ出来て結果オーライでした。
デザインの変更や11tyからNext.jsやAstroも試したいなぁという気持ちもありつつ、とりあえず公開するのが大事かなと思って、公開しました。
今のデザインも気に入っているので、これを機にブログ記事の更新を再開したり、制作実績ももう少し充実させたりしつつ、また新しいポートフォリオサイトもそのうちやりたいなと思ってます。
見た目は大きく変わってないですが、裏側は刷新という感じです。
ずっと世間でも言われてますが、フロントエンドの移り変わりは早いなと改めて思いました。
また、セルフホストできるPHPで動くCockpitは、いまだに魅力的な選択肢だとは思っていますが、公式以外の情報が少ないのがつらいのと良く仕事でも使っているWordPressはアップデートなどの便利な機能がパッケージ化されていて改めて完成度の高さを感じました。
また、今回使った技術についても折角なので、別記事にしていこうかなと思っています。