GitHub pages - staging site

Question

I have a GitHub pages site. I would like to implement some staging on a separate branch.

So basically, I would like to host the staging branch on another DNS, built by GitHub pages.

Is there a way to do that without doing the build locally?

I've seen comments here and there referring to a gh-pages branch but haven't found any documentation around that.

Pliant

Does this answer your question? Creating staging and production versions of a site on Github Pages – Carycaryatid

Answer 1

Instead of doing staging in a separate branch, I do it in a separate GitHub repo.

Keeping a separate branch with separate staging configs, staging CNAME and DNS files, and staging-specific features is a hassle within the same repo. Separate repos is a simpler solution since it maintains the mental model that development and staging are different environments.

So there's 2 GitHub repos: a main and a staging repo. GitHub Pages settings allows for separate DNS settings. Since I have a custom domain, the main repo is set to www.customDomain.com and staging repo is set to staging.customDomain.com.

Here's my setup using Main and Staging repo names. Staging is set as a remote for Main, and Staging is an exact copy of Main (besides configs, CNAME, staging-specific features, etc...).

GitHub Pages builds the site using the master branch in Main. I use a dev branch in Main to hold the new code and features. Development work is done in feature branches that branch off of dev and are merged back into dev. When I want to test the feature in Staging, I go to Staging and pull in the latest version of the Main:dev branch. After I'm done testing in Staging, then I'll pull Main:dev into Main:master.

Here's a diagram if that helps you understand the setup. Hopefully this answers your question.

 Main        Staging
  |   |       |
  |   |       |
  |\  |       |
  | \ |       |
  |  \|       |
  |   |       |
  |   |       |
  |   |\      |
  |   | \     |
  |   |  \    |
  |   |   \   |
  |   |    \  |
  |   |     \ |
  |   |      \|
  |   |       |
  |   |       |
  |   |      /|
  |   |     / |
  |   |    /  |
  |   |   /   |
  |   |  /    |
  |   | /     |
  |   |/      |
  |   |      Staging:master
  |   |\
  |   | \
  |   |  \
  |   |   |
  |   |   |
  |   |  /feature
  |   | /
  |   |/
  |   |
  |  /dev
  | /
  |/ 
  |
Main:master

Vivid

Hey thank you for your answer DC! I guess the follow up question is "how do you get GitHub Pages to build another repo / branch"? My understanding is that it can only build <user name>.github.io... – Pliant

Any repo can use GitHub Pages. I have my main repo named UserName.github.io and my staging repo named Staging. Both are being built from the master branch within that repo. – Vivid

Answer 2

My answer only applies since you said you're using a separate DNS AND have your own hosting service (I'm using Hostinger).

AFAIK, Without using external DNS the only way to maintain multiple environments (dev, staing, etc..) is to keep separate repos, and maybe naming them with env name suffixes. I don't like this approach, but I think it's a matter of preference rather than performance \ maintainability.

Here's how I did it:

1. As a convention, the GitHub page domain is my "testing" stage, and the hosted domain is my "production" stage.
2. For testing, setting a GitHub Action workflow triggered by a push to branch dev. That workflow's output deploying to branch gh-pages, following the GitHub Pages convention. Remember to set your index.html's basehref to match your repo name.
3. For production, clone the above workflow. Set the trigger event to pushes from master. Next, create a third output branch, I called it domain. Finally, i'm using my hosting service's "auto deployment" ability, which is just a web hook they provided that triggers a copy files from GitHub to the hosting service's own storage. Under the hood, it's just a workflow step that fires a curl command to webhooks.hostinger.com/deploy/{some-random-guid}

Good Luck :)

Luftwaffe