Creating staging and production versions of a site on Github Pages

Question

I want to use Github Pages to publish a production website (at, say, www.example.com) and also a staging version of the same site (at, say, staging.example.com).

I've set up a repo (e.g. my-jekyll-website) in Github for the production site, created a gh-pages branch, and set the CNAME file in the root level of the repo to www.example.com. Works great.

Now, what's the least painful way to also be able to push changes to staging.example.com?

One thing I've tried is setting up a second remote repo on Github (e.g. my-jekyll-website-staging), then adding this as a remote to my local git config. Works great, except that the CNAME file in the repo needs to be changed to staging.example.com for this to work. Which is no good, because then when I want to deploy to production, I'd need to change the CNAME file back to www.example.com. Not ideal.

I've looked at using git filter content drivers, but if I understand correctly, that's about modifying files locally, not getting different versions of a file pushed to different remotes.

Edit: I've also considered not using a custom domain for staging at all: i.e., just using username.github.io/my-jekyll-website-staging. Unfortunately, then my site-root-relative links (e.g. /images/foo.bar) break, because the baseurl is now different between production and staging.

Answer 1

Pulled from comments above:

[M]erge the staging git branch into the production branch and push[.] You could just keep the CNAMEs permanently pointing to their respective repos, but manipulate the repos separately.

Comment originally by Jonathan Chan

Do as @JonathanChan says: maintain two separate branches, then hijack your CNAME file in each one. This way local changes (to the CNAME) will not be committed to the repository.