将React应用部署至GitHub Pages后合并分支导致页面异常求助

Hey there, let's get your React app back up and running on GitHub Pages. The issue here is that merging your gh-pages branch (which holds the built static files of your app) into master (your source code branch) messed up the deployment flow—GitHub Pages is now trying to serve your raw source code instead of the ready-to-run app files. Here's how to fix this step by step:

Step 1: Undo the Merge to Clean Up Master #

First, let's revert the master branch to its state before the merge to avoid further confusion. If the merge was your most recent commit, run these commands in your terminal:

git checkout master
git reset --hard HEAD~1

If you need to find the exact commit before the merge, use git log to locate the commit hash, then run git reset --hard <commit-hash> (replace <commit-hash> with the actual hash from your log).

Step 2: Verify Your Deployment Setup #

Your original setup was correct: master holds your React source code, and gh-pages holds the built static files. Let's make sure your package.json is configured properly for deployment:

• Check that the homepage field matches your GitHub Pages URL exactly:

  "homepage": "https://marianapt.github.io/reduxTable/"
  

• Ensure you have the necessary deployment scripts in place (add them if they're missing):

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
  

• If you don't have the gh-pages package installed, add it as a dev dependency:

  npm install gh-pages --save-dev
  

Step 3: Re-Deploy Your App the Right Way #

Now let's push a fresh build to gh-pages (the intended branch for static deployment):

1. Make sure all your source code changes (including your new styles) are committed to master:

   git add .
   git commit -m "Update styles and prepare for deployment"
   git push origin master
   

2. Run the deployment script to build your app and push the static files to gh-pages:

   npm run deploy
   

Step 4: Double-Check GitHub Pages Settings #

Head over to your GitHub repo's Settings > Pages section:

• Confirm that the Source is set to the gh-pages branch and the root folder (not /docs).
• If it was accidentally switched to master, change it back to gh-pages and save the settings.

Wait a few minutes for GitHub Pages to process the update, then visit your app URL again—it should load correctly with your new styles applied.

内容的提问来源于stack exchange，提问作者Mariana Pérez Treviño