自分のWebサイトを作るとき参考になった記事を紹介する。
ReactをGitHub Pagesにデプロイしよう〜Vite編〜
WebサイトはViteで作っていたので、デプロイの際にはこの記事が参考になった。ただし、この記事そのままではyarn git実行時にコミットメッセージがないためコミットされなかった。git commitにgit commit -m "commit message"と書き足してあげると正常に動作する。
GitHub Pages で React Router を使った SPA サイトを動かす方法
React RouterはGitHub Pagesでは正常に動作せず、ルート以外のページで再読み込みすると404エラーが生じるが、カスタムした404.htmlを設定してあげるとエラー時にそれが表示される。これを利用して、カスタムした404.htmlを用意しindex.htmlに誘導、そこから各ページにさらに誘導するという流れでReact Routerを擬似的に機能させることができる。詳細な解説は上の記事を参照していただきたい。
404.htmlを追加する際に注意することとして、デフォルトの設定ではindex.htmlしかビルドファイルに含まれないということがある。以下の記事のように設定すると404.htmlもビルドファイルに含んでくれる。
JavaScriptを使ってハンバーガーメニューを作る方法を解説【サンプルファイル付】
ハンバーガーメニューを作る際参考になった。CSSには苦手意識があるため、かなり助かった。この記事では幅が大きい際ヘッダーにリンクを記載するというレスポンシブデザインを採用しているが、私が作ったWebページでは、今後リンクの数が増えることも鑑みてレスポンシブデザインを採用しなかった。
おわりに
以上がWebサイトを作る際に役に立った記事である。特に最初2つの記事は、Reactを使ってホームページを作りたい人にとってはとても役に立つものだと思うのでぜひおすすめしたい。