Search code examples
reactjsgithub-pagesgithub-pages-deploy-action

Is it possible to deploy a non-master branch to Github Pages?


I have a React app I've created with create-react-app, which is deployed to Github Pages via the npm run deploy command using the following:

"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

More specifically, I have used the Github Pages steps from here: https://www.freecodecamp.org/news/surge-vs-github-pages-deploying-a-create-react-app-project-c0ecbf317089

I'm getting feedback on different versions of the application from some non-dev friends of mine, so I'd like to be able to make changes, push them to a branch, then deploy that branch to the homepage. Then if the changes are unpopular, I could deploy the master branch again, without me having to clutter up the master branch with merges and reverts. Is this possible, and if so, how would I do this? I've attempted "deploy": "gh-pages -b <branch-name> -d build" in the scripts, but to no avail, and Google doesn't seem to answer this particular problem. (It may be that I'm unable to find it amidst the sea of "How to deploy a React app to Github Pages" tutorials, which I have solved)

Repository, in case further context is required: https://github.com/JayBaileyCS/cultivation-idle


Solution

  • Github Pages and gh-pages are different things.

    The gh-pages npm package is a helper that makes it easy to create a (new) branch with your built source that is then used by github to host pages. This destination branch is called gh-pages by default.

    Deploying a different source branch

    If you are trying to deploy the source from a different branch, then you can simply do:

    git checkout <branch-name>
    npm run build
    npm run deploy
    

    This will use the source from your current branch to create or update the gh-pages branch.


    Using a different branch as the destination

    The -b <branch-name> part of the gh-pages command tells it which branch to put the compiled html into. If you like you can also tell github to serve a different destination branch-

    From the documentation:

    • Go to your repository
    • Click settings
    • In the "Code and automation" section of the sidebar, click Pages.
    • Under "GitHub Pages", use the None or Branch drop-down menu and select a publishing source.

    The publishing source allows you to select the branch.

    You can also pick a folder within that branch:

    • Optionally, use the drop-down menu to select a folder for your publishing source.