概要
2年前にHTMLとCSSで書いたポートフォリオをかっこいいやつにアップデートしてみたくなったので、思いつきでReactで書いてみることにした。ドメインを新たに取得するとお金がかかることが多いので、GitHubの無料枠で作りたかった。
やったこと
Step 1: ポートフォリオ作成
judygabさんの動画とソースコードを見ながら、見よう見まねで自分のポートフォリオを作成し、気が済むまでカスタムした。過去に何度かソースコードを間違えて消すことがあったので、ポートフォリオの編集作業はportfolio-draftのリポジトリで行った。
Step 2: デプロイの準備
デプロイ用にportfolio-devのリポジトリ（Reactアプリ）を作成する。
参考にした記事を元に、とりあえず空のプロジェクトをデプロイして、動作確認を行う。
課金せずにGitHub Pagesを使用するには、デプロイする予定のリポジトリ（ここではportfolio-devをpublicにする必要がある）
Step 3: ポートフォリオをデプロイ
portfolio-draftの中身をportfolio-devにコピペして、それぞれのリポジトリに存在するpackage.jsonをChatGPTにお願いして、いい感じに統合してもらう。
あとはこれらのコマンドを叩く（これが正解かどうかはわからないが、とりあえず動いた）
$ cd portfolio-dev
$ npm run build
$ npm run deploy
苦労
-
参考にしたソースコードが3年前のものなので、Reactの構文が変わったりしてWarningが出ることがよくあった。React初学者なのでとても困惑した。
-
リポジトリを公開しないとGitHub Pagesを無料枠で使うことができない、ということを知らなかったので、必要以上にあれこれ調べるハメになった。（表示されている文章をちゃんと読めばよかった）
-
GitHub Actionsも使ってみたかったが、何が何だかよくわからなかったので、今回は断念した。
参考文献
- ポートフォリオの参考
- デプロイ時の参考