Beginner's Guide to GitHub: Part 1

Overview

Whether you are a complete beginner who has only heard of GitHub before, or you know a few things about it but are still not sure how to use it - this article has you covered. We will first go through a few fundamental concepts about GitHub, and then learn to create our first repository to save our code in it.

What is Git?

Git is a version control system that tracks changes in files, usually used for coordinating work among programmers. Version control systems are responsible for controlling the versions of your source code and maintaining a record of all the changes in the thing you are developing.

Git is a program that gets installed on your machine locally. It comes with apps like Git Bash and Git GUI. Since it's local to your machine, it doesn't require an internet connection. You can use it offline.

What is GitHub?

GitHub is a website. More specifically, GitHub is a cloud service provider (storing your data in data centers for free). Think of it like Google Drive but mainly for storing and tracking source code. Yes, you can store any file type on it, not just code.

It allows you to store your code on the internet along with all the versions that your code goes through. It uses git to keep track of the versions and provides you with a great user interface to store your code on the cloud as a backup, showcase your source code to the world, or collaborate with other devs.

So platforms like GitHub, GitLab, and BitBucket wouldn't exist without Git. They all make use of git at their core to track versions of your code and to help you work with other developers all around the world.

Install Git

You can install Git for free on its official website.

The installer will ask you some weird and complex questions while installing but you don't need to worry about it, just keep clicking the "next" button and leave all the settings to the defaults. After installing, open your Terminal or PowerShell and enter git --version to make sure it has been installed.

Git authentication

There are three main ways to authenticate your GitHub account properly in your machine's git.

1. Using your browser or GitHub mobile app: This uses your GitHub account password for signing in to Git. It is the easiest way to get going with GitHub and is best for complete beginners. But it's not the most secure.

2. Using Personal Access Tokens (PAT): These are long strings that act like passwords but they are much more versatile in terms of access and security. We will be following this because it's rather simple and we can focus more on GitHub.

3. Using SSH keys: This method has been around for a long time and has always been the more secure option. You can even authenticate and use multiple GitHub accounts on the same machine by using SSH keys. Understanding the basics of SSH will be beneficial in other fields as well. So it's best to get used to it early on. I'll write a different article on using SSH.

Creating an account

If you haven't created a GitHub account yet, go ahead and sign up. GitHub may ask you some questions and that's mostly for surveying purposes. Your GitHub experience will not be affected by them so answer freely.

Set up git

Configure a global git user for your machine. For this, open the git bash and enter the following commands, but replace the variables with your credentials:

$ git config --global user.name YOUR_GITHUB_USERNAME
$ git config --global user.email YOUR_EMAIL

Writing code

Make a new empty folder on your machine and open VScode in it. There, create a text file called temp.txt and write some stuff. You can also create a folder there and add another file inside it. It can be any type of file - txt, html, py, js, doesn't matter. Make whatever kind of file structure you want here and add as many folders and files as you like.

Let's say this is what your project looks like and these are your files, you want to store these in GitHub.

Creating your first repo

Repos (short for repositories) are at the heart of GitHub. Think of a repo as a folder in your GitHub account that contains other files and folders inside it. Usually, a single repo represents a single project. You are allowed to create as many repos as you want for free on GitHub.

First, let's create a repo and then break down everything we do.

1. On the homepage of GitHub, click on the green button at the top left that says "New".

2. Give your repo a name. It can also contain spaces but I don't recommend it. You can call it MyFirstRepo. You can also select the "private" option if you don't want this repo to be publicly visible to anyone.

3. You can skip all the other stuff and click "Create repository".

4. You will see a screen like this. Make sure HTTPS is selected and not SSH.

5. Back in VScode, use the ctrl + ` shortcut to open the integrated terminal. Windows users will likely see a PowerShell instance in the integrated terminal.

6. Copy the commands from the first option and paste them into your integrated terminal.

7. When the last command is run, Git will ask you to sign in to your GitHub.

8. You can use the Browser option but I will show how to use a PAT. If you decide to use the Browser option, then you can skip to step 12.

9. To generate a PAT, open github.com and click on your profile picture at the top right corner. From the sidebar menu, select "Settings". Scroll all the way down and from the menu on the left, select "Developer Settings". Under "Personal access tokens" select "Tokens (classic)".

10. Create a new classic token. For the note, you can say "My first token", and set the expiration. When the PAT expires, it will no longer work and you need to generate a new one and sign in with this method again.

11. Go ahead and check all the boxes to give yourself all the access. Finally, click "Generate token". Copy this token and paste it into the Git Window which opened earlier. Click "Sign in".

12. Now back in VScode, you should see the push command has successfully finished executing.

13. Open GitHub and go to your repositories. Open the repo which you just created. You will see only a README file in it.

14. To push the rest of the files, come back to the VScode terminal and enter the following commands.
    

git add .
git commit -m "initial commit"
git push

Now come back to your GitHub repo and reload the page. You will see your entire file structure inside this repo, along with an extra README file.

Break down

Let's understand everything we just did.

1. We created a new repo associated with our GitHub account. All the data and metadata of this repo will be stored in the GitHub data centers.

2. echo "# MyFirstRepo" >> README.md - This is just a bash command which creates a new markdown file called README.md and writes "# MyFirstRepo" to it. It has nothing to do with git.

3. git init - This is the most important and sensitive command to understand. It initializes your folder to identify itself as a git repository. When you run this command in a certain folder (in this case I ran it in "test"), it creates a new hidden folder called .git and you need to enable hidden files in the view of your file explorer to be able to see it. This .git folder MUST NOT be moved around. Don't touch it. It must always reside in the folder it was created in. It contains information about staged files and commits and stuff that we are not supposed to understand or modify by ourselves. DO NOT copy it or cut it and paste it somewhere else. It belongs with the code it was created for and the only way to interact with it is through git commands in the terminal. However, if you wish to disassociate this folder from Git completely and turn it into a regular folder, it is enough to delete the .git folder from it. To associate that folder with a GitHub repo again, run git init again, and then add a remote and push the code from scratch.

4. git add README.md - This command adds the file README.md to the staged files. Staging is done to files that are ready to be committed in the next commit.

5. git commit -m "first commit" - This command will commit your staged files with the message "first commit". You can think of committing as a way of saving your progress like in a videogame. You are creating a checkpoint in the lifetime of your source code where you just finished implementing a feature or fixing a bug and made sure it's working properly, so you want to save it with some message. You can revert back to this state of your source code if you need to in the future.

6. git branch -M main - We will not be discussing branches in detail but this command is only used for renaming the default "master" branch to "main". GitHub made this change around the end of 2020 so you will find old archived repos will probably still use "master" as the default branch.

7. git remote add origin https://github.com/Electromorphous/MyFirstRepo.git - This is the command responsible for connecting your local git repo to the online GitHub repo that's living on the cloud. It tells Git where to push the code on the internet (including the platform like GitHub or GitLab) and also where to pull the code from. If you run git remote -v you will see the remotes saved in your folder and they have names like "origin" and "upstream".

8. git push -u origin main - It's just a way of pushing the code to GitHub while simultaneously saving a configuration for this repo that the next time when you run git push it is understood that your code must be pushed to "origin main". You will not have to specify the remote name and the branch name every time, you just have to run git push and it will be pushed to the remote saved as "origin" and the branch called "main" automatically.

9. Next, we created a personal access token that acts like a password and gives you access to GitHub actions and used it to authenticate ourselves to Git locally.

10. git add . - Here the period . means everything in the current folder. So we are staging all our files because they are ready to be committed in the next commit.

11. git commit -m "initial commit" - Creating a new commit called "initial commit" where we are pushing all our initial code to GitHub for the first time.

12. git push - Pushing the committed files to our GitHub repo's main branch.

After that command, all our code is on GitHub inside a new repo. You can check the commit history of that repo on the same page.

What next?

You have to get used to the basics of GitHub. All these fundamentals you just learned are extremely important and it may take some time to understand them. But they are the foundation of the rest of the knowledge you will gain about version control. So you must use GitHub often to get used to it. How?

While you're coding your project, every time you finish a certain feature or fix a bug, remember to open the integrated terminal and run

$ git add .
$ git commit -m "YOUR COMMIT MESSAGE"
$ git push

It really only takes that much. While developing something, open the terminal and run those 3 commands every time you reach a checkpoint to save your progress.

It has the added advantage of keeping a backup of every good version of your code that was running at some point, so in case anything happens to your machine or it gets stolen, your code is safe. Plus, it's there on the internet for everyone to see.

The end

Welp, that's the end of it.

That took a lot longer than I had planned, but I've covered all the basics and hopefully given a lot more context to beginners. Remember to be patient and consistent with it and you will master these fundamental concepts in no time.

If you like this article then consider following me and subscribe to the Electroblog newsletter to be notified when I publish a new article.