Featured image of post Setting Up Your First GitHub Repository: A Step-by-Step Guide

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

Take the next step in your GitHub Actions journey by learning how to set up your first GitHub repository. This comprehensive guide will walk you through creating a GitHub account, connecting your local project, and managing pull requests. Get ready to elevate your development workflow and collaborate like a pro! ๐Ÿš€

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.

GitHub signup 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:

  1. 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.
  2. 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.
  3. 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.

Your GitHub repository

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:

Create a new GitHub repository

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:

  1. Copy the Repository URL: On your new repository page, click the copy button to copy the URL.

    Copy URL to your GiHhub Repository

  2. Open Your Terminal or Command Prompt: Navigate to your local project directory:

    1
    
    cd path/to/your/my-first-project
    
  3. 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.

  4. 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:

  1. 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 use git push or git pull without extra details.

  2. 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.

    Local Repository pushed to GitHub 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:

  1. Navigate to your repository directory:

    1
    
    cd your-repo-name
    
  2. Create or modify files:

    1
    
    echo "Some new content" >> newfile.txt
    
  3. Check the status of your repository:

    1
    
    git status
    
  4. Stage your changes:

    1
    
    git add newfile.txt
    
  5. Commit your changes:

    1
    
    git commit -m "Add newfile.txt with initial content"
    
  6. 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 with git 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 ๐Ÿง 

    New file added to local repo and pushed to GitHub repo

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:

  1. Open the Extensions view by clicking on the square icon in the sidebar or pressing Ctrl+Shift+X.

  2. Search for “GitHub” and install the GitHub Pull Requests and Issues extension.

  3. Restart VS Code if necessary.

    Install GitHub Pull Requests extension

Step 3: Open Your Local Repository in VS Code

You can open your existing local repository in VS Code:

  1. Click on File > Open Folder and navigate to your my-first-project directory.

  2. Select the folder and click Open.

    Open local repo using VS Code

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.

    Make changes to your local repo using VS Code

  • View Changes: Click on the Source Control icon in the sidebar to see your changes.

    List of files modified by VS Code

  • Stage Changes: Click the + icon next to each file you want to stage.

    Stage all changes using VS Code

  • Commit Changes: Enter a commit message in the message box and click the checkmark icon to commit.

    Add a commit message and commit your changes using VS Code

  • 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.

    Commit and push your changes to GitHub using VS Code

    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:

  1. Open VS Code and navigate to your repository.

  2. Open the Command Palette by pressing Ctrl+Shift+P.

  3. Type Git: Create Branch and select it.

    Git Create new branch using VS Code

  4. Enter the name of your new branch, e.g., my-new-feature.

    Give your New Git Branch a name VS Code

Step 2: Make Your Changes

Make some changes to your code. Once youโ€™re done, stage and commit your changes:

  1. 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.

    Save your Changes Stage your code VS Code

  2. Commit the Changes: Enter a commit message in the message box at the top and click the checkmark icon to commit.

    Commit your changes to Git using VS Code

Step 3: Push the Branch to GitHub

Push your new branch to GitHub from within VS Code:

  1. After committing your changes, the Commit button will change to a Publish Branch button.

    Publish your New Git Branch to GitHub using VS Code

  2. 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:

  1. Open the Command Palette (Ctrl+Shift+P).

  2. Type GitHub Pull Requests: Create Pull Request and select it.

    Create GitHub Pull Request using VS Code

  3. 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 to my-new-feature. Enter a title and description for your changes.

    Create a GitHub Pull Request using VS Code

  4. 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:

  1. 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.

      Merge Pull Request using VS Code

  2. 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 from my-new-feature.”
    • You can see the options to Merge Pull Request directly from this view.
  3. 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.

      Pull Request on GitHub

  4. 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.

      Changes Made to Readme File

  5. 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.

      Create Merge Commit

  6. 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.

      Branch Merged.png

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! ๐Ÿ˜Ž