Github pages is deploying READme file

[ChethanHR10]

Select Topic Area

General

Body

https://github.com/ChethanHR10/Weather-webpage
I tried to deploy this project using GitHub pages.
I tried everything gh -pages etc., but still not able to deploy this react.js project. Please help me with this problem.

Also, I tried this in vercel and there it is deploying but the whole page is blank(white).

[davevad93]

Hi @ChethanHR10 ,

The issue occurs because your index.html is inside the public folder, for GitHub Pages sites to display correctly the index.html must be in the root of the repo. Note that you may need to update the paths of your images or scripts inside the html. The structure should be as follows:

/Weather-webpage
│
├── public
├── src
├── .gitignore
├── index.html
├──package-lock.json
├── package.json
└── README.md

[ChethanHR10]

the errors in the browser is eliminated but the page is still white

[davevad93]

In package.json change the homepage value from:

"homepage": "https://github.com/ChethanHR10/Weather-webpage",

to:

"homepage": "https://chethanhr10.github.io/Weather-webpage",

Let me know if it fixes it!

[ChethanHR10]

No sir!!!! still the same.

[davevad93]

At this point I think it must be something with the configuration, honestly I've never deployed on GitHub Pages a React app so I'm not sure what might be the issue here. I'm sorry if i wasn't able to help you properly, take a look at this resources, they might be useful:

• Getting blank page after react app publish in github
• React app deployment on GitHub Pages displays a blank page
• Blank page when deploying React App to gh pages
• React app deployment on github pages shows a blank page

[ChethanHR10]

I appreciate your efforts, Thank you so much sir!!!

[LiteBrite82]

Looking at your file structure in the main branch, I dont think you have it set up correctly. Are you using "Create-React-App"?

Routing is typically done in app.js; not index.js. components and pages should be in their own files/folders.

index.html should be in the public folder.

[davevad93]

Hey @LiteBrite82 , I didn't know index.html for a React project has to be in the public folder, I thought that by default it always has to be in the root of the repo, I learned something new, thanks a lot!

[davevad93]

I got it all wrong by the way, sorry again! @ChethanHR10 😅

[LiteBrite82]

@davevad93

yeah, for source code its gotta be in public. But for the built app, yes it needs to be in root.
Your walkthrough detail is on point though!

@ChethanHR10

The source code will run fine locally, but the builds are failing because of issues in the code.

You need to fix the code in index.js and in app.js. I don't believe you can have 2 returns in the same component. Also you would need to import the navbar component from somewhere, along with BrowserRouter.

Honestly, before going too much further, I would consider using Vite or or a framework like it instead of Create-React-App. CRA has ben deprecated and wont hold up for much longer.

@noorjsdivs made a great YouTube video on how to set up Vite, react-router-dom, and tailwind. (Thanks Noor!!!).

Keep up the hard work, ChethanHR10; you are getting close!!!

[ChethanHR10]

@LiteBrite82
Thank you so much for your help, i really appreciate it 😄.
@davevad93
It's ok, we learn new things everyday.
Thank you again.