When I first learned about Git and GitHub (basically a version control system), I wondered why it's so important to upload code to a Git repository when we can just store it locally on our computers. But after working with Git every single day in my organization, I realize it's a lot more than just storing code on a remote repository. As developers, there's no way you can stay away from VCSs (version control systems), whether it's Git and GitHub or any other software. So, it's crucial for us to know how to upload code to a GitHub repository.

 

In order to upload (push) your project to GitHub, it involves multiple steps that need to be followed carefully. Initially, you may get confused with the process, but once you understand the underlying concepts, it becomes easy and interesting. Either you are familiar with Git and GitHub and need a quick refreshment, or you're a beginner who wants to understand all these steps from scratch, this tutorial has got you covered.

 

In this tutorial, first of all, we'll look at the quick steps to upload a project to GitHub for those who are quite familiar with the steps. Next, we'll go through all the steps in detail for beginners. If you just want a quick refreshment, jump to the first heading; otherwise, skip the first heading and start from the second heading, Detailed Instructions for Beginners on How to Upload Code to GitHub Let's get started.

 

 

Quick steps to push code to GitHub

 

If you have Git installed on your system and want to push an existing codebase to the GitHub repository, run the following commands in the root of your project directory:

 

git init

git add .

git commit -m "commit message"

git remote add origin <remote-url>

git push origin <branch-name>

 

Here's a quick explanation:

 

1. Initialize an empty git repository by running the git init command if you have not already done so.
2. Make sure to list unnecessary files and folders in the .gitignore file to exclude them from Git.
3. Add all files and folders to the staging area by running the git add . command.
4. Save the changes by running the git commit -m "your commit message" command.
5. Create a new remote repository on GitHub.
6. Copy the HTTPS URL of the remote repository and link it with your project by running the git remote add origin <remote-repo-url> command.
7. Finally, push the code to a remote repository by running the git push -u origin <branch-name> command. (The -u flag is optional and used to setup upstream.)

 

I hope you found these steps helpful for pushing your code to the remote repository. If you stumble somewhere with these steps, here are the detailed instructions for you.

 

 

Detailed Instructions for Beginners on How to Upload Code to GitHub

 

This tutorial is going to be a bit comprehensive; I would insist that you take a few minutes to thoroughly understand each of these steps. Once you understand the concepts, it will be easy to remember all these steps.

 

 

Prerequisites

 

There are several ways you can upload code to a GitHub repository, but the most common way is to use the command-line interface. Where you initialize an empty git repository and push your code using git commands. Think of a repository as just a folder; it's that simple. In order to play around with git commands, you need to first make sure to have the following prerequisites in your system:

 

• Git is installed on your system.
• A folder containing a few files and folders (basically, your project directory).
• An account on GitHub.

 

 

Once you're ready with the basic setup, follow the next step by step.

 

 

Initializing an empty Git repository

 

In order to play with git commands, we first need to initialize the repository in the root of the project directory. However, in some cases, the git repository might already be initialized. For example, it happens when you fetch or clone an existing project from GitHub or initialize a project using templates that come with a git repository already configured.

 

In order to check if the git repository is already initialized, run the following command:

 

git status

 

If the output is similar to fatal: not a git repository (or any of the parent directories): .git, it means the git repo (repository for short) is not initialized. The above command is used to check the status of recognized and unrecognized (referred to as staged and unstaged) files and folders by git.

 

Alright, if the git repo is already initialized, skip initializing; otherwise, run the following command:

 

git init

 

This command initializes an empty git repo and starts tracking changes in any file or folder. Once you initialize it, you will find a hidden directory called .git created inside the root of your project folder. Run the command ls -a to list all the files and folders, including hidden ones. Now, when you check the status, you'll see a list of files and folders that are untracked in red.

 

 

Preventing unnecessary and sensitive files from being tracked by Git

 

In your codebase, you'll often have files and folders that are either heavy, unnecessary, or contain sensitive information like database credentials, URIs, and secret keys. For examples, node_modules/, build/, vscode/, .env, .DS_Store, *.log, *.temp, etc. In order to keep the repository clean and lightweight, it must ignore these types of files and folders from being tracked, stagged, and committed in git.

 

In order to instruct Git to ignore these files and folders, we need to list their names in a file called .gitignore. When you initialize your project using certain templates (like create-react-app or npm create vite), you may already have this file created inside the root of the project. Whichever files or folders are specified in this .gitignore file will be ignored by git.

 

Here's an example of a .gitignore file for a react project initiated using vite:

 

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

 

Make sure not to specify the .gitignore file name itself inside the .gitignore file, as it's a crucial file to store inside a git repo. Now, whatever files and folders are specified in this file will not appear when you check the status, as git is not tracking them.

 

 

Adding and Committing files and folders to the Git

 

Once you initialize the git repository in your project directory, all the files and folders, except those specified in the .gitignore file, are being tracked by the git. When you check the status, you'll see a list of untracked files in red and tracked files in green.

 

The process of storing files in a git repository involves two main steps: adding files to the staging area and committing those files to the repository. Let's understand both of these concepts individually.

 

1. Adding Files to the Staging Area

 

Before saving files in the repository permanently, Git stores untracked and modified files and changes in an intermediary space called the Staging Area. The purpose of the Staging Area is to combine multiple changes to your project in an intermediate zone before saving them to the repository. It helps to group related changes to store them as one cohesive version of your project.

 

Let's understand this with an example:

 

Suppose your project contains a file named home.html. After initializing an empty git repo, since this file is unknown to git, it'll be listed in red as an untracked file when you check the status. Once you add this file to the staging area, you'll see this file in green when you check the status. Now, let's say you create another file called about.html and want to include it in the repository as well. You can add this new file to the Staging Area alongside the home.html file.

 

In order to add the files to the staging area, run the following command:

 

git add <file-name>

// for example
git add home.html
git add about.html

 

In order to save all modified files and folders, use a dot (.) instead of specifying individual file names, like this:

 

git add .

 

Now that you understand the staging area, let's commit changes to the repository.

 

2. Committing Files to the Repository

 

The process of storing all the changes from the staging area to the repository permanently is known as Committing. Every time you commit changes to the repository, it creates a separate version of your project. When you commit changes, you need to provide a commit message to describe the changes. 

 

As per our previous example, the staging area contains two files; home.html and about.html. When you commit these files, the staging area will be empty, and changes will be permanently stored in the repository as a specific version.

 

Here's how you can commit the changes:

 

git commit -m "your commit message"

// for example
git commit -m "saving home.html and about.html for first time"

 

After committing changes, these file names will no longer appear when you check the status, unless they are modified again. You can now make changes to your project, check the status, add them to the staging area, and finally commit them to the repository.

 

So far, we've stored our code in a local repository that we initialized earlier. Now, we need to upload this code to GitHub, which is known as a remote repository. In order to do this, we first need to create an empty remote repository on GitHub.

 

 

 

Creating a Remote repository on GitHub

 

In order to create an empty remote repository on GitHub, follow these steps:

 

1. Login to your account on GitHub.
2. Click on the plus icon (+) on the right side of the header and select New repository (or click here).
3. Enter the repository name.
4. Select either public or private based on your preference.
5. Click Create Repository (do not select the Add a README file checkbox).
6. Copy the https URL for further use.

 

You've successfully created an empty remote repository on GitHub, and you'll see a list of the commands we've learned so far. The reason behind not adding a README file at this point is to avoid conflict between the local and remote repositories, since we've first created our local repository, which doesn't have this file.

 

 

Adding and updating a remote repository URL

 

In order to push the code from your local repository to the remote repository, we first need to link the URL of the remote repository, which you created. Additionally, to link the remote with the project, you need to specify the name of the remote for further actions. So, instead of writing a remote URL each time, you can use the given name for all the actions. Here's how you can set the remote:

 

git remote add <remote-name> <remote-url>

// for example
git remote add origin https://github.com/<username>/<repo-name>.git

 

Although you can use any name for your remote, origin is commonly used as it is the default name provided by GitHub and is convenient to use. You can always rename your remote. Additionally, you can also update and remove the remote. Here are more operations related to git remote (considering the remote name is set to origin):

 

// Rename remote
git remote rename origin newname

// View current remote
git remote -v

// Update remote
git remote set-url origin <new-git-repo-url>

// Remove remote
git remote remove origin

 

Alright, it's time to push the code to your remote repository on GitHub.

 

 

Pushing Code to GitHub

 

Once you've created and added the git remote to your project, it's time to push the committed changes from the local repository to the remote repository. When you push the code, the local commits will be uploaded to the remote repository. Until you set up an upstream branch, you'll also need to specify the branch name. Here's how you can push your code:

 

git push <remote-name> <branch-name>

// for example
git push origin main

 

Branch in Git is a whole topic to explore, but for now, note that main is the default branch for the remote repository. So make sure you're pushing the code from the main branch of your local repository. Additionally, you can use the -u flag in your first push to set up an upstream connection between your local and remote repositories. It means that when pushing for the first time, if you use the -u flag, you don't need to specify branch and remote name again for next operations. Here's an example:

 

git push -u origin main

 

This is how you can push your committed changes to the remote repository. Whether you are uploading your code for the first time or pushing changes, the steps remain conceptually the same. It's important to understand the concepts behind these commands and steps.

 

 

Takeway

 

The process of uploading your code to GitHub involves multiple steps, including initializing a local repository, creating a remote repository, linking the remote repository, committing changes, and pushing them to the remote repository. Certain steps are only required when you're pushing for the first time, while others are used each time you push code to GitHub. Once you're clear about the process conceptually, it seems straightforward.

 

This is a basic but comprehensive guide on how to upload your code to GitHub. By following these steps, you can efficiently manage your codebase and collaborate with other teammates. If you enjoy reading this tutorial and find it insightful, please share it with your friends and teammates and start contributing to each other's projects. Additionally, feel free to leave your feedback in the comment section.