CODEWITHSUNDEEP
htmlreactjsgithubgithub-pages
J R
J R

Reputation: 95

Github pages shows blank page

My repo: https://github.com/something/personal_website My website: https://website.com/

I can not figure out why my GitHub pages can’t load any of my source files. The files I want to load are in the src folder. Everything works as it should on localhost. It only loads index.html which is a white blank screen, I don't have anything coded in this file. I’ve seen a few similar posts about this issue but have not found any common discrepancies.

I have installed through npm the gh-pages module and done “npm run deploy”; this created my gh-pages branch. I’ve updated my package.json with the appropriate information. As far as I can tell I have no capital letters in my repository.

I hosted another website previously on Github Pages at this domain with no issues. It appears that Github pages and the process has changed since then and I can’t get it to work.

Upvotes: 6

Views: 20530

Answers (6)

Yusuf Syam
Yusuf Syam

Reputation: 771

In my case i just changed <BrowserRouter/> with <HashRouter/> if you use one.

Upvotes: 0

Kayphaz007
Kayphaz007

Reputation: 21

Most of the Answers, solves the problem for create-react-app. when using vite, you have to set the correct base in vite.config.js as below. Also note in vite, you don't need the "homepage" key in "package.json" file

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: "/<REPO_NAME>/",
})

for more info, please refrence gh-pages configuration for vite

Upvotes: 2

Robbie JW
Robbie JW

Reputation: 739

The problem is that your homepage is trying to load assets from https://something.com/personal_website/static/js/main.3edbf089.chunk.js rather than https://something.com/static/js/main.3edbf089.chunk.js.

Remove the personal_website extension from homepage in package.json and the routes should work properly.

Therefore your new package.json should look like:

{
  "homepage" : "https://something.github.io/",
  "name": "my-website",
  "version": "0.1.0",
  ...

Upvotes: 15

RecepU
RecepU

Reputation: 21

I've been stuck to this for two days. And finally, I solved it.

It is working to local but after deployment it is opening the blank page.

Problem is we changed the homepage path. So We need to update paths which are in our code.

If I give an example with my case, I added homepage into the "package.json" file something like:

"homepage": "https://[YourGitHubAccountName].github.io/[YourProjectName]"

So after adding this, app doesn't work because The paths which are inside of my code need to be change.

For example:

'/' paths should become '/[YourProjectName]' or

'/test' should become '/[YourProjectName]/test'

Upvotes: 2

Michał Skwara
Michał Skwara

Reputation: 71

  1. Make sure that your package.json contains

    "homepage": "https://username.github.io/appname"

  2. If you are using BrowserRouter, set the basename:

    <BrowserRouter basename={process.env.PUBLIC_URL}>

  3. Your .env file cannot contain something like PUBLIC_URL=/ when you do a deploy (it was the problem in my case)

Upvotes: 5

Sanjeeb
Sanjeeb

Reputation: 61

Adding "homepage": "https://myusername.github.io/my-app", to your Package.JSON might solve your problem.

remember replace your github user name and your app name.

Upvotes: 2

Related Questions