Setting Up Your First GitHub Repository: A Step-by-Step Guide

Introduction

Hey there, Everyone! 👋 I’m excited to continue our software development journey together. Last time, we learned the fundamentals of Git in Part 1 - how to track changes, create commits, and manage our code locally. Today, we’re going to build on that knowledge by exploring GitHub.

You’ve already learned how to use Git on your computer. Now, let’s see how GitHub helps us share our code with other developers and collaborate on projects together. GitHub takes the Git concepts you’ve learned and adds powerful online features that make team collaboration much easier.

In this guide, we’ll cover:

• What GitHub is and why developers use it
• How to create your GitHub account
• Setting up your first GitHub repository
• Connecting your local Git repository to GitHub
• Using VS Code to work with GitHub
• Creating and managing pull requests

Don’t worry if some of these terms sound unfamiliar - we’ll explore each one step by step. By the end of this guide, you’ll be able to:

• Store your code online securely
• Share your projects with other developers
• Collaborate on code with team members
• Review and discuss code changes effectively

Remember those Git repositories we created in the last article? Today you’ll learn how to put them online where you can access them from anywhere and work with other developers.

Let’s get started with setting up your GitHub account!

Creating a GitHub Account

Now that we understand what GitHub is, let’s create your account! If you already have one, feel free to skip to the next section. For everyone else, I’ll walk you through the process step by step.

First, head over to GitHub’s website. You’ll see a signup form where GitHub asks for some basic information to get you started.

Here’s what you’ll need to provide:

1. Your email address - this is where GitHub will send your verification link
2. A strong password to keep your account secure
3. A username that will identify you on GitHub - choose something professional since other developers will see this

The signup screen makes this process straightforward, showing you exactly what information is required with clear labels and helpful hints.

You’ll also see an option for email preferences - GitHub asks if you’d like to receive occasional product updates and announcements. This is entirely up to you!

Once you’ve filled in your details, click the “Continue” button to move forward with the signup process.

Quick Tip: Choose a username you’ll be happy with long-term - this will be part of your GitHub profile URL and how other developers find you!

After clicking continue, GitHub will send a verification code to your email. This helps ensure your email address is valid and secure. Check your inbox, grab that code, and enter it when prompted.

Congratulations! 🎉 You’ve taken your first step into GitHub. In the next section, we’ll create your first repository and start putting your Git knowledge to work!

Setting Up a GitHub Repository

Now that you’ve got your GitHub account ready, let’s create your first repository! You might be wondering, “What exactly is a repository?” Think of it as your project’s home on GitHub - this is where all your code will live and where the magic of collaboration happens.

Let me walk you through creating your first repository step by step. Don’t worry if some steps seem unfamiliar - we’ll explore each one together!

Step 1: Navigate to Your GitHub Dashboard

First, let’s find where to create your repository. Once you’re logged into GitHub, look for your profile picture in the top right corner. Click on it and select Your repositories from the dropdown menu.

Step 2: Create a New Repository

You’ll see a green New button on your repositories page. This is where we’ll start! Click on it to begin creating your new repository.

Step 3: Fill in Repository Details

This is where we’ll set up the basic information for your repository. You’ll see a form with several options - let me explain each one so you can make the right choices for your project:

• Repository Name: Let’s name it my-first-project. Choose a name that’s clear and descriptive - you can always change it later!
• Description (optional): This helps others understand what your project is about. While it’s optional, I recommend adding a short description.
• Public or Private: Here’s an important choice!
  • Public means anyone can see your code (great for open source projects or learning)
  • Private means only you and people you invite can see it (perfect for personal projects)
• Initialize with a README: Since we’ll be connecting this to our local repository, leave this box unchecked for now.

Here’s what your form should look like:

Once everything looks good, click that Create repository button at the bottom of the page. Exciting, right?

Step 4: Connect Your Local Repository to GitHub

Now comes the cool part - connecting your local repository to GitHub! This is where we’ll bridge the gap between your computer and GitHub.

1. First, you’ll need the repository URL. Look for and click the copy button next to the URL on your new repository page:

   

2. Open your terminal or command prompt and navigate to your project:

   cd path/to/your/my-first-project

3. Now, let’s connect your local repository to GitHub:

   git remote add origin https://github.com/your-username/my-first-project.git

   This command tells Git “Hey, I want to connect this local repository to my GitHub repository!”

4. Let’s make sure it worked:

   git remote -v

   You should see something like this:

   origin	https://github.com/ahmedmuhi/my-first-project.git (fetch)
   origin	https://github.com/ahmedmuhi/my-first-project.git (push)

   This output tells us we’re successfully connected to GitHub. Great job! 🎉

Step 5: Push Your Code to GitHub

Now that we’re connected to GitHub, it’s time for the exciting part - getting your code online! Let’s push your local code to GitHub:

1. Here’s the command to push your code:

   git push -u origin main

   Let me explain what’s happening here: we’re pushing your code to GitHub, and that -u flag is pretty clever - it helps Git remember this connection. After this, you can simply use git push or git pull without typing out all the extra details. Neat, right?

2. Once that’s done, head back to your repository on GitHub and refresh the page. You should see all your files right there on GitHub - how cool is that?

   

Step 6: Making Changes and Keeping GitHub Updated

Now comes the fun part - let’s make some changes and see how easy it is to keep your GitHub repository up to date!

1. First, let’s create a new file in your project:

   cd your-repo-name
   echo "Some new content" >> newfile.txt

2. Let’s check what Git thinks about our new file:

   git status

3. Time to stage our new file:

   git add newfile.txt

4. Commit your changes with a clear message:

   git commit -m "Add newfile.txt with initial content"

5. And finally, push it to GitHub:

   git push

   Notice something? We didn’t need to type origin main this time - that’s our -u flag from earlier doing its job!

   

Congratulations! 🎉 You’ve just:

• Created your first GitHub repository
• Connected it to your local project
• Pushed your code to GitHub
• Made changes and updated your repository

You’re now officially using GitHub! In our next section, we’ll explore how to work with branches - this is where GitHub’s collaboration features really start to shine!

Using VS Code for GitHub

Hey, remember all those commands we just learned? While they’re great to know, there’s an easier way to work with GitHub - using Visual Studio Code (VS Code)! VS Code is an amazing code editor that makes working with GitHub feel like a breeze. Let me show you how to set it up! 🧑‍💻

Step 1: Install VS Code

First things first - if you haven’t already, let’s get VS Code installed on your computer. Head over to Visual Studio Code and download it. Don’t worry, it’s free!

Step 2: Get the GitHub Extension

Now here’s where it gets interesting - VS Code has a fantastic GitHub extension that makes everything easier:

1. Look for the Extensions icon in the sidebar (it looks like four squares) or just press Ctrl+Shift+X
2. Type “GitHub” in the search bar
3. Find and install the GitHub Pull Requests and Issues extension
4. VS Code might ask you to restart - go ahead and do that if it does

Step 3: Open Your Project in VS Code

Let’s get your repository opened in VS Code:

1. Go to File > Open Folder
2. Find your my-first-project directory and open it

Step 4: Managing Your Repository the Visual Way

This is where VS Code really shines! Let me show you how much easier everything becomes:

• Making Changes: Open your README.md file and make some changes. It’s just like using any text editor!

• Seeing Your Changes: Click the Source Control icon in the sidebar (looks like a branch). VS Code shows you exactly what changed!

• Staging Files: See those + icons next to your files? One click and they’re staged - no commands needed!

• Committing: Type your commit message in the box and click the checkmark. Simple as that!

• Pushing to GitHub: Ready to share your changes? Click the arrow next to Commit and choose “Commit & Push”. Done!

And just like that, you’ve mastered using VS Code with GitHub! 🎉 Notice how everything we did with commands before is now just a few clicks away? Pretty cool, right?

In our next section, we’ll look at something really exciting - creating branches and pull requests. VS Code makes this super easy too!

Creating and Managing Pull Requests with VS Code

Let’s explore one of the most powerful features of GitHub - pull requests! If you’re wondering what pull requests are, they’re how developers propose changes and collaborate on code. VS Code makes this process straightforward, so let me show you how it works.

Step 1: Create a New Branch

Before we make any changes, we need to create a new branch. This lets us work on our changes without affecting the main code:

1. Open VS Code and go to your repository
2. Press Ctrl+Shift+P to open the Command Palette
3. Type Git: Create Branch and select it

Now give your branch a name - let’s call it my-new-feature

Step 2: Make Your Changes

Now that we have our new branch, let’s make some changes:

1. First, modify any files you want to change
2. When you’re ready, click the Source Control icon in the sidebar
3. See those files with changes? Click the + icon next to each one to stage them

Add a clear commit message explaining what you changed, then click the checkmark to commit:

Step 3: Push the Branch to GitHub

Now that we’ve made and committed our changes, let’s share them on GitHub:

Look at your VS Code - notice that the Commit button has changed to say “Publish Branch”? That’s VS Code telling us this branch only exists on your computer right now.

Click that “Publish Branch” button to send your changes to GitHub. Simple as that!

Step 4: Create a Pull Request

Here’s where it gets interesting - let’s create a pull request to propose merging your changes:

1. Press Ctrl+Shift+P again to open the Command Palette
2. Type GitHub Pull Requests: Create Pull Request and select it

VS Code will show you a form where you can set up your pull request:

• Set the base branch to main (this is where your changes will go)
• Your my-new-feature branch is already selected (this is where your changes are coming from)
• Add a title and description that clearly explain your changes

Step 5: Reviewing Pull Requests

Let’s look at how to review the changes you’ve proposed:

1. After creating your pull request, you’ll see a notification at the bottom of VS Code
2. A new pull request icon will appear in your sidebar - click it to see your changes

VS Code makes it easy to see exactly what you’re proposing to change. You can view all modified files and see what’s been added or removed.

Step 6: Understanding the Review Process

Let me show you how to review your changes before merging them:

When you open your pull request in VS Code, you’ll see several important pieces of information:

1. The pull request details will say something like “Ahmed wants to merge changes into main from my-new-feature”
2. You can see all the files that were changed
3. Each change is highlighted - additions in green, deletions in red

You can also view your pull request on GitHub’s website - sometimes it’s nice to see everything in your browser:

Step 7: Merging Your Changes

Once you’re happy with your changes, it’s time to merge them into your main code:

1. If everything looks good and there are no conflicts, look for the “Merge Pull Request” button
2. You can add a final merge message if you want to
3. Click “Create Merge Commit” to combine your changes with the main code

After merging, you’ll see a confirmation that everything worked:

• The status changes to “Merged” (with a nice purple color)
• VS Code asks if you want to delete your branch - it’s usually safe to do this since your changes are now in the main code

And that’s it! You’ve successfully:

• Created a branch for your changes
• Made and committed those changes
• Created a pull request
• Reviewed the changes
• Merged them into your main code

In future articles, we’ll explore more advanced features like reviewing other people’s pull requests and handling merge conflicts. But for now, you have all the tools you need to start collaborating on GitHub projects!

Conclusion

Well done! You’ve accomplished quite a bit in this article. Let’s quickly review what you’ve learned:

You started by setting up your GitHub account and creating your first repository. Then you saw how VS Code makes working with GitHub straightforward and visual. Finally, you learned how to create and manage pull requests - a key skill for collaborating with other developers.

Here’s what you can now do:

• Create and manage GitHub repositories
• Connect your local code to GitHub
• Use VS Code for your GitHub workflows
• Create branches for new features
• Make pull requests to propose changes

Remember, what we’ve covered today is just the beginning. In our next article, we’ll explore more advanced GitHub features and dive deeper into collaboration techniques.

Thank you for learning with me today. See you in the next article 😊🌟