I have a create-react-app project (https://github.com/khpeek/beomaps/tree/master) which I'd like to deploy to Github pages using gh-pages. Following this tutorial, https://medium.com/#serverlessguru/deploy-reactjs-app-with-s3-static-hosting-f640cb49d7e6, I've added the following to my package.json:
However, if I run npm run deploy, it is published,
but the Github page, https://khpeek.github.io/beomaps/, still shows default content based on the README.md. Do I perhaps need to change the deploy directory?
In the Options page of the repository, I had to select the gh-pages branch instead of the master branch:
(I also re-installed gh-pages as a normal dependency, not a development one (i.e. npm install gh-pages --save instead of npm install gh-pages --save-dev), though I'm not sure whether this was important).
Now the page is visible on Github pages:
I think this has to do with github not knowing which branch it should use (master vs main or idk). Changing my deploy script as follows solved the issue for me:
"deploy": "gh-pages -b main -d build"
This tells github pages that it should use branch main.
I had the same error even after selecting gh-pages branch, but then I again changed it to master branch and it worked!!!
In my experience, it was simply a latency issue. I was able to see the correct page, after few minutes.
I had the same problem - when I deployed my React app to GitHub pages, it showed the README.
Then I pushed the build directory I had created locally to my remote repository. When I did that, my React app worked with GitHub pages.
if you with gh-pages, you have to select it as defualt branch for this repo. It worked for me.
Related
I have created my React project and pushed the complete repo to GitHub using Visual Studio Code. How can I make my React project live on server with the help of GitHub?
You need to install GitHub Pages package as a dev-dependency.
cd ./into/your-app-folder
npm install gh-pages --save-dev
Add properties to package.json file.
The first property you need to add at the top level homepage, second you must define this as a string and the value will be "https://{your-username}.github.io/{repo-name}" , {repo-name} is the name of the GitHub repository you created it will look like this :
"homepage": "http://joedoe.github.io/his-app"
Second in the existing scripts property you need to add predeploy and deploy.
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
If you pushed everything already to Github, the last step is deploying.
One liner:
npm run deploy
With this Github will create a new branch called gh-pages, and will be available online. Hope I could help and will work accordingly.
If you stuck, you can look it up on the official docs of React.
Deployment Documentation of React
Once on a deployment I had some issues with the official documentation, and I had to delete my username from the "homepage" property in order to make it work. Although I suggest you first do by the docs, and if you encounter problems, you might can give a try.
There are several options. Depends on what you want to do, do you want to deploy for production or just to test your development ?
You have several options to deploy such as Heroku, Netlify, Github pages.
I can help you with the process of deploying, in addition you can have a look on the different documentations for the solutions listed above.
I personnaly suggest using Netlify, in my opinion realy easy to use.
Depends on what you want to achieve.
My react app is not loading the index.js, you can see my repository at https://github.com/Vitorrrocha/Star-Wars-info and the gh-pages: https://vitorrrocha.github.io/Star-Wars-info/ .
package.json: https://github.com/Vitorrrocha/Star-Wars-info/blob/master/package.json
Which branch are you trying to serve as a GitHub page? I see you have just a master branch.
You could make a branch called gh-pages and push your build there. I see you have gh-pages installed as a devDependency. You can use gh-pages -d build it will do everything for you. (build is the output folder of react-scripts build.)
I am trying to deploy my react app onto to gh pages but it just shows up as a blank screen. I have tried everything, and nothing seems to work. I followed this video: https://www.youtube.com/watch?v=4NapRkCazks and everything seems to run fine except there is a blank page when I type in the url. Here is my repo: https://github.com/nupurd89/onlineshopping.git
I am super lost and nothing seems to work. Thanks for your help in advance!
The main problem in my case that I am deploying a static create react app [App-filter-review] system and my screen show blank screen too.
#Fix No 1
The first issue is the incorrect url config, for the homepage,as it is given everywhere to correct it
#Fix No 2
If you are using React-router>v4.0 in the React app the include Basename acc to defined property
Basename add this basename={process.env.PUBLIC_URL} in Browser Router
This Article really helps out if you are using another stack too.
https://maximorlov.com/deploying-to-github-pages-dont-forget-to-fix-your-links/
#Fix No 3
If you are deploying the system on Heroku or GH-pages try to correct Case sensitive issues while directing to JS/CSS file while configuring as these systems are using Linux container that is case sensitive
Link to My Github Page that is fixed by Fix no2 is here
https://amancode27.github.io/App-Review-Filter/
Make sure you have installed the right version of gh-pages (npm install gh-pages --save-dev).
Also, add the following properties to package.json file.
"homepage": "http://{your_username}.github.io/{your_repo-name}"
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
Run the following command :
npm run deploy.
Your GitHub repository > Settings > Pages
Under the Source tab, select the "gh-pages" branch.
Hopefully, that helps.
I was having a similar issue while using a custom domain I bought on namecheap, even after following the recommended set up (adding the A records/CNAME on namecheap, adding the deploy scripts in package.json, custom name on github, etc.)
The solution I found here https://github.com/gitname/react-gh-pages/issues/53 worked for me.
I had to remove my repo name from the end of my package.json homepage property, so it looks like this now:
"homepage": "https://gitname.github.io"
After redeploying and then refreshing my browser page / cache, and I'm not getting a blank page anymore. I was using create-react-app, namecheap for the custom domain, and gh pages for hosting.
I have deployed a few days ago React app on GitHub. Yesterday I made changes and something went wrong - I deleted gh-pages after pushing changes on master branch and when I type in terminal
npm run deploy
I have error like this
I have 2 questions:
How to update website in github.io when I made changes?
How can I deploy app again on GitHub pages?
Edit:
Here's solution:
https://github.com/facebook/create-react-app/issues/4854
If you want that GitHub use your master branch to display your website, you have to rename your repository to xxx.github.io. Or you can push your content to gh-pages branch so GitHub will generate the content under yourname.github.io/repo_name .
Make sure your content is OK. The problem you met seems related to your npm tool.
I have my react app running on gh-pages. Here are the changes I made in package.json to get it there:
STEP 1 - Install gh-pages in dev-dependencies:
npm i gh-pages --save-dev
STEP 2 - Add deploy script:
"deploy" : "npm run build&&gh-pages -d build",
STEP 3 - Add homepage key at top of package.json with name key etc.:
"homepage": "https://<username>.github.io/<git-repo-name>/",
STEP 4 - Run command to deploy:
npm run deploy
This should host the app on gh-pages on URL you specified in key homepage. Every time you make changes, just run the command specified in STEP 4 locally to publish changes.
So, I created a basic React App following a tutorial so I could use it as my new GitHub homepage. When I run npm locally it shows me my React App as pictured below. However when I go to my GitHub Pages address (https://robagruen.github.io/), I get the second image pictured. I've looked around online, and I'm having trouble figuring out what's going on with this. I have run both npm run build and npm run deploy and the script runs leaving the output message of "Published." however this does not seem to be the case to me. I've also added "predeploy": "npm run build" and "deploy": "gh-pages -d build" to my package.json file. Has anyone else run into this before with GitHub pages? I'd really appreciate any helpful advice! Thank you.
As you are trying to deploy in the GitHub user page:
https://yourUserName.github.io/
As opposed to a Project Page:
https://yourUserName.github.io/yourRepo
You need slightly different steps:
Create a new copy of your Master branch, (you can name it as you like):
$ git checkout -b source
$ git push origin source
This way the source branch is a direct copy of our master.
Next steps:
Navigate to your repo on Github, and select "Settings".
On the left-side panel, click on "Branches".
Figure: Changing the default Branch
Then you will be able to select the 'Source' branch and update it.
Now in the terminal (source branch) run:
yarn deploy
Wait a couple of minutes, refresh and you be able to see your site at:
https://yourGitUser.github.io/
Making changes:
Your source branch is acting like your master. So for next changes, merge your changes into source.
You might find more information about this on the following article:
https://dev.to/javascripterika/deploy-a-react-app-as-a-github-user-page-with-yarn-3fka
Note, if your next project you deploy a project page, you might follow the steps described here:
https://facebook.github.io/create-react-app/docs/deployment#github-pages-https-pagesgithubcom
After following this tutorial, https://medium.com/the-andela-way/how-to-deploy-your-react-application-to-github-pages-in-less-than-5-minutes-8c5f665a2d2a ,make the changes in packages.json
Then, create a branch named gh-pages and push it to the github with the same branch name gh-pages. Then change the source to gh-pages branch in Github Pages section in settings
Not entirely sure this is the issue because I have never deployed to github pages but it looks like the url for the page should be formatted as so:
http://{username}.github.io/{repo-name}
According to this resource https://github.com/gitname/react-gh-pages/blob/master/README.md
You're using the master branch for the Github pages feature and that's why is showing the README file as the main page.
Set the default branch to gh-pages in the repository settings or change the deployed React source to master.
change deploy script from "gh-pages -d build" for "gh-pages -b master -d build".
This is only needed for personal websites [username].github.io.