Introduction
Hey there, Everyone! ๐ It’s fantastic to have you back for another thrilling chapter in our journey towards mastering Git and GitHub. We’ve already embarked on quite an adventure together, haven’t we? From discovering the power of GitHub Actions in Part-1 to mastering the fundamentals of Git in Part-2, you’ve made impressive strides! ๐
But brace yourselves, because today, we’re about to take a giant leap forward. ๐ That’s right, we’re stepping into the dynamic world of GitHub repositories! ๐๏ธ
Now, you might be thinking, “Repositories? ๐ค That sounds a bit complex.” But trust me, once you get the hang of it, you’ll find managing your projects and collaborating with others on GitHub to be a breeze. ๐ช
In this comprehensive guide, we’ll cover everything you need to know about setting up your first GitHub repository. We’ll start by understanding what GitHub is and why it’s such an essential tool for developers. Then, we’ll walk through the process of creating your own GitHub account and setting up your very first repository. ๐ง
But that’s not all! We’ll also delve into connecting your local repository to GitHub, pushing your code, and using VS Code to streamline your workflow. ๐งโ๐ป And to top it off, we’ll explore creating and managing pull requests, a key feature for collaboration and code review. ๐ค
So, grab your favourite beverage โ, settle in, and get ready to elevate your Git and GitHub skills to new heights. By the end of this guide, you’ll be well-equipped to manage your projects with confidence and collaborate like a pro. ๐
Creating a GitHub Account
Before we dive into setting up your first repository, let’s start with the basics: creating a GitHub account. If you already have an account, feel free to skip ahead to the next section. For those of you who are new to GitHub, follow these simple steps to get started.
Step 1: Visit GitHub
Head over to the GitHub website. You’ll be greeted with the home page of one of the most popular platforms for developers. ๐
Step 2: Sign Up
Click on the Sign up button located at the top right corner of the page. You’ll be directed to the registration page.
Step 3: Enter Your Details
Fill in the required information:
- Username: Choose a unique username that you’ll use to log in and identify yourself on GitHub.
- Email Address: Enter a valid email address that you’ll use for account recovery and notifications.
- Password: Create a strong password to secure your account.
You’ll also be asked about your email preferences, such as whether you would like to receive occasional product updates and announcements.
Next, you’ll need to verify your account to make sure you’re human by completing a basic verification process.
Once you’ve filled in the details, click on the Create account button. ๐
Step 4: Verify Your Account
GitHub will send a verification email to the address you provided. Head over to your email inbox, find the verification email, and click on the verification link. This step is crucial to activate your GitHub account. ๐ง
Step 5: Customize Your Experience
After verifying your email, you’ll be prompted to complete a few additional steps to customize your GitHub experience:
- Questions about Your Team: You’ll be asked how many team members will be working with you and if you are a student or teacher.
- Feature Preferences: Next, you’ll be asked what specific features you are interested in using, such as collaborative coding, automation and CI/CD, security, client apps, project management, and team administration.
- Choose a Plan: GitHub offers free and paid plans. For most users, the free plan is sufficient to get started.
Congratulations! ๐ You’ve successfully created your GitHub account. You’re now ready to create and manage repositories, collaborate with other developers, and explore the vast ecosystem of open-source projects on GitHub.
Setting Up a GitHub Repository
Now that you’ve got your GitHub account all set up, it’s time to dive into creating your very first repository. This is where your code will live and where all the action happens. Ready? Let’s get started! ๐
Step 1: Navigate to Your GitHub Dashboard
Once you’re logged into GitHub, head over to your dashboard. You can get there by clicking on your profile picture in the top right corner and selecting Your repositories from the dropdown menu.
Step 2: Create a New Repository
On your repositories page, you’ll see a green New button. Click on it to start the process of creating a new repository. ๐
Step 3: Fill in Repository Details
You’ll be directed to a page where you need to fill in some details about your new repository:
- Repository Name: Letโs keep it consistent with our local project that we created in our second blog post here, and name it
my-first-project
. - Description (optional): Add a short description of what your project is about.
- Public or Private: Decide if you want your repository to be public (visible to everyone) or private (only you and your collaborators can see it).
- Initialize with a README: Since we already have a README file in our local repository, leave this box unchecked.
Here’s an example of what your form might look like:
Once you’ve filled in the details, click the Create repository button at the bottom of the page.
Step 4: Connect Your Local Repository to GitHub
Now that your GitHub repository is created, itโs time to link your local repository to this new remote repository. Hereโs how you do it:
-
Copy the Repository URL: On your new repository page, click the copy button to copy the URL.
-
Open Your Terminal or Command Prompt: Navigate to your local project directory:
1
cd path/to/your/my-first-project
-
Add the remote repository: Use the
git remote add origin
command followed by the URL you copied.1
git remote add origin https://github.com/your-username/my-first-project.git
This command will link your Local repository to your Remote GitHub repository.
-
Verify the remote URL:
1
git remote -v
We should expect an output similar to the one below, letting us know that our local repository is correctly linked to the GitHub repository at the
https://github.com/ahmedmuhi/my-first-project.git
for both fetching and pushing changes:1 2 3
git remote -v origin https://github.com/ahmedmuhi/my-first-project.git (fetch) origin https://github.com/ahmedmuhi/my-first-project.git (push)
By the way, fetching in Git means retrieving the latest changes from a remote repository without merging them into your local branch.
Step 5: Push Your Code to GitHub
Now that your local repository is connected to GitHub, you can push your code to the remote repository:
-
Push your changes:
1
git push -u origin main
The command
git push -u origin main
pushes your local changes to the main branch on GitHub. The-u
option makes Git remember this connection, so next time you can just usegit push
orgit pull
without extra details. -
Verify your code on GitHub:
Head back to your repository on GitHub and refresh the page. You should see all your files, including the README, now available in the remote repository.
Step 6: Start Adding More Files and Making Changes
Now that your project is on GitHub, you can continue to work on it, add more files, and make changes:
-
Navigate to your repository directory:
1
cd your-repo-name
-
Create or modify files:
1
echo "Some new content" >> newfile.txt
-
Check the status of your repository:
1
git status
-
Stage your changes:
1
git add newfile.txt
-
Commit your changes:
1
git commit -m "Add newfile.txt with initial content"
-
Push your changes to GitHub:
1
git push
Notice that we did not have to add anything after the command
git push
because we previously set up the remote or upstream branch withgit push -u origin main
. This means Git remembers where to push your changes, so you donโt need to specify the remote branch each time ๐ง
Congratulations! ๐ You’ve successfully set up your first GitHub repository, cloned it locally, and made your first commit. You’re well on your way to mastering GitHub and collaborating with developers around the world.
Using VS Code for GitHub
Visual Studio Code (VS Code) is a powerful and all-around code editor that integrates smoothly with Git and GitHub. Using VS Code, you can manage your repositories, make commits, push changes, and even handle pull requests, all within the editor. Let’s explore how to set it up and use it effectively. ๐งโ๐ป
Step 1: Install VS Code
If you haven’t already, download and install Visual Studio Code from the official website. Once installed, open VS Code.
Step 2: Install the GitHub Extension
To enhance your GitHub experience in VS Code, install the GitHub extension:
-
Open the Extensions view by clicking on the square icon in the sidebar or pressing
Ctrl+Shift+X
. -
Search for “GitHub” and install the GitHub Pull Requests and Issues extension.
-
Restart VS Code if necessary.
Step 3: Open Your Local Repository in VS Code
You can open your existing local repository in VS Code:
-
Click on File > Open Folder and navigate to your
my-first-project
directory. -
Select the folder and click Open.
Step 4: Managing Your Repository
Now that your repository is open in VS Code, you can manage it within the editor:
-
Make Changes: Open the README.md file and modify it and save the changes.
-
View Changes: Click on the Source Control icon in the sidebar to see your changes.
-
Stage Changes: Click the
+
icon next to each file you want to stage. -
Commit Changes: Enter a commit message in the message box and click the checkmark icon to commit.
-
Push Changes: Your changes are now ready to be Pushed to your Remote GitHub Repository, select the arrow down next to the Commit button, and click Commit & Push.
Congratulations ๐ You’ve successfully modified your local repository, staged the changes, committed, and pushed your updates to the GitHub Repository using VS Code ๐
Creating and Managing Pull Requests with VS Code
Pull requests are a crucial part of collaborating on GitHub. They allow you to propose changes, review code, and discuss modifications before merging them into the main branch. By learning how to create pull requests, you’ll also be equipped to contribute to your favorite open source projects. Letโs walk through the process of creating and managing pull requests using VS Code, utilizing the GitHub Pull Requests and Issues extension. ๐ค
Step 1: Create a New Branch
Before you make changes, create a new branch in your local repository using VS Code:
-
Open VS Code and navigate to your repository.
-
Open the Command Palette by pressing
Ctrl+Shift+P
. -
Type
Git: Create Branch
and select it. -
Enter the name of your new branch, e.g.,
my-new-feature
.
Step 2: Make Your Changes
Make some changes to your code. Once youโre done, stage and commit your changes:
-
Stage the Changes: Click on the Source Control icon in the sidebar to see your changes. Click the
+
icon next to each file you want to stage. -
Commit the Changes: Enter a commit message in the message box at the top and click the checkmark icon to commit.
Step 3: Push the Branch to GitHub
Push your new branch to GitHub from within VS Code:
-
After committing your changes, the Commit button will change to a Publish Branch button.
-
Click the Publish Branch button to push your new branch to GitHub.
Step 4: Create a Pull Request
Now, create a pull request on GitHub directly from VS Code:
-
Open the Command Palette (
Ctrl+Shift+P
). -
Type
GitHub Pull Requests: Create Pull Request
and select it. -
Follow the prompts to create a new pull request. In the form that opens, set the base branch to
main
and the branch to merge tomy-new-feature
. Enter a title and description for your changes. -
Click the Create button to submit the pull request.
This process sets up a request to merge your my-new-feature
branch into the main
branch, integrating your new code. This is how you can propose changes and contribute to open-source projects.
Step 5: Review and Merge the Pull Request
You can review and manage pull requests directly from VS Code:
-
Notification and Pull Request Icon:
-
Once you publish your branch, youโll see a notification at the bottom of VS Code indicating that you have a pull request.
-
A new icon for pull requests will also appear in the sidebar.
-
-
Review Pull Request Details:
- Click on the pull request notification or the pull request icon in the sidebar.
- This will open a detailed view of the pull request, showing the description of the changes. It will say something like “Ahmed wants to merge changes into
main
frommy-new-feature
.” - You can see the options to Merge Pull Request directly from this view.
-
View on GitHub:
-
You can also log into your GitHub account to view the pull request.
-
Navigate to the Pull requests tab of your repository. Here, youโll see your open pull request, along with the message and who submitted it.
-
-
Review Changes in VS Code:
-
Within VS Code, click on the files listed under the pull request to see the specific changes being proposed.
-
This allows you to compare the differences in the code. In this example, it shows the modifications made to the
README.md
file.
-
-
Merge the Pull Request:
-
If everything looks good and there are no conflicts, you can proceed to merge the pull request.
-
Click on the Merge Pull Request button. If needed, you can change the commit message in this step.
-
Once ready, click Create Merge Commit to finalize the merge.
-
-
Finalising the Merge:
-
After the merge is complete, youโll see a confirmation message, and the pull request status will change to “Merged,” highlighted in purple.
-
You also have the option to delete the branch if itโs no longer needed.
-
By following these steps, you can effectively review and merge pull requests, integrating changes into your main branch. This is how you manage contributions and collaborate on open-source projects, ensuring code quality and consistency.
Conclusion
Congratulations, everyone! ๐ You’ve successfully navigated through the essential steps of setting up a GitHub repository, using VS Code for GitHub, and creating and managing pull requests using VS Code. Youโve taken a giant leap forward in mastering Git and GitHub, and you’re now well-equipped to handle your projects with confidence.
From setting up your GitHub account to pushing your first changes, youโve covered a lot of ground. Remember, GitHub is a powerful platform that not only helps you manage your code but also enhances collaboration with developers worldwide.
The journey doesnโt end hereโthereโs more to learn and discover in the world of Git and GitHub, so stay tuned ๐ and Happy coding! ๐