I watched lots of videos, and I read lots of documentations, but I couldn't do this subject. Can you help me?
First of all, I have an react app on github, HERE:https://github.com/alper-efe-sahin/portfolio-v2
(It completed app)
I have 2 branch, first MASTER branch, and second GH-PAGES branch.
I created GH-PAGES using codes which are npm run build and npm run deploy.
Also you can see my some package json codes here:
"gh-pages": "^3.2.3",
"deploy": "gh-pages -d build"
"homepage": "https://github.com/alper-efe-sahin/portfolio-v2",
When I try to create github page, it shows my github page, note It's codes. (for instance, it shows react documents, not react codes, not html css etc.)
How can I show my codes like a good website ?
You have the wrong value set at the property homepage in package.json
it should be https://alper-efe-sahin.github.io/portfolio-v2
Also add the script "predeploy": "npm run build" alongside with deploy in scripts so when you run npm run deploy it also builds your app with npm first.
source: The guide I followed for my cra
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.
There are a few tutorials out there on how to deploy a react-app to GitHub project pages, e.g., this post (i.e., www.{github-username}.github.io/{project-name}), using npm run deploy.
However, when I tried to deploy the react-app I built as my personal page (i.e., the URL will be www.{github-username}.github.io/), the terminal would freeze after a successful build while trying to deploy.
My package.json looks like below (as suggested by the existing tutorials):
{
"homepage": "http://{github-username}.github.io/",
"name": "personal-page",
...
}
"scripts": {
...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
and I ran npm run deploy command. The project builds successfully and then the terminal crashes before deploying. When I use CTRL+C to terminate the process and rerun the command, it shows me this error: "Branch gh-pages already exists". Some already mentioned running this command will solve the problem: rm -rf node_modules/gh-pages/.cache, but it did not work for me.
Since I spent two hours to solve this problem and I had to get this information from multiple sources and solutions, I decided to spend another hour to write this post here for other future deployers (!) facing the same issues.
To provide context, For each account, GitHub allows hosting 1 personal static webpage and numerous static project webpages on GitHub Pages for free.
To use this functionality, you must change the repository name to {github-username}.github.io for the personal page and {github-username}.github.io/{project-name} for any projects you want to deploy to GitHub Pages.
This question and answer are about the personal page only, but might give some insights for debugging the project pages as well. Tutorials for deploying a react project using npm can be found online (e.g., see this post).
To fix the freezing problem, someone suggested that you change the deploy command to the following:
"scripts": {
...
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
Adding -b master specifies the branch your project will be deployed to. This helps avoid the terminal freezing and your code actually gets deployed and accessed via www.{github-username}.github.io/, but all the build file information will be committed and pushed to the master branch.
What I wanted to do was having the source project on the master branch and having the deployed website on a different build branch. But also, I did not want the URL to include the branch name as well.
I tried changing -b master to -b {deploy-branch=name}, e.g., -b gh-pages where gh-pages is the name of the branch I'd like to deploy my website to. This caused running npm run deploy to freeze again!!
To solve this problem, I had to manually create a remote branch, called gh-pages and run the deploy command again.
To make sure the GitHub pages will be loaded from the gh-pages branch, I had to go to my GitHub repository > Settings > GitHub Pages and change the branch to gh-pages (see image below).
After step 2, my website was up and running and could be accessed via www.{github-username}.github.io/.
You can go ahead and push your project commits to the branch master as well. Doing this, of course, will not affect your build and GitHub personal page.
The last problem is avoiding the error "Branch gh-pages already exists" after using CTRL+C to terminate the unresponsive terminal.
The solution is removing the cache, but since version 3.1 of gh-pages node_module, they moved the cache to a different path. So instead of:
rm -rf node_modules/gh-pages/.cache
, I used:
rm -rf node_modules/.cache/gh-pages
to avoid the error (thanks to Nicholas for his comment).
I hope this helps other people as well :)
I've looked at numerous StackOverflow answers, that answer a variety of different scenarios regarding publishing React pages to Github, but none of them clearly explain how to publish a basic user page. I have a very simple, standard React app, that I'd like to publish as a user page on Github.
What are the basic steps for publishing a simple React app as a user page to Github?
The answer, in total, is found in two document sources.
Presuming that you've already created your React app, all is well locally, and your app is ready to deploy, here are the steps to deploy a simple React app as a user page on Github:
Follow the guidance given by Github regarding Github Pages... in particular, note that user pages are served only from the master branch, and thus, the user page will be served at https://{your-github-user-name}.github.io.
User pages must be built from the master branch.
Next, follow the guidance provided in Create React Apps documentation regarding Github Pages deployment, particularly the parts related to user pages.
Open your package.json and add a homepage field that matches where your user page will be served from:
"homepage": "https://myusername.github.io",
Install the gh-pages module:
npm install --save gh-pages ... or ... yarn add gh-pages
Add deploy (and predeploy) to scripts in package.json:
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
...
},
Modify your deploy script to force push the built application to the master branch:
"deploy": "gh-pages -b master -d build",
Deploy your site by running:
npm run deploy
The last obstacle to overcome, is caching at Github. You might need to run npm run deploy more than once, to get around Github's caching of previous deploys.
I have made a simple page with React & Redux, which I want to deploy on github.
In my terminal, I write:
npm run build
Then I add
"homepage": "http://myusername.github.io/mynameapp",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
to package.json
Then I install
npm install --save-dev gh-pages
Then I go on my
Github repository => settings => GitHub Pages => select gh pages branch.
Finally, I write
npm run deploy
The page is published, but the result is pure crap. It blends old lines of code - that I actually erased ages ago - with new ones. 100% of the images are either not displayed or not even found. I've checked the build folder, everything is fine. I did add, commit and push my project to the repo before doing the build.
Any help would be highly appreciated!
Please check on which branch you are coding make sure it is master and take a force pull from github.
Also if you want you can try delete your build folder and run deploy after that.
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.