高専３年生がポートフォリオサイトを作って公開した話

ポートフォリオサイト を作って公開したので、少しまとめておこうと思います。今回作成したページのリポジトリは下のやつです。
リポジトリ

使用技術

今回作成したサイトですがNext.jsとdaisyUIを使って作成しています。そこから、Vercelを使って公開しています。

フレームワークとUIライブラリ

1. Next.js
   Reactベースのフロントエンドフレームワークです。今回はTypeScriptを使って実装しました。
2. tailwindcss
   CSSフレームワークです。正直CSSを自分で組まずに用意されているクラスを適用するだけでよかったからすごく助かった。
3. daisyUI
   tailwindcssを拡張したUIフレームワークでdivタグなどにCSSを適用するだけでそれっぽいUIができます。これを適用するだけでモダンなUIを組むことができたのでかなり助かりました。

デプロイ環境

• Vercel
  Next.js公式のデプロイ先です。VercelとGitHubを連携し、mainブランチにマージされたときに自動でデプロイしてくれるのがとても便利なので、少しづつ機能を追加していくスタイルで開発をしている僕にはぴったりのサービスでした。

それ以外

• GitとGitHub
  • 必須スキル。今回はGitFlowを簡略化したブランチ運用で開発を行いました。mainブランチからdevelopブランチを切りさらにそこから目的別にブランチを切って作業をしていました。そしてある程度の開発が完了した時点でdevelopブランチにマージしテスト環境に問題なくデプロイできた時はそのままmainブランチにPRを出してデプロイしています。
• mainブランチへのマージはPullRequestを通して行いそれ以外はローカルで行いました。そのうちどちらかに統一したいと思ってます。
• VSCode
  • 万能エディタ。以上
• gitmoji
  • コミットメッセージに絵文字をつけることができるツールです。コミットメッセージを一目見てどんな変更をしたのかがわかるのでおすすめです。
• Notion
  • タスク管理などはこれで行っていました。やっぱり便利です。

最後まで読んでいただきありがとうございました。もし、誰かの参考になったならばよかったです。

各種リンク等

Next.js
tailwindcss
daisyUI
Vercel
gitmoji