Testing Blog Designs with Git Branches and GitHub Pages

I have a habit of tweaking my blog design and then immediately second-guessing myself. Does this colour scheme actually work? Is this layout easier to read, or just different? For a long time, the only way I could really tell was to push the change live and look at it in a real browser — which felt a bit reckless. Then I discovered that GitHub Pages lets you publish from any branch, not just main, and everything changed.

Here is the technique I now use whenever I want to compare two designs side by side before committing to one.

Why Branches Are Perfect for This

Git branches are usually associated with software features or bug fixes, but they are genuinely useful for design experiments too. The idea is simple: your main branch holds the version of your blog that is live and working. You create a new branch for your design experiment, push it to GitHub, and then tell GitHub Pages to serve from that branch instead. You get a real, live preview of your experiment — fonts, layouts, colours, everything — without touching your production site.

When you are happy with the result, you merge the branch into main and delete it. If you decide the experiment was a bad idea, you just delete the branch and nothing has changed.

Step by Step

1. Create a Branch for Your Experiment

Start from your current main branch and create a new one with a descriptive name:

git checkout main
git pull origin main
git checkout -b design/new-typography

I like prefixing design experiments with design/ so they are easy to spot in a list of branches. You could use experiment/, test/, or anything that works for you.

2. Make Your Design Changes

Now make whatever changes you want to try — update your _config.yml, edit a CSS file, swap a Jekyll theme, restructure a layout. Work on it until you are ready to see it live:

git add .
git commit -m "Try new typography and wider content column"
git push origin design/new-typography

3. Point GitHub Pages at Your Branch

This is the key step. Go to your repository on GitHub and open Settings → Pages. Under the Branch section, use the dropdown to select your new branch (design/new-typography) and keep the folder as / (root) or /docs depending on your setup. Click Save.

GitHub will take a minute or two to build and deploy. Once it is ready, your experiment is live at your usual GitHub Pages URL — for example, https://yourusername.github.io/your-repo/.

4. Review It Properly

Now you can look at your experiment in a real browser, on your phone, at different window sizes — the full experience. I find this much more honest than any local preview, because you see exactly what your readers see, including any CDN-loaded fonts or assets.

If you want to compare the two versions directly, open your experiment URL in one tab and temporarily switch the GitHub Pages source back to main in another browser window. It is a little manual, but it works well enough for most design decisions.

5. Merge or Move On

Once you have made your decision, the path forward is straightforward.

If you love the new design, merge it into main:

git checkout main
git merge design/new-typography
git push origin main

Then go back to Settings → Pages and switch the source back to main. Finally, delete the experiment branch to keep things tidy:

git branch -d design/new-typography
git push origin --delete design/new-typography

If you decided the experiment was not an improvement, just switch the GitHub Pages source back to main and delete the branch without merging:

git checkout main
git branch -D design/new-typography
git push origin --delete design/new-typography

Your live site was never affected, and you have lost nothing except a little time and some creative energy.

A Few Tips I Have Picked Up

Keep your experiment branches short-lived. The longer a branch drifts from main, the harder it becomes to merge cleanly. If you are not sure about a design change within a week or two, that is probably useful information in itself.

Name branches clearly. design/dark-mode-experiment is much more helpful three weeks later than test1 or my-branch.

One change at a time. It is tempting to bundle several ideas into one experiment, but then you cannot tell which change made the difference. If you want to try a new font and a new colour scheme, give them separate branches and test them separately.

Remember to switch Pages back to main after deploying an experiment branch. I have forgotten this more than once and spent ten minutes confused about why my live site looked different!

Why I Love This Pattern

Before I started doing this, I would either avoid redesigning my blog altogether (too risky!) or push changes directly to main and hope for the best. Now I actually enjoy experimenting, because there is a clear safety net. The branch is isolated, the stakes are low, and the feedback is real.

It is one of those techniques that feels a bit technical the first time you try it and then becomes completely second nature. Give it a go on your next design idea — I think you will find it changes how willing you are to experiment.

Did you like this post? Please let me know if you have any comments or questions, or if there are other GitHub Pages tips you would like me to cover!