ポートフォリオサイト V1

概要

Reactで動作する"CSR"ポートフォリオサイト

主要機能

• MDによるコンテンツ管理システム
• CI・CDによる"Github Pages"自動デプロイ

使用技術

フロントエンド

• React
• TypeScript
• Tailwind CSS

インフラ

• Github Pages
• GitHub Actions

設計・実装で工夫した点

コンテンツ管理システムの仕組み

システム用と別にcontentsブランチを作成。
デプロイされたページでは、プロジェクト一覧やブログなどの情報をcontentsブランチから取得し、クライアントがブランチをもとに動的にコンテンツを生成することで実装。
コンテンツの一覧などはjsonで管理。
サーバーレスかつ無料で済ませれてとても満足。

自動デプロイ

developからmainへマージされた際に自動でデプロイが動くようにCIを作成。 developへのプッシュではLintを走らせる。

今後の改善点

とても考えられており、安価な運用が可能であったが、物足りない。 V2へ移行した。