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

Solution 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.

Solution 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.

Solution 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.

Comments

[FlamePrinz]

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?

[Chris]

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

[FlamePrinz]

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.

[Chris]

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

[FlamePrinz]

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.

[Chris]

@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?

[Dreadnaut]

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