How do I get my Code on GitHub?

Let's now talk about how can we can take our local git repo on our machine & how do we connect them in some way to a hosted GitHub repo.

• How do we connect them
• How do we set up the repo on GitHub
• What do we do to tell our local machine about our GitHub repo.

There are majorly 2 approaches to do this!

Option 1: Existing Repository

If we already have an existing repo locally (ie... on our machine) that we want to get on GitHub, these are the steps to follow:

Step-1: Create a new repo on GitHub.

If we recall from the previous blog, we made a local repository named ProjectOne (or any other if modified) using the git init command.
we'll push this existing local repo onto GitHub.

Let's make an empty GitHub repo first:

• Go to your github profile, Click on the New button on the top left side of the screen. or click on the + button on the top right corner of the screen

• Then, give your repository a name. I'm creating it by the name github-demo-one & I'm keeping it public.
  I'm not giving it any description & a README file though we should prefer giving repos a description & a README file if we plan on collaborating with people or just in general as well. It's a good practice. Now, click on Create repository. It must be looking something like this 👇 (with your own username)

Step-2: Connect your local repo (add a Remote)

Alright! Before we can push anything up to GitHub, we need to tell Git about our remote repository on GitHub.

• We need to set up a "destination" to push up to. In Git we refer to these destinations as "Remotes".

• Each remote is simply a URL where a hosted repository lives.
  

  Command to view any existing remotes in our repo:
  $ git remote -v

• Let's first get into our existing repository: Opened git bash on desktop, used cd to get into gitdemo directory -> used ls to see contents of directory -> used cd to get into ProjectOne directory.

SO, at this point, we have not configured any Remotes in our local repo. When I run the git remote command, we see no message is displayed.

• Adding a Remote:
  A remote is really 2 things: a URL & a label.
  So, git remembers this URL by the help of the name/label we give.

  Command is:
  $ git remote add <name> <URL>

The standard name is 'origin'. It is just a conventional Git remote name, but it is not at all special. It is just a name for a URL. We can give any name to it.

So, if you were following along the blog, you must have made your own empty GitHub repo. Just copy that Repo's URL. Now we'll ad a remote:

• Here we used git remote add command to add the URL of our GitHub's repo to our existing repo on local machine and assigned it the name - "origin".
• Now when we run git remote -v command it shows us the GitHub repo's URL we added.

Now we'll push our local repo to "origin"(just a name given to that URL)

Step-3: Push up your changes to GitHub.

To do this we use git push command. Here we need to specify the remote we want to push up to AND the specific local branch we want to push up to that remote.

$ git push <remote> <branch>

As I mentioned earlier, GitHub decided to rename its default branch to "main" instead of "master". We will also do this via command:

$ git branch -M main

Now, we'll finally push our changes to GitHub:

$ git push origin main

We can see the changes are added to our GitHub repo's main branch including the "commit messages" as well. Checkout the repository here

Option 2: Start from Scratch

If we haven't begun work on our repository on our local machine, these are the steps to follow:

Step-1: Create a brand new repo on GitHub.

Follow Step-1 of Option-1 above as it is & create a repo on GitHub.

I've made the repo named github-demo-two & added a Readme.md file as well this time.

Step-2: Clone it down to your machine

Now we'll open git bash, and make a new directory in which we want to clone our GitHub repo. Inside the gitdemo directory I created another directory named cloning and clone the GitHub repo in it. We can see that it is NOT a git repository, yet.

Cloned the repository github-demo-two in this dir.

Now, when I got into github-demo-two dir, it now shows as a git repository.

Step-3: Do some work locally

As you can see,

• I modified README.md file & created and added changes to index.html file.
• Then, committed the changes as well.

Let's push these changes onto the GitHub repo!

Step-4: Push up your changes to GitHub

After running git status we can see the message

Your branch is ahead of 'origin/main' by 2 commits.

which means we are currently on the main branch and our remote is origin

Pushing changes to GitHub!

$ git push origin main

Now, we can see all the changes with commit messages on GitHub as well!

Checkout the repository here

Congratulations!! We've successfully made our first GitHub repository and learned how to push all the changes there. 🥳🥳🥳

I hope this Blog didn't make any reader feel overwhelmed. Making a GitHub repo is our first step towards making several Opensource contributions & other important things which includes displaying your Projects while you're learning, doing collaborations, working on side-projects and much more! ✨

Keep pushing your code to GitHub & keep making contributions to the community. Be proud of how far you've come. Best wishes! 😊🙌