Push your app to GitHub

Originally created by Alyson La, @realalysonla

This guide is a part of the Rails Girls workshop main guides. Make sure you follow the numbered guides in order before continuing.

Git is a tool with which it’s possible to save your app’s source code, view changes over time, share code online and collaborate with others.

Help from the coach

Talk a little about Git, version control, collaborating with others using Git, GitHub, deployment techniques using Git and Open Source.

Installing Git

Before working with Git, we first need to check if Git is already installed. In the terminal type the following command:

git --version

The output should mention Git version 1.8 or higher. If it is not installed (indicated by a “command not found” or similar error), or the version is lower than 1.8, please install or upgrade Git.

Run this command in the Terminal to install or upgrade Git on macOS.

brew install git

Follow the instructions for your Operating System in the Git documentation.

Please install Git by going to the Git website, download the Git installer for Windows and running the downloaded installer.

After installing or upgrading, run the git --version command again to make sure you are using a more recent version.

Configuring Git

Once we’re sure Git is installed, we can set up our local profile in Git. This profile will be used to describe who made the changes to files we’ll store in Git. You can see who made which change and when.

Change “your name” and “your email” with your name and your email address. You can also use a nickname or an alias if you don’t want to use your real name and email address. Be aware: the name and email address you configure here will be visible to others!

git config --global user.name "your-name"
git config --global user.email "your-email"

To check if a profile is already set up in Git, you can run this command, and look for the user.name and user.email values in the output:

git config --list

Saving work in Git

Open the Terminal app, navigate to your railsgirls app directory and run the following command. This will list out all the changed files in your app directory, which should be all the files for your app.

git status

We want to save all these files in Git so they can be pushed to the GitHub repository you just created. By running the following command you will add all those files staging area in Git, ready to be saved (committed).

git add .

The git commit command shown below will save the staged files in Git, along with the message “First commit”.

git commit -m "First commit"

(The -m in the above command stands for “message”.)

Create a GitHub account

GitHub is a free, online, code-sharing platform. It is a hub for source code saved in Git. We will use this to save and share our app’s source code.

Visit the GitHub website and create an account or login if you already have an account at Github.

Securely sharing your code with GitHub

The easiest method for managing authentication is creating a Personal Access Token (PAT) that will have matching parts stored on your computer and also on the GitHub site.

Because you are trying to get the code on your computer into your account on the GitHub website, you’ll need to connect via the internet. GitHub offers connections over HTTPS and SSH. Using a Personal Access Token (PAT) requires that you use an HTTPS connection. This will be important in the next section, when you’ll create your PAT.

Push your app to GitHub using the command line (part 1)

Now that you have a GitHub account, you can push (Git terminology for upload) your saved work to GitHub and share it with others.

Once signed in to GitHub, click on the plus icon (+) in the top right corner of the navigation bar. In the dropdown, choose “New repository”. Having trouble finding the right link? Visit this new repository page directly.

On the “Create a new repository” page, enter a repository name (like “railsgirls”), choose “public” for the repository’s visibility and click the “Create repository” button. Leave the rest of the form untouched.

The next page will list the repository URL we will need to tell Git where to push your app’s source code to.

Be certain you are viewing the instructions for HTTPS, so that it will work with the PAT. In the top “Quick setup” section, click on the “HTTPS” button if it is not already selected, and see that all the instructions change the links to start with https.

You should use the “push an existing repository from the command line” instructions. Within that section, find the line that starts with git remote add origin. Copy the entire line and paste it into the Terminal app. Then press enter.

This step creates a Git remote, a connection, named “origin” pointing to the GitHub repository you just created in the local repository.

Create the Personal Access Token

Next you need to create the PAT.

You can access your GitHub personal access tokens here: https://github.com/settings/tokens. Or, when you are logged in to GitHub, you can start on any page and click on your avatar in the top right. Then click “Settings”, then “Developer settings”, then “Personal access tokens”, then “Tokens (classic)”.

Once you are on the “Personal access tokens (classic)” page, click on the “Generate new token” dropdown menu and select “Generate new token (classic)”. If you have set up two-factor authentication in your GitHub account, you will need to 2FA authenticate now.

When you can see the “New personal access token (classic)” form, use the “Note” to describe this repo (e.g. “RailsGirls”) and then select an expiration date. (If you plan to use this project beyond the expiration date, you’ll need to repeat these steps when the PAT expires.)

Then, for scopes, select the top “repo” checkbox, that gives the PAT “Full control of private repositories”.

Click “Generate token” at the bottom of the page.

On the next page you’ll see your PAT. This is the only time you’ll have access to it, so don’t click away from this page until you have completed the push step in the next section.

Copy and save the PAT token, ideally in a secure password manager. Be careful not to copy any spaces before or after the token – you can use the two-squares copy button at the end of the token to be certain. You can keep the browser window open until you’ve completed the next step.

Push your app to GitHub using the command line (part 2)

Now we want to push the local changes in the Git repository to the repository on GitHub with the following command in your terminal.

git push -u origin master

Your app’s branch name may be different, like main. Change the “master” argument to the branch name listed in git branch. Your current branch is indicated with the * symbol at the start of the line.

When the authentication prompt appears in your terminal, use your PAT as the password, example below. Note that when you paste your PAT in the password, it will not show. Don’t paste again, or you will be entering the token twice.

Username: <your GitHub username>
Password: <paste in your personal access token>

You may need your PAT every time you want to push your code, or you can save the PAT on your computer. This process varies per operating system, so your coach can help you with this process if you plan to keep pushing your code to GitHub.

Help from the coach

Please help with caching the PAT, if the participants wants to. Find the latest guide for their operating system, or check out this guide for storing the PAT on different Operating Systems.

Congratulations your app is on GitHub! Refresh the page in the Browser and you should see a bunch of files there now.

Saving more changes in Git

If you want to continue making changes and pushing them to GitHub you’ll need to use the following three commands.

Add changes you want to save in Git to the staging area:

git add .

Save the changes with a commit message:

git commit -m "Type your commit message here"

Use a descriptive message so you can find back what you changed in which commit and why.

Help from the coach

Talk about what makes a good commit message (active, descriptive and short).

And push the changes to GitHub:

git push origin master

Your app’s branch name may be different, like main. Change the “master” argument to the branch name listed in git branch. Your current branch is indicated with the * symbol at the start of the line.

What’s next?

Learn more about Git

Be a part of the Open Source community


If you’re ever stuck during a guide, please ask your coach for help and also consult this handy cheatsheet for Ruby, Rails, the console, the Text Editor etc.

Guides

View all guides