💻
Next.js + Mantine + GitHub Pages でポートフォリオサイトを作った
以前から作ってはいたんですが最近 1 から作り直しました。
正直これといって特筆するようなことは何もないんですがせっかく作ったので紹介です。
リポジトリ
作った理由
名刺代わりです。
自己紹介するときにスキルセットや成果物などを毎回話すのは面倒臭い手間なので、「URL ひとつ渡せば大体わかる」みたいなページが欲しかったというのが理由です。
そのようなニーズを満たすためのサービスは色々ありますが、せっかくなので自分で好きなようにカスタマイズできるものを作ろうかなと思った次第です。
あと自分の年齢とか経歴とか結構忘れるので、そういうときにパッと見て確認できるので便利です。
利用技術など
フロントエンド
Next.js + TypeScript で実装しています。
ごく普通の Next.js アプリケーションです。
UI フレームワークには Mantine を採用しています。
普段は Material UI を使うことが多いのですが、以下の記事をきっかけに Mantine のことを知ってからずっと気になっていたので使ってみました。
とても良い感じでした。
ホスティング
Next.js の Static HTML Export でビルドしたファイルを GitHub Pages にデプロイしています。
デプロイには GitHub Actions 上で GitHub Pages action を使用しています。
GitHub Pages へのデプロイの方法としては Custom GitHub Actions Workflow を使用するという選択肢もありますが、一度使ってみたらあっという間に GitHub Actions の Storage の容量を使い切ってしまったのでやめました。
まとめ
さっくり作ってさっくり公開できたので便利。
Discussion