手順！データベース付きのブログを作成し公開する(github page)【Day 98 of 100】

github page、、、そろそろ覚えるかな。

↑このURLのページの表示内容はは後日以降どんどん追加されます↑

まずは公開されているページとしてgithub pagesにアップロードしたい

その欲が強い私

スクリーンショットを拝見しました！VS CodeでReactとFirebaseのプロジェクトをしっかり構築されていますね。

ReactプロジェクトをGitHub Pagesに公開（デプロイ）するには、いくつか特別な手順が必要です。以下のステップを順番に進めていきましょう。

まずは、GitHub上に新しいリポジトリを作り、手元のコードをアップロードします。

GitHubで新しいリポジトリ（例：blog-with-react-and-firebase）を作成します。
ターミナルで以下のコマンドを順に打ちます。Bashgit add . git commit -m "Initial commit" git branch -M main git remote add origin https://github.com/あなたのユーザー名/リポジトリ名.git git push -u origin main

ReactのファイルをGitHub Pagesが読み取れる形式（静的ファイル）に変換して自動アップロードしてくれるツールを入れます。

ターミナルで以下を実行してください：

Bash

npm install gh-pages --save-dev

package.json を開き、3箇所に追記します。

homepageの追加: 一番上の "name": ... の上あたりに追加します。JSON"homepage": "https://あなたのユーザー名.github.io/リポジトリ名",
scriptsの追加: "scripts": { ... } の中に以下の2行を追加します。JSON"predeploy": "npm run build", "deploy": "gh-pages -d build",

設定が終わったら、魔法のコマンドを1つ打つだけです。

Bash

npm run deploy

ターミナルに “Published” と表示されたら成功です！

Firebase（特に認証やFirestore）を使っている場合、GitHub Pagesに公開すると以下の点に注意が必要です。

Firebaseの承認済みドメイン: Firebaseコンソールの「Authentication」→「設定」→「承認済みドメイン」に、GitHub Pagesのドメイン（あなたのユーザー名.github.io）を追加しておく必要があります。
React Routerのパス: もし react-router-dom を使っているなら、GitHub Pagesの仕様上、リロードすると404エラーになることがあります。その場合は、BrowserRouter に basename を設定する対策が必要です。JavaScript<BrowserRouter basename={process.env.PUBLIC_URL}>

これで世界中からあなたのサイトが見れるようになります。Firebaseとの連携は少し難易度が上がりますが、100日チャレンジも大詰め、頑張ってください！

AIくんは毎回聞いても嫌な顔一つせず24時間、こんな補足とともに返答してくれる

恐ろしい時代ですね、、、、

↑このURLのページの表示内容はは後日以降どんどん追加されます↑

つーことで公開し作成途中のページがこちら