DEV Community

Deploy a React App as a Github User Page with Yarn

JavaScriptErika on May 29, 2018

tldr; see Solution I've been working on redoing my portfolio site, it's still a WIP - that being said here it is so far. I need to polish my portf...

Read full post

Philip Karlsson • May 29 '18

Great!

Yesterday I got the idea that I'd replace my old Jekyll based personal GH-page with React site built with GatsbyJS. Unfortunately I forgot the whole point with version control and deleted the old site's repository before building the new one. I ended up not liking Gatsby, so currently I have no site. So, yeah, this is couldn't have come at a better time.

Thanks!

JavaScriptErika • May 29 '18

Awesome!!!

Haha, I did the same thing with my previous user page; I deleted my repo, and started fresh (with my current project) as I had to do something super wonky with the build files with my previous setup (I really had no idea what I was doing at the time)!

I definitely feel confident with this method now, especially for any needed updates or complete redesigns in the future.

goughjo02 • Dec 7 '18 • Edited

Great article.

When using react-router, have you tried adding a redirect, from '/repository-name' to '/home' to solve the final issue?

Edit

I have tried this and it works. add <Route exact path="/your-github-repo" render={() => <Redirect to="/" />} /> to your routes

David Yarzebinski • May 29 '18

Would this work just as well with Vue? or just React?

JavaScriptErika • May 29 '18

I did some digging around, here's what I found for vue:

vue-gh-pages
npmjs.com/package/vue-gh-pages

and

vuepress.vuejs.org/guide/deploy.ht...

^{^} This method appears to be the most straightforward for vue, as you don't need to add any dependencies. I'd still recommend creating a source branch as you'd be pushing your build files directly to master.

rik-96 • Aug 24 '18

This was really helpful.! I've been trying to add a custom domain name to my repo. This article saved at least me a couple of hours. However, I don't understand why we need to be in source to run build?

moussaab moulim • Apr 21 '19

i have the same question

Catherine Lin • Jul 19 '18

Hi, thanks for writing this tutorial!

I followed the instructions but I'm still getting an error after running deploy from the source branch.

'fatal: A branch named 'master' already exists.'

Do you have any idea why?

Catherine Lin • Jul 19 '18

Never mind , I managed to get it work. Thanks again for the instructions! :)

Hakki Riza Kucuk • Sep 24 '18 • Edited

I am having the exact same problem right now but I could not get it work. Could you please share how did you solve it?

EDIT: for anybody who would face the same problem: refer here
github.com/tschaub/gh-pages#when-g...

Hakki Riza Kucuk • Sep 24 '18

I could not solve this problem so I came up with another solution: -check out a new branch called "source" which is an exact copy of "master".
-deploy the site to branch "gh-pages" with usual gh-pages npm module. (I use npm in my example, but the script is same.)

rebase "master" to "gh-pages" and simply push it. So "master" will have what "gh-pages" will have.

It is a not a clean solution though. Any feedback is much appreciated.

danieljamesross • Aug 22 '20

I followed your excellent tutorial and successfully published my react app back in May 2020.

I recently updated the app and hit 'yarn deploy', but the site would only show the README.

After unsuccessful attempts to fix, I eventually asked GitHub. They replied within 30 mins (excellent!) with the following fix which I thought I'd share.

Thanks for the tutorial, fix below.

"We recently rolled out a change that allows you to select any branch to publish Pages from. Unfortunately, we have identified a bug with this change that affects user site repositories whose default branch was not master. In cases like this, the publishing source for Pages gets set as the default branch instead of master, which is what has happened to you.

You will need to set the publishing source back to the master branch by following the steps here

Once you do that, it shouldn't change again."

Angie Rodriguez • Oct 22 '19

Useful article for the most part; however, I don't understand this step:

"Switch to master in the terminal, git merge source or whatever branch you want, switch to your source branch and and run:

$ yarn deploy"

If this step instructs you to merge the source branch into the master branch, then the master branch is ahead by 1 commit of 'origin/master':
"$ git checkout master
Switched to branch 'master'
Your branch is ahead of 'origin/master' by 1 commit.
(use "git push" to publish your local commits)"

So I tried pushing the master branch with 'git push origin master', but I receive an error which says I would have to first do a git pull, yet I know from trial and error that'll be a bad move, pulling down 5k items hence the reason why I searched the internet and finally found this helpful article.

I'm just concerned about why my master branch is not on par with the origin/master branch on Github, but maybe it's not so big a deal ?

VictorGinelli • Jan 25 '20

same

Cosmas Gikunju • Apr 13 '19 • Edited

Hey thanks. This saved me pulling my hair and digging over google only to find solution for project sites.

Kacper Olek • Jun 4 '19

Struggled with that a lot, now it works!
Thank you!

Cat • May 29 '18

I absolutely needed this. I learned (the hard way) that directly connecting the app to GitHub was a mistake. Thank you for this!

JavaScriptErika • May 29 '18

You're welcome - thank you for your feedback!!! I got hung up on it after working on my portfolio and wanting to test it out - it was frustrating because it didn't feel like there was cohesive documentation out there and I wanted to fix that problem! :)

Tiago Suzukayama • May 30 '18

Great post! I was looking for a tutorial on how to do this just now. Thanks!

JavaScriptErika • May 30 '18

Awesome - thank you so much!
I JUST updated the article to hopefully save some people some time if you are using React Router and deploying as a user page! Cheers to a successful deploy!