Ready Set Go

Table of Contents

1. Create a GitHub Account
2. Create a GitHub Repository
3. Clone Your GitHub Repository
4. Push Your Code to GitHub
5. Create a Production Build
6. Publish Your App to GitHub Pages
7. Deploy Your Build to GitHub Pages

Create a GitHub Account #

You need a place to store your code and GitHub is pretty much the defacto code repository on the web. You'll use the git version control system to manage your code repositories—repositories which you'll store in GitHub. Let's sign up at GitHub Signup and follow the steps to set up an account.

Let's create our first GitHub repository! There should be a green button on your GitHub homepage labeled "New". Click it to create a new repository or click here to save a few keyboard strokes. Give your repository a name and set it to "public". No need to bother with any of the other settings for now.

You'll want to save your app to your computer and sync it to GitHub. So, we'll create a folder for our app and we'll clone our GitHub repository to the same folder.

To clone your repository, go to your repository on GitHub and, on the "Code" page there's a green "Code" button. Clicking it will present a dropdown menu with a "copy to clipboard" button for your repository's GitHub URL. We'll use this URL, along with the "git clone" command, to clone our repository locally so we can develop our changes locally using all of the wonderful capabilities provided by a version control system known as git. To learn more about git, check out their documentation.

  # Create and access a directory for your app
  
  mkdir my_app
  
  cd my_app

  # Clone your repository
  
  git clone 
  

Refer to the Create React App tutorial for creating your new React app. Make sure you're still in your "my_app" directory when creating your new React application. Once you're ready to save your changes, save them locally and then push your code to GitHub. See below for example code you can use to stage, commit, and push your changes to GitHub.

  # Stage all of your changes
  
  git add --all
  
  # Commit all of your changes and add a message"
  
  git commit -m "my_app - initial commit"
  
  # Push your code!
  
  git push
  

The production build is an web optimized version of our app. This is the version we'll post to GitHub Pages. Production builds improve load time which makes for happier users. So run that build and get ready to deploy your app.

  # Create your product build
  
  npm run build
  

For a more in-depth understanding of GitHub Pages, please read the documentation, but if you're looking for the TL;DR, then you should know that deploying your application from a GitHub repository to GitHub Pages is, as you should expect, very easy. Simply go to "Settings" and "Pages" page, select "Deploy from a branch" as your "Source" and pick a branch from the "Branch" dropdown which will be used to build your application.

From here on out, to deploy your changes to GitHub Pages, just follow the previous steps (i.e., stage, commit, push, build) and if you'd like to publish updates to your GitHub Pages page from the comfort of your terminal, just install the NPM package called gh-pages and set up a package.bash "deploy" script to push your code to your GitHub Pages page as is illustrated below. Godspeed!

  # Deploy your build to gh-pages
  
  npm run deploy

  😎