CODEWITHSUNDEEP
reactjsrouteshttp-status-code-404github-pagesgithub-pages-deploy-action
Evan Denmark
Evan Denmark

Reputation: 11

Github Pages landing page with custom domain is correct, but other pages get a 404

SOLVED:

  1. Github Pages doesn't like <BrowserRouter> and it must be changed to <HashRouter>
  2. The homepage in package.json must include #

Better answer summarized here: React Router not working with Github Pages

I have successfully deployed my React project to Github Pages with a custom domain (ex www.mywebsite.com). I will have mywebsite.com be the Home page and other pages, like About, be accessible at mywebsite.com/about. While the home page works fine, the About page of that custom domain result in a 404.

I have set up everything properly on the Github side (CNAME has mywebsite.com, the package.json has the homepage set to mywebsite.com, and I've waited 24 hours after deploying to ensure it wasn't a DNS issue). This resides within the repo my-repo

What is bizarre is that - locally - everything works out fine. When I npm start and go localhost:3000, I hit the Home page and when I go to localhost:3000/about, I hit the about page.

But after deploying to the gh-pages branch, the branch publishes to username.github.io/my-repo and not automatically to mywebsite.com even though I had previously put mywebsite.com in the Custom Domain section. If I go to username.github.io/my-repo, I get a blank page - not a 404.

Then, if I put mywebsite.com in the Custom Domain field again and go to mywebsite.com, I can go to the Home page and the About page has a 404.

Something interesting I found in the Github Documentation that I found potentially relevant:

If you are able to access your landing page, but encounter broken links throughout, it is likely because you either didn't have a custom domain name before or are reverting back from having a custom domain name. In such cases, changing the routing path does not initiate a rebuild of the page. The recommended solution is to ensure that your site rebuilds automatically when adding or removing a custom domain name. This may involve configuring a commit author and modifying the custom domain name settings.

But I'm not sure what the solution is there.

To recap,

  1. Any ideas of why locally I can navigate to the About page but as soon as I deploy it to gh-pages, it 404s?
  2. Regarding that Github documentation, how could I get the site to automatically build when adding a custom domain?

Upvotes: 0

Views: 170

Answers (1)

Ayush Mhetre
Ayush Mhetre

Reputation: 157

Ideally, you should be hosting your React.js/Next.js projects using something like https://vercel.com/new Here's how & why:

  1. You login to vercel using your Github account
  2. Click on Add new -> Project
  3. Since this is your first time using Vercel, you will have to give it access to your project(s)
  4. You just click "import"
  5. And done, you are ready to deploy it.
  6. Now everytime you make a commit to main branch, vercel will redeploy your website with the recent code.

Upvotes: 0

Related Questions