How to Push Code to GitHub
Have you ever wondered how to share your coding projects with the world? Pushing code to GitHub starts with initializing your local directory as a Git repository, committing your code, and then linking this local repository to GitHub with git remote add. Finally, you use git push to upload your work, making it accessible to a global community of developers. Let's understand more!
GitHub is a developer platform that supports version control and collaboration for coding projects. It runs on Git, a distributed version control system created by Linus Torvalds, the founder of Linux. GitHub enables developers to store their code repositories online, simplifying the process of tracking changes, working together on projects, and sharing work with others.
Best-suited Github courses for you
Learn Github with these high-rated online courses
Step-By-Step Guide on How to Push Code to GitHub
Let's understand one by one below.
A. General Steps
Pushing code to GitHub involves a series of steps that enable you to upload your local repository to a GitHub repository. Let's see below:
1. Install Git
Download and install Git. During installation, accept the default settings unless you have specific preferences.
2. Configure Git (First Time Setup)
Open your terminal or command prompt and configure your user information for Git using the following commands:
git config --global user.name "Esha Gupta"git config --global user.email "esha34gupta@gmail.com"
Replace "Esha Gupta" and "esha34gupta@gmail.com" with your actual name and email address.
3. Create a Local Repository
Navigate to the directory where your project is located and initialize it as a Git repository (if not already done):
cd /path/to/your-projectgit init
4. Add Files to the Repository
Add your project files to the repository. You can add individual files using:
git add filename
Or add all files in the directory with:
git add .
5. Commit the Files
Commit your added files to your local repository:
git commit -m "Initial commit"
Replace "Initial commit" with a meaningful message describing what you are committing.
6. Create a Repository on GitHub
- Go to GitHub and sign in.
- Click the "+" icon in the top right corner and select "New repository."
- Name your repository, add a description (optional), and choose whether it's public or private.
- Click "Create repository."
7. Link Your Local Repository to GitHub
Copy the URL of your newly created GitHub repository. Then, link your local repository to GitHub with:
git remote add origin <REPOSITORY_URL>
Replace <REPOSITORY_URL> with the URL of your GitHub repository.
8. Push Your Code to GitHub
Finally, push your code to GitHub with:
git push -u origin master
If your main branch is named "main", use the following:
git push -u origin main
9. Subsequent Pushes
For any subsequent pushes after the initial push, you can simply use:
git push
These steps cover the basics of pushing code from a local repository to a GitHub repository.
B. Using Visual Studio Code
Let's understand how to push code to GitHub using VS Code with an example.
Suppose we have the HTML code below that we want to push on GitHub.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Esha Gupta - Product Manager</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 0; } .container { max-width: 800px; margin: auto; padding: 20px; } .header, .footer { text-align: center; margin: 20px 0; } h1 { color: #333; } p { margin: 10px 0; } ul { list-style: none; padding: 0; } li { margin: 5px 0; } </style></head><body> <div class="container"> <div class="header"> <h1>Esha Gupta</h1> <p>Product Manager at XYZ Company</p> </div>
<section id="bio"> <h2>Bio</h2> <p>Esha Gupta is an experienced Product Manager with a proven track record of bringing innovative products to market. With a passion for technology and design, Esha has successfully led cross-functional teams to achieve company goals and enhance user experiences.</p> </section>
<section id="skills"> <h2>Skills</h2> <ul> <li>Product Lifecycle Management</li> <li>User Experience Design</li> <li>Market Analysis & Strategy</li> <li>Agile & Scrum Methodologies</li> </ul> </section>
<section id="experience"> <h2>Experience</h2> <p><strong>Senior Product Manager</strong> - XYZ Company</p> <p>January 2018 - Present</p> <ul> <li>Led the development of a new mobile application that increased customer engagement by 30%.</li> <li>Collaborated with engineering, marketing, and design teams to define product roadmaps and release schedules.</li> <li>Conducted user research and usability studies to gather feedback and inform product improvements.</li> </ul> </section>
<section id="contact"> <h2>Contact</h2> <p>For collaboration or inquiries, please reach out:</p> <p>Email: esha.gupta@example.com</p> </section>
<div class="footer"> <p>© 2024 Esha Gupta</p> </div> </div></body></html>
Output of this code:
This is a basic portfolio page for a person named "Esha Gupta".
Let's see how to push this above-given code on GitHub.
Step 1: Install Git and VS Code
Install Git: Download and install Git if not already done using https://git-scm.com/
Install VS Code: Download and install VS Code using https://code.visualstudio.com/
Step 2: Configure Git
- Open your terminal or command prompt.
- Set up Git with your user name and email address using the following commands:
git config --global user.name "Shiksha Online"git config --global user.email "content.shikshaonline@gmail.com"
Step 3: Create a GitHub Repository
- Go to GitHub and log in or sign up.
- Click on the "New" button to create a new repository.
- Name your repository (e.g. "esha-gupta-portfolio").
- You can leave it public and initialize without adding a README, .gitignore, or license.
Click "Create repository."
Step 4: Push Your Code from VS Code
- Open VS Code and use File Explorer to open the folder containing your esha.html file for the Esha Gupta portfolio.
- Open the Integrated Terminal in VS Code by going to View > Terminal or using the shortcut Ctrl+`
- Initialize a Git Repository: In the terminal, type:
git init
This initializes a new Git repository locally in your project folder.
- Add Your HTML File to the Repository by typing:
git add esha.html
It is done to stage your HTML file for commit. If you have other files or directories to include, you can use the following to add everything in the current directory.
git add .
- Commit your staged files to your local repository by typing:
git commit -m "Initial commit. Added portfolio page."
- Go back to your GitHub repository page. You will see a quick setup section with a URL. Copy that URL.
- In the VS Code terminal, link your local repository to GitHub with the command:
git remote add origin https://github.com/shikshaonline1/esha-gupta-portfolio
- Type the following to push your commits to GitHub.
git push -u origin master
- If your main branch is named main (GitHub's new default), use the below command instead.
git push -u origin main
Step 5: Confirm Upload
After pushing your code, refresh your GitHub repository page. You should now see your esha.html file and any other files you committed.
Thus, I hope with the help of this blog, you learnt how to push code to GitHub!
Pushing code to GitHub is a fundamental skill for developers. It enables them to share their work, collaborate with others, and contribute to the open-source community.
Check out GitHub courses here!
FAQs
What is GitHub?
GitHub is a developer platform for version control and collaboration, allowing developers to store, manage, and track changes to their code projects.
What do I need to push code to GitHub?
You need Git installed on your computer, a GitHub account, and an initialized local Git repository for your project.
How do I install Git?
Download the latest version of Git from git-scm.com, and follow the installation instructions for your operating system.
How do I configure Git with my user information?
Use the following commands, replacing Name and email@example.com with your details:
git config --global user.name "Name"
git config --global user.email "email@example.com"
How do I create a new repository on GitHub?
Log into your GitHub account, click the "+" icon in the top right corner, select "New repository," fill in the details, and click "Create repository."
How do I initialize a local Git repository?
Navigate to your project directory in a terminal and run git init
How do I add files to my local repository?
Use git add . to stage all current directory files for commit, or git add <file> to add specific files.
How do I commit changes in my local repository?
After adding files, commit them using git commit -m "Commit message", replacing "Commit message" with a brief description of your changes.
How do I link my local repository to my GitHub repository?
Use git remote add origin REPOSITORY_URL, replacing REPOSITORY_URL with your GitHub repository's URL.
How do I push changes to GitHub?
After committing your changes, push them with git push -u origin main (if your branch is named main).
What if I get an error saying "remote origin already exists"?
This means you've already set up a remote repository. You can change it with git remote set-url origin REPOSITORY_URL or push using the existing remote configuration.
How do I view my remote repositories?
Run git remote -v to list the URLs of remote repositories connected to your local repository.
What is the difference between git push and git push -u origin main?
- git push -u origin main sets the upstream for your branch, linking it to a remote branch, which allows future pushes and pulls with just git push or git pull
- git push alone pushes changes to the linked upstream branch.
How can I push a new local branch to GitHub?
First, check out your new branch with git checkout -b new-branch-name. After making changes and committing them, push with git push -u origin new-branch-name
What do I do if my push is rejected?
A push can be rejected if the remote branch has updates that you don't have locally. First, pull the latest changes with git pull and resolve any conflicts. Then, try to push again.
Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio
Top Picks & New Arrivals
