Skip to main contentCarbon Design System

5. Deploying to Github Pages

This step takes what we’ve built so far and optimizes the app for a production environment. We’ll be deploying the production build to IBM Cloud.

Note: The following tutorial instructions are based on our v10 packages and have not been updated to reflect changes for our next major version.


A preview of what you’ll build (visually no different, but built for production):

Fork, clone and branch

This tutorial has an accompanying GitHub repository called carbon-tutorial that we’ll use as a starting point for each step. If you haven’t forked and cloned that repository yet, and haven’t added the upstream remote, go ahead and do so by following the step 1 instructions.


With your repository all set up, let’s check out the branch for this tutorial step’s starting point.

git fetch upstream
git checkout -b v11-react-step-5 upstream/v11-react-step-5

Note: This builds on top of step 4, but be sure to check out the upstream step 5 branch because it includes the static assets required to get through this step.

Build and start app

Install the app’s dependencies (in case you’re starting fresh in your current directory and not continuing from the previous step):


Then, start the app:

yarn start

You should see something similar to where the previous step left off.

Build for production

Before we deploy our app, we need to create an optimized production build with this command. You may need to CTRL-C to stop the development environment first.

yarn build

Looking at package.json, you’ll find yarn build to run react-scripts build. This builds the app for production to the build folder. It bundles React in production mode and optimizes the build for the best performance. It even goes so far to minify files and include hashes in filenames for caching.

As a lot of this may seem like magic since the build configuration came from Create React App, go ahead and check out their production build guidelines for a full description of what’s happening.

Deploying to Github Pages

Next we’ll be deploying to GitHub Pages which allows you to host your files directly from your repository in GitHub.

If you forked the tutorial earlier by copying only the main branch, you will have to create a gh-pages branch with the following steps. Otherwise, if you already have an existing gh-pages branch (you can easily check by going to your repository on and checking the existing branches), skip the following git commands.

To do this, we’ll first commit our build folder so that git knows we have a subtree (subfolder with our site).

git add build && git commit -m "chore(deploy): publish build files"

Then we’ll use subtree push to push to the gh-pages branch on Github.

git subtree push --prefix build origin gh-pages

To have GitHub Pages point to the gh-pages branch, go to your forked Carbon tutorial repository on Go to your “Settings” and under the “Pages” tab, specify the branch, gh-pages, as your source.

Screenshot of Github settings dashboard

Once you click save, you should be able to see your site published at the * link shown on the page.

Congratulations! Your work is now hosted on GitHub Pages!

Submit pull request

That does it! We’re going to submit a pull request to verify completion of this tutorial step.

Continuous integration (CI) check

Run the CI check to make sure we’re all set to submit a pull request.

yarn ci-check

Note: Having issues running the CI check? Step 1 has troubleshooting notes that may help.

Git push

Push to your repository:

git push origin v11-react-step-5

Note: Having issues pushing your changes? Step 1 has troubleshooting notes that may help.

Pull request (PR)