使用Travis CI部署CRA到GitHub Pages遇两类问题求助

Hey there, let's break down and solve the two issues you're hitting when deploying your create-react-app to GitHub Pages (with a custom domain) via Travis CI:

Issue 1: Page only displays README.md #

This usually happens because GitHub Pages is prioritizing the README file over your app's built assets. Here's how to fix it:

• First, head to your GitHub repo's Settings > Pages section. Double-check that the "Source" is set to the gh-pages branch (this is where Travis should be pushing your build files) and that the directory is set to /root (not /docs or another subfolder).
• Verify your Travis CI deployment script is correctly pushing the build folder to the gh-pages branch. Your script should include a command like gh-pages -d build (make sure you've installed the gh-pages package as a dev dependency in your project).
• If you're using a custom domain, ensure you've added a CNAME file in your public folder (create-react-app will copy this to the build folder during compilation) with your domain name—this ensures GitHub Pages recognizes your custom domain correctly.

Issue 2: Blank page due to react-router misconfiguration #

The blank page happens because react-router doesn't account for the GitHub Pages project prefix (/ollidia-front-end) in your URLs. The solution you referenced addresses this perfectly—here's the core steps to implement it:

1. Set the homepage in package.json: Add this line to your package.json file:

   "homepage": "https://jaanhio.github.io/ollidia-front-end"
   

   This tells create-react-app to prefix all asset paths with your project's GitHub Pages URL, so resources load correctly.
2. Configure react-router for the project prefix:
   • If you're using BrowserRouter, update it to include the basename prop, which adds your project path to all routes:

     import { BrowserRouter } from 'react-router-dom';
     
     <BrowserRouter basename="/ollidia-front-end">
       {/* Your routes go here */}
     </BrowserRouter>
     

     With this setup, you can keep your route paths as normal (e.g., <Route path="/about" component={About} />—the basename will automatically prepend /ollidia-front-end to the URL).
   • Alternatively, if you want to avoid dealing with server-side routing limitations, switch to HashRouter instead. It uses URL hashes (like https://jaanhio.github.io/ollidia-front-end/#/about) which GitHub Pages handles seamlessly without extra configuration.
3. Handle 404s (if using BrowserRouter): GitHub Pages doesn't natively support client-side routing, so if someone refreshes a page like /ollidia-front-end/about, it'll throw a 404. To fix this, create a 404.html file in your public folder that's identical to your index.html—GitHub Pages will redirect all 404s to this file, and react-router will take over from there.

Give these steps a try—they should resolve both your issues. Let me know if you run into any hiccups along the way!

内容的提问来源于stack exchange，提问作者jaanhio