Why is my GitHub pages website displaying a blank page when deployed?

Question

I am hosting a React app on github pages. Currently, the page is blank and no data is displaying and I am getting these errors in the console. If I run the project locally, there are no issues, it is only the deployed version that is having issues:

/%PUBLIC_URL%/manifest.json:1 Failed to load resource: the server responded with a status of 400 () /%PUBLIC_URL%/manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

Here is my project structure:

├── CNAME
├── index.html  
├── package-lock.json
├── package.json  
├── postcss.config.js
├── public
│   ├── CNAME  
│   ├── favicon.ico  
│   ├── index.html  
│   ├── manifest.json
│   └── robots.txt  
├── src
│   ├── App.js  
│   ├── assets
│   │   ├── C++.png
│   │   ├── StreetAssist.png
│   │   ├── WHDparser.PNG
│   │   ├── angular.png
│   │   ├── aws.png
│   │   ├── bereaCollege.jpg
│   │   ├── bootstrap.png
│   │   ├── css.png
│   │   ├── ecoB4C.jpg
│   │   ├── flask.png
│   │   ├── git.png
│   │   ├── github.png
│   │   ├── golang.png
│   │   ├── html.png
│   │   ├── javascript.png
│   │   ├── logo.png
│   │   ├── mold.png
│   │   ├── mysql.png
│   │   ├── powershell.png
│   │   ├── python.png
│   │   ├── react.png
│   │   ├── reactPortfolio.PNG
│   │   ├── sqlite.png
│   │   └── tailwind.png
│   ├── components
│   │   ├── About.jsx
│   │   ├── Contact.jsx
│   │   ├── Experience.jsx
│   │   ├── Home.jsx
│   │   ├── Navbar.jsx
│   │   ├── Skills.jsx
│   │   └── Work.jsx
│   ├── index.css
│   └── index.js
└── tailwind.config.js

Hosted website: https://www.garrett-clark.com/

Repository: https://github.com/Boorclark/boorclark.github.io

ankushlokhande · Answer 1 · 2023-09-03T07:21:44.523

To deploy a React.js application on GitHub Pages, follow these steps:

Install gh-pages Package: Install this on your project's root directory

npm install gh-pages --save-dev

Configure package.json: Add the following property

"homepage": "https://<username>.github.io/<repository-name>"

Modify Your package.json Scripts: add or update the "scripts" section to include these two scripts

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

Image Credit: https://blog.logrocket.com/wp-content/uploads/2022/08/commands.png

Now, Re-configure to deploy again on the GitHub pages. Hope it will work seamlessly with you. You can also check the blog on the internet. Recently I used this blog Deploying React apps to GitHub Pages for my project as a reference.

Why is my GitHub pages website displaying a blank page when deployed?

1 Answers1