How do I get my gh-pages branch to update?

Question

I was previously working on my newest GitHub Pages website. My website is a React app. I finally got the website to run about a month ago, but I got stuck on this issue of my website not automatically re-rendering when I push changes to GitHub. The only way I can get my website to re-render is to publish it, but I am pretty much certain that I am not supposed to publish frequently.

I think the issue is that I am not actually updating the gh-pages branch of my repository, and I'm not sure if I'm supposed to be. Should I be? If the answer is yes, then how would I go about doing this? I'm not really sure how to push that branch either.

I posted about this already, but it's been a long time, and no one has responded, so I added some more information on what I think the issue might be here.

Original Post

Pusher

Answer 1

I don't think you should be pushing directly to your gh-pages branch. The gh-pages command pushes to it for you.

I took a look at the npm deploy script in your package.json, and I see you have "deploy": "gh-pages -d dist". According to the gh-pages docs, when you run gh-pages -d dist, the gh-pages command will publish everything in the dist/ directory of your current branch to the gh-pages remote branch. And your site is served from the resulting build files that have been pushed to that gh-pages branch.

I also noticed at the end of the gh-pages docs that it says:

If gh-pages fails, you may find that you need to manually clean up the cache directory. To remove the cache directory, run node_modules/gh-pages/bin/gh-pages-clean or remove node_modules/.cache/gh-pages.

^^^ Those are actually faulty instructions. The first option should be node node_modules/gh-pages/bin/gh-pages-clean. The second option should be to remove node_modules/gh-pages/.cache (because the .cache lives in gh-pages, not the other way around).

You may want to try one of those cache-killing options if things are still not working as expected, even after you stop pushing to the gh-pages branch.

Vellum

This script worked for me: "deploy": "./node_modules/gh-pages/bin/gh-pages-clean.js && gh-pages -d build" – Stretto

thank you @Dreadnaut, that worked perfectly, I could hardly believe it – Mandelbaum

Answer 2

I think the issue is that I am not actually updating the gh-pages branch of my repository, and I'm not sure if I'm supposed to be. Should I be? If the answer is yes, then how would I go about doing this? I'm not really sure how to push that branch either.

Assuming your GitHub Pages site renders from gh-pages, then yes, that's the branch where you should be making changes and it's the branch that you should be pushing to GitHub.

I don't know exactly what workflow you're using, but a common way to make changes to a branch is to

1. check it out with git checkout gh-pages,
2. make your changes,
3. git add the changes you wish to commit, and
4. git commit to create a new commit.

You can repeat steps 2–4 as necessary.

Once you're ready to publish your new changes you can push gh-pages to GitHub. Again, I don't know your exact workflow but a simple git push with gh-pages checked out is probably enough.

Milled

Thanks for the response. I understand everything you've stated, but I don't have a local branch for gh-pages. When I published the webpage, a branch was created on my github, but a local branch was never attached to it, is there a way to somehow make a copy of this branch that, when updated, would also update the github branch? – Pusher

@FlamePrinz, do you have your GitHub Pages content in another local branch? – Milled

All of the code I use to produce the website is in another my other branch. I normally have to publish by doing: webpack --mode production and gh-pages -d dist. These commands create the gh-pages branch and this branch only seems to have two of my files in it. So yes I do have my GitHub Pages content in another local branch, but it is a small part of the content. – Pusher

What is gh-pages in gh-pages -d dist? I'm not aware of a gh-pages command. – Milled

The command creates a branch on my github called gh-pages, and the files required to run the website are added to this branch, index.html and bundle.js. – Pusher

@FlamePrinz, sorry, now I'm confused again. If that command creates gh-pages on GitHub and you've configured your GitHub Pages site to publish from gh-pages it should get updated. How exactly does the gh-pages command work? – Milled

Answer 3

I used the instructions at https://github.com/gitname/react-gh-pages to set up a gh-page. To update my React app that was made using create-react-app, I just have to run yarn build then yarn run deploy.

Carleycarli

Answer 4

You could follow this instructions https://www.pluralsight.com/guides/how-to-create-react-application-and-deploy-on-github-pages to set up a gh-pagse. To update gh-pages, for me, I run this first:

yarn build

// or

npm run build

and then:

yarn deploy

// or

npm run deploy

it will be on set.

Wanhsien

Answer 5

From the main/master branch type:

npm build

then

npm run deploy

• and your gh-pages will update.

Bullough

Answer 6

I had the same issue and tried a lot of complex online solutions. I found the following to work:

npm run deploy

Bullough

What's the actual script behind that command supposed to say? Is "deploy" an automatically recognized command, even if it's not defined in package.json? – Varistor

Answer 7

This is the answer that github has for updating a react app.

Here is the link: https://github.com/Frnt-End/Update-React-in-GitHub-Pages

Below is what the page basically states:

How to update React in GitHub pages:

Assuming you already have a GitHub page running with gh-pages and after you push your changes, you see them in your repo but the GitHub page is not being updated.

Keep reading the full guide or check out the quick solution in the Tutorial Page (If you wondering about the full-screen video in the tutorial page, check this guide to learn how to set a Responsive video in React)

In this sample we are using npm and our branch called main, if needed, change them according to your own settings. We already have a build directory - and if you don't have one? no problem! just execute npm run build command (make sure the build folder it's not listed in the .gitignore file). Let's Start The solution is simple - we just need to update the build directory! In the terminal:

Make sure you are in the project folder and no other processes are running (to stop all processing in the terminal: Ctrl + c in Windows OR Cmd + c in Mac)

Deploy the build folder:

npm run deploy

(If you are using GitHub in your code editor, you will see the build folder content being added to the Unstaged Changes - ready to be staged).

Stage all:

git add .

..and commit:

git commit -m "update build for gh-pages"

Last step - Push to GitHub:

git push -u origin main

Calendre