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).
Related
I know two ways of hosting an app.
You either go to settings and set source branch and select folder.
You can follow some steps like npm --save install gh-pages, npm run deploy and so on.
I tried to host my app the 1st way, but it shows README file and it doesn't show index.html in public folder.
The "Configuring a publishing source for your GitHub Pages site" does mention choosing a branch and folder.
But:
gh-pages is always a branch, not a folder.
the folder referenced in the documentation seems only to be /docs: try for testing your index.html in docs/ rather than public/.
That being said, try and test the new (Dec. 2021) feature:
GitHub Pages: using GitHub Actions for builds and deployments for public repositories
Today you will begin to see a new workflow running called pages build and deployment in your public GitHub Pages repositories.
This workflow is automatically triggered when you push to the branch configured for GitHub Pages in your repository.
As the name suggests, it builds and deploys your pages site.
The initial benefit of this change is enabling you to see your build logs and any errors that may occur which has been a long standing issue for Pages users.
However, in the future this will enable us to give you the ability to fully customize your pages build and deployment workflow to use any static site generator you want without having to push the build output to a special branch of the repository.
You may notice this workflow uses some new actions actions/pages-deploy, and actions/jekyll-build-pages.
For now these actions are designed to be used in the generated workflow, however, starting early next year we will introduce some additional changes that will enable you to take advantage of them.
Learn more about GitHub Pages
When I deploy my React App to Github Pages with 'npm run deploy' I am consistently running into a 404 'File not found'. The site is building from the 'gh-pages' branch in my repo, which I have made match my master branch with all of my source files.
One concern I have here, is finding that other operational Github Pages repositories only contain the build folder in their 'gh-pages' branch, not the rest of their source code. A second point of confusion, is that on two occasions now I have committed/pushed my site as described above and it has all worked... until I've gone to update something and the 404 returned.
So, my questions are:
Do I need to set up my 'gh-pages' branch to only contain my build folder so that it can find my index.html and not 404? If so, how do I set a branch to only hold a specific folder and not have other files merged into it?
Can you describe a process to update the site once it's up?
If you want to check out my repository, you can find it at:
https://github.com/edmundweir/doe-website
And the site I am trying to get live is:
https://descendantsofearth.com/
Any help on the matter would be immensely appreciated as I am 500 metres down a troubleshooting rabbit hole and my flashlight has run out of batteries.
With thanks,
Betty.
TLDR: Delete the gh-pages branch on GitHub and then run npm run deploy.
404 'File not found'
This is happening because your gh-pages branch does not have an index.html file at the root and you didn't specify a source folder to use in the GitHub Pages settings. A quick remedy here would be to set the source folder to be /build, but that won't achieve the setup you're looking for with the gh-pages npm pkg.
The site is building from the 'gh-pages' branch in my repo, which I have made match my master branch with all of my source files.
This is the root cause of your issue. Your deploy npm script is currently set to commit the contents of the build folder only to the gh-pages branch. The package will manage this branch for you as a branch with a completely separate history from master.
on two occasions now I have committed/pushed my site as described above and it has all worked... until I've gone to update something and the 404 returned.
Possibly it worked when you ran your deploy script and then you later broke it by manually pushing to the branch?
Do I need to set up my 'gh-pages' branch to only contain my build folder so that it can find my index.html and not 404? If so, how do I set a branch to only hold a specific folder and not have other files merged into it?
The package is handling all of this for you, which is really cool. For some history - when GitHub Pages first came out - the instructions were to create an orphan branch where you would push your static build to, manually. Note that there are a few ways to achieve this though.
Can you describe a process to update the site once it's up?
master should not contain your static build, just like it doesn't contain node_modules etc. You should add build to your .gitignore so that it doesn't get committed. That way you're only committing the actual source code - which minimizes the size of your code base and gives you a clean revision history.
Whenever you want to "deploy" your changes, you should run npm run build to build your static app from your source code and then npm run deploy to have gh-pages push your static build to the gh-pages branch (which GitHub Pages will then use for your site).
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'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. 🤷♂️
Hello I have read many docs online on connecting gh-pages with create-react-app. But most guides either assume that one does not already have a github pages set up, and that the react app is to be hosted as a directory (ie. username.github.io/react-app) instead of the homepage/root (username.github.io). I am hoping someone can help me out:
I have an existing repo for a github pages custom domain. It is currently hosting an older site I built with gulp and static html/css/js, and a CNAME file for custom url.
I built a new website redesign with create-react-app in a separate repo (It uses react-router for multiple pages).
I want to overwrite the contents of my old github pages site with my new create-react-app website as the root homepage.
Is this possible? If so, what is the best way to achieve this? Thanks
In the existing Github Pages app, remove the CNAME and/or delete master branch. Deleting master branch will remove the site, while deleting CNAME will clear up the custom domain back to default [username].github.io.
In create-react-app, add CNAME to /public folder.
In create-react-app, add line "homepage":"./" to package.json.
In create-react-app, run npm run build then run gh-pages -d build build process, then run npm run deploy