概要

シス研のサイトを制作しました！

リポジトリ

SystemEngineeringTeam/set-web-2023

技術スタック

• フロント
  • Next 14.0 (App Router)
  • Panda CSS
• ホスティングサービス
  • GitHub Pages
• CI/CDサービス
  • GitHub Actions
• CMS
  • esa.io

詳細

あるとき言われました。

mkn先輩「welcome.sysken.net を作り直してくれない？HUGOとかで簡単にでいいからさ」
僕「いいですよ」

このサイトを制作し始めたきっかけは多分これでした。
今までは Googleサイト とか言うものを使っていたらしいです。入学前にこれを見た僕は味気の無さを感じました。なんというかこのサイト息してる？一度作って放置したみたいな...
こうして僕は制作を開始しました。

実はこの計画2度目でその時はデザイナーが居たりしました。しかし僕は作りたいサイトを作る人。デザインから自分で考えることにしました。
といいつつもデザインでこだわったポイントはありません。
強いて言うなら Web API を使いたいばかりに付けたMacのメニューバー風ヘッダー。細くねと何度も言われたが貫き通しました。

このサイトでは最近(2023年11月時点)で最新の Next 14( App Router) を使用し、SSGとして運用しています。SSGとしたのは頻繁に更新されるわけでもなく、Vercel等だけでなくとも簡単にデプロイできるためです。

このサイトのポイントはコンテンツのほとんどをesaから管理できる点です。投稿や制作物の追加はもちろん、各ページの内容、ナビゲーションバーの並び順、そしてページの追加・削除まで行えます。
逆にできないことはトップページの画像とフッターのシスキャットくらいです。これによりwebフロントが出来ない人でも管理することができます。

そしてこのサイトを制作する上で欠かせない信念があります。
「個人の管理下に置くのは許されない」
esaをCMSとしていますが、Markdownファイルはもちろん、 esaにアップロードされた画像も全てダウンロードしGitHubで管理するようにしています。これによりシス研の歴史が失われることなく、リポジトリがある限り残り続けるようになります。シス研にオンプレサーバがあるのに GitHub Pages を使用したのはこの意図によるものです。

ここでひとつ問題がありました。
esaに画像をアップロードした場合、esa上で保存されておりGitHubに追加されたマークダウンにはesaのURLが貼られているだけです。更には自分のサイト用に書いた記事をコピペする輩もいました。
これではその人の気分次第でドメインを変えたり削除した場合には画像が見つからなくなってしまいます。
そこで私はビルド前にマークダウンを走査し、画像を見つけた場合には全てリポジトリに追加するようにしました。これにより画像等を個人の管理の下から解放することに成功しました。

こうしてこのサイトはLighthouseというwebサイトの質を測定するツールを使用したところ、とても高い評価を得られました。パフォーマンスが低い原因は投稿に画像を投げる部員のせいが9割なので諦めます。ユーザー補助はaタグのコントラストのせい。面倒。

ついにはGoogleで「シス研」と検索すると2番目、「システム工学研究会」では1番目に表示されるようになりました！！

感想

このサイトを制作する前にも同じレイアウトのものを PagesRouter で作っていたりしました。しかしアーキテクチャやコンポーネントの分け方、ブランチの運用方法などが気に入らず１から作り直しました。
SSG は AppRouter の特長である SSR を殺してしまうため相性が悪いと思っていました。しかし実際に全く同じサイトを両方で作ってみたところ圧倒的に AppRouterの方が良かったです。
やはり物は試してみると良いと実感でき、自分の満足いく開発ができて嬉しいです。

気が向いたら技術的なことも書きたいと思います。では 🐧ノ

投稿者

佐藤 さとる