Exercise Tuesday

The master version of our Hello World website is saved on the machines that we used to code the HTML file, hello-world.html. It is also being tracked by Git in the local .git repository. When we want to publish our code to the world (or just save it on the cloud so we can access it from any device), we want to store it in a remote repository. In this lesson, we'll dive in to using GitHub to store our code remotely.

First, let's talk about the difference between local and remote. When we talk about a local repository, we mean one that is accessible only when using the device where it is saved. For example, the projects that you build on Epicodus machines have local .git repositories. If you want to see your code on another device, you will not be able to access it. A remote repository is one that is saved in a location outside of your device but still accessible by it. We will be saving our code remotely to repositories on GitHub.

Let's copy our local .git repository to a remote repository on GitHub now.

Creating a GitHub repository

First, we need to create the remote repository on GitHub. Each pair partner creates a remote repository using their own GitHub account.

GitHub new repo button

Once logged in, we'll select the New Repository or New button to go to the Create a new repository screen:

GitHub new repository

Let's walk through the options we need to complete for our new repository.

First, we enter the repository name that matches the name of our project directory. For this project, we'll enter "hello-world". Though the description is optional, it can be helpful to our future selves and anyone else looking at our repository to see a quick description of its content.

Since we are using free GitHub accounts, Public is the only option for our repositories. As it notes, everyone can see the contents of the repository but as the owner of it, you will be the only person who can determine what code can be committed to it.

The last option asks whether or not to initialize the repository with a README. A README file is a detailed description of the repository including information like authors, usage instructions and licensing. Do not check this box. We will be exploring what a README is and how we add it to our repositories in a future lesson.

Pushing to GitHub

With an empty repository awaiting our code, we can now follow the steps to push our code from our local repository to the remote repository.

In our project directory, we will make sure our code is working. In this case, we open it in the browser and it looks good. We also ensure that there aren't any outstanding changes that we still need to commit:

$ git status

Now we need to tell Git where our remote repository is by providing the web address. We'll use the git remote command.

$ git remote add al https://github.com/ada-lovelace/hello-world

This command tells Git to store information about a remote repository that we gave the nickname, al (the initials for one partner - Ada Lovelace) located at https://github.com/epicodus-lessons/hello-world. We could use any nickname for the remote but we've chosen al for brevity and to be consistent with the initials we are using as pairs.

Note that your command should contain the URL location for your GitHub repo. Ours is https://github.com/epicodus-lessons/hello-world in the example above, but yours will likely differ.

To see that Git has done this successfully, we can run this command:

$ git remote
al https://github.com/ada-lovelace/hello-world

This shows us all the remotes stored in Git for this project. In this case, we only have one, with the nickname al.

To push our code, which means we are copying it from the local to the remote, we run this command:

$ git push al master

This indicates that we should push code to the remote with the nickname al from the master. We haven't used the word, "master", before but this is the name Git uses for the main Git repository on our local machine. In the future, we'll see that we can have many copies of a repository on our local machines all in different stages of development. The master is always considered the master copy.

For security reasons, only the owner of the remote GitHub repository is able to push code to it. This means that we need to enter our login information to confirm our ownership. Once entered, the code is copied to the GitHub repository and we can see it online if we go to our GitHub repository URL https://github.com/ada-lovelace/hello-world. We can see the file structure and the commits in GUI form that we saw in our terminal.

Cloning from GitHub

So, how do we get our code back to our local from the remote? What if we push our code up to GitHub at Epicodus and want to work on it at home on our personal devices? To do this, we'll need to clone our GitHub repository on our local machines.

To practice this, let's delete our hello-world project directory and clone it again from GitHub. To delete a whole directory, we can't be in it so we'll go up a directory level and then remove it:

$ cd ..
$ rm -rf hello-world

Poof! Gone. Now, if we want to copy it in the exact same location from GitHub, we get the URL for the remote repository and run:

$ git clone https://github.com/ada-lovelace/hello-world

Now, an ls shows us our directory is there with our code file in it. Let's go into the project directory:

$ cd hello-world

If we do a git log, we see that our commit history arrived with our directory and code.

If we run git remote, we also see that our newly created local .git repository is automatically linked - with the nickname origin - to the remote repository from which we cloned.

$ git remote
origin

If we make changes to the code and want to push again, we would be able to use the origin nickname that came with the repository from GitHub (e.g. git push origin master).

Note: only one location can be designated with the nickname "origin". So, if we clone one project but want to push to two different repositories, they cannot both be nicknamed "origin". That is another good reason to use your initials as the nickname of the remote repository.

Whew! This has been a mountain of Git concepts and terminology to explore. Don't try and memorize this information. Use the cheat sheets for reference to walk through set up and usage in your projects to come. Before you know it, it'll become ingrained in your daily workflow.

Be sure that you are not cloning a project inside of an existing local repository. In other words, you should not be inside of a project directory when you run the git clone command. Otherwise you'll end up with one git repository inside of another.

Forking

If you're working with a pair (and at Epicodus, you usually are), you might get a little jealous with all your co-authored code showing up on your pair's Github account. Don't worry, you can add the project to your account by forking the repository.

When you're done working on a project with your pair and you've made your last push to your pair's account, visit the repository on Github (eg https://github.com/your-pairs-name/hello-world). In the upper right corner, click Fork. Now you'll have a copy in your account.

If you one of you makes a new commit and pushes it to your account, the change won't be reflected in the other one's account. You'll learn later how to keep your forked repositories in sync.

Copying a Project

Alternatively, if you want to have the project show up in your account as a repository and not as a fork, you can clone the project from your pair's account and then push it to your account. You'll need to remove the remote and add your own remote to do this. Here are the steps:

  1. Go to the account of the person that currently has the repository for the project. Clone the project to your desktop.
  2. Create a new project in your Github account. Then click the green "Clone or download" button and copy the link provided.
  3. Go to the top level of the project directory of the project you cloned (from your pair's repository) in the terminal.
  4. Check the remote repository with the command git remote -v. You'll see something like this:
origin  https://github.com/OWNER/REPOSITORY.git (fetch)
origin  https://github.com/OWNER/REPOSITORY.git (push)

The first word is the one you are looking for. This is the identifier for the remote. In this case, it's origin, but it might be the owner's initials or something else. 4. Enter the command git remote rm origin if the identifier is origin. Replace origin if the identifier is something else. So if the identifier is fpk, you'd do git remote rm fpk. 5. Confirm that the remote has been removed by entering git remote -v again. Nothing should show up. That means the remote has been removed. If it hasn't been removed correctly, return to step 4. 5. Enter git remote add origin [your-project-url-here]. You can use an identifier other than origin. Make sure that you put in the project URL that you copied from the repository you created in your account here. 6. You can confirm that the new remote is correctly linked with git remote -v. 7. Once the remote is correctly linked to the repository in your account, you can push the code to your repository.

In order for your contributions to show up in Github (you'll learn more about Github contributions soon), you'll need to add any repositories where you have contributions to your account. Either forking or copying the project to your account will ensure that the project shows up in your Github contributions. They'll also be easily available for you to use and for others to see in your account. This is also helpful if you need access to a repository later - either because you want to work on it further or if you want to use it as a learning reference. If the original repository is deleted by your pair, you won't lose access as well.

Make sure you always fork or copy over projects you work on at the end of the day.

Terminology


  • Local: In Git terms, local means located on the device that you are using.

  • Remote: In Git terms, this means located outside of the device you are using; for example, GitHub.

  • README: A file that provides more details information about a GitHub repository's code.

  • Push: Copy the code from a local Git repository to a remote repository.

  • Master: The master copy of a Git repository on a local machine, also known as the master branch.

  • Clone: To make a copy of a repository from Github on a local machine.

  • Origin: The default nickname given to the GitHub remote repository when it is cloned.

Git Remote Commands


  • $ git remote add [remote name] [remote URL]: Sets up a new remote location with a name and location.

Example: This command adds a new remote called "al" located at "https://github.com/epicodus-lessons/hello-world":

$ git remote add al https://github.com/epicodus-lessons/hello-world
  • $ git remote -v: Shows the names and URLs for all of the remote repositories that the project's Git repository has stored.

  • $ git push [remote name] [branch name]: Copies the code to the remote repository from the local Git repository.

  • $ git clone [remote URL]: Copies the code and commit history from a remote repository to a local repository.

Tips


  • Be sure that you are not cloning a project inside of an existing local repository. In other words, you should not be inside of a project directory when you run the git clone command. Otherwise you'll end up with one git repository inside of another.