I'm trying to deploy a create-react-app to GitHub Pages, but I'm getting a 404.
404
There isn't a GitHub Pages site here.
What I've done:
Created a user site repo named <username>.github.io
Added "homepage": "https://<username>.github.io" to package.json (as per the Create React App docs)
Installed the gh-pages package
Added and ran "deploy": "gh-pages -b master -d build" to scripts in package.json
The contents of /build folder is successfully pushed to master, but the site isn't accessible.
The repo's GitHub Pages settings simply says:
Your GitHub Pages site is currently being built from the master branch.
User pages must be built from the master branch.
I also tried some routing solutions (this and this) without making any difference, although I don't think they are ment to fix the problem I'm having.
I'm not sure how to troubleshoot this any further. Any ideas?
Ok, so apparently you have to choose a GitHub Pages theme (even though you're not using it) in order for the page to be published. This seems very strange to me, and from what I can tell it's not at all mentioned in the documentation. đ¤ˇââď¸
Related
My repo: https://github.com/Ayse-Sadioglu/Portfolio
website live at: https://ayse-sadioglu.github.io/Portfolio/
I seem to have a problem publishing my website via Github pages. Everything works as it should on localhost but Github pages shows blank page. Iâve seen a few similar posts about this issue but answers not worked for me. According to answers to similar posts, I tried to remove the Portfolio extension from homepage in package.json but it didn't updated on the github pages. I mean it still shows the url that i entered before ands still shows blank page.
I have installed through npm the gh-pages module and done ânpm run deployâ from https://github.com/gitname/react-gh-pages. This created my gh-pages branch. Iâve updated my package.json with the appropriate information.
I am trying to deploy a react app, but specifically on user page on github pages. I can see a LOT of resources for deploying to project page, but nothing yet for user page. Please help!!!
I have tried switching the gh-pages line in the package.json file to include master, but even then I will have to update the gh-pages branch, it doesn't deploy directly from master. I want to be able to deploy directly from master.
gitname/react-gh-pages is one good example, and applies to a user site, where GitHub requires that the repository's name have the following format: {username}.github.io (e.g. gitname.github.io).
But it uses the gh-pages branch as publication source, not master (which no longer exists anyway, since it was renamed to main since Oct. 2020)
The OP cheese-berry references in the comments the post "How do I deploy a simple React app as a "user page" to Github Pages?"
cheese-berry adds:
For anyone else with the same question, you need to basically:
pay attention to your repo name,
install the gh-pages package,
modify your package.json file, and
change your source of deployment on GitHub (Repo -> Settings -> Pages -> Build & Deployment).
I was working on my portfolio and I build it using react and I thought to deploy this using GitHub pages.
So, I started deploying and I've followed pretty much every step given there 'Create React App / Deployment', but I was not able to see the desired result.
You can Check here at thisisnitish.github.io: It deploys the README and I tried everything to fix it but it shows the same result.
You can visit the repository at github.com/thisisnitish/thisisnitish.github.io.
Any help would be appreciated đ.
Since https://hisisnitish.github.io returns 404, it means nothing has been published by GitHub.
That would be because of the configuring a publishing source for your GitHub Pages site.
Make sure to select the branch main, folder public in order to instruct GitHub to publish your page from those elements.
The OP adds:
there is only a root and docs folder like this
Then you might try, for testing, to generate your site in the docs/ folder, instead of public/.
Or to generate it in a separate branch.
On your package.json, change the deploy script
"scripts": {
... (other scripts)
"deploy": "gh-pages -b main -d build"
}
Moreover, do not push your entire repository on github pages. Only content of /build folder is important here.
Alternatively, you can build your react app locally
npm run build
Then upload/copy contents of /build (index.html etc.) to your repository.
After taking a look at console, i got this
Loading failed for the <script> with source âhttps://abhishek-098.github.io/TourSpot%20/static/js/2.1f6fc1d5.chunk.jsâ.
Loading failed for the <script> with source âhttps://abhishek-098.github.io/TourSpot%20/static/js/main.3961266e.chunk.jsâ.
Link to my Repo : https://github.com/Abhishek-098/TourSpot
For deploying a Single-Page Application (React, Vue) to GitHub Pages, you should know that it is necessary that you do a production build. This can be accomplished by doing npm run build or yarn build depending on the package manager you are using. This command will generate a ./dist or ./build folder that will contain your react app in pure HTML, CSS, and JS.
For GitHub pages, there are some configurations you should do. First of all, the index.html from your production build (from the dist, build folder) should be in the root folder, which means, you should be able to see it when you open the repo (not inside the build folder). If GitHub pages do not detect any index.html in the root of the repo, it will display a 404 page.
Now, since you do not want the production build files messing around with your React project, it is recommended that you create a different branch for your GitHub pages deploy.
So, ideally, you would have two branches: master and gh-pages, the first one containing your React project and the second one containing only your dist folder but in the root of the project.
Here is an example of the structure of a Repo that it's deployed using GitHub pages.
https://github.com/8rb/React-Quiz/tree/master
You can see both branches and the deployment link works perfectly fine.
To configure the branch that is being deployed to GitHub pages, go to settings and select the branch where you have your production build.
All the information was taken for the following link:
https://create-react-app.dev/docs/deployment/#github-pages
I hope you found it useful!
#Rodrigo Ramirez does explain how its done, but leaves out some important information provided in the docs he linked (https://create-react-app.dev/docs/deployment/#github-pages). Maybe the've been updated since but I would recommend following those steps in the doc. They give step by step instructions that are very easy to follow.
I tried following #Rodrigo Ramirez answer, as well as, countless other things on the internet and nothing worked and it was all very complicated. The doc provided here gets it all done for you very easily.
I have been trying to figure out how to host my React App on GitHub Pages. I found these two guides, but neither seem to work:
https://github.com/gitname/react-gh-pages
https://itnext.io/so-you-want-to-host-your-single-age-react-app-on-github-pages-a826ab01e48
The first guide seems to only work with a pre-made React-App (step 2 of procedure). On the other hand, it seems to work correctly otherwise. The issue with this guide for me is that I made my app from scratch, so I don't have the same names for codes. For example I had to use (because dist/ is my build path):
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d dist/"
}
The other guide seems to have the same issue (not custom app), but I'm not sure because I don't recognize all of the code. Since a lot of the code is different, for example they have:
âscriptsâ: {
âstartâ: âreact-scripts startâ,
âbuildâ: âreact-scripts buildâ,
âtestâ: âreact-scripts test â env=jsdomâ,
âejectâ: âreact-scripts ejectâ,
âpredeployâ: ânpm run buildâ,
âdeployâ: âgh-pages -d buildâ
}
When I deployed gh-pages, a different branch was built in my github repo, but I'm not sure if it's supposed to be working automatically. Essentially, I'm kind of new to this, so I'm not sure what I'm doing wrong. I'd really like to finish creating this website with GitHub Pages because it seems that I am close, but if this is futile, is there a free alternative that would be easy to setup?
Here is a link to my github master branch: https://github.com/NumaKarolinski/PersonalWebsite
I think by looking at my package.json, and webpack.config.js, it should be obvious as to what I am doing differently from usual?
I don't get any errors when following the guide, but the intended URL just has a 404 error. There are no errors in the console (except on Chrome which has a favicon.ico error which doesn't make much sense since I don't have a favicon).
For your other options i prefer firebase for reactjs app.Just follow this steps to deploy app build to firebase.
install firebase cli
cd to project
npm run build
firebase init
firebase deploy
and you are done.Hope this help
In the examples you linked, they are using create-react-app as a boilerplate, that's why it looks so different. All the build scripts are given to you. I would recommend using create-react-app for small to even medium size projects, and you can always eject to config the boilerplate if needed. Github pages are probably the easiest option around, but you are really close.
Option 1:
You need to create a build directory, and push that directory to a Gitbub branch and have Github host that branch for your website. To do that, you will need to go to settings in that repo and set it to use a different branch. Just make sure only built app is in that branch. Basically, all your js files should be compressed into one file and etc.
Option 2:
You have a pretty small app, just create a create-react-app and copy everything over, and then follow the instruction again for deployment.