Introduction.

My name is Zain Ul Abdin, I am a web developer based in Pakistan. In this blog post, I will try to teach you, How you can upload your code that is on your local machine to the cloud on GitHub. I will not dive into the complexities of Git and GitHub themselves because they are a much deeper topic and would need a lengthier blog. Rather I will show you the process of Uploading the code, of your already completed application, to GitHub. Because the code on your local machine is not safe. There is always the danger of memory loss on your machine and many others. What if you need to change your machine you would always need a USB or a hard drive to copy and paste your code in a new environment. If you have Git and GitHub at your Disposal then you don't need this outdated process.

Context.

GitHub Account Creation.

GitHub is a cloud-based service to store the source code of your application. You can not download it on your PC, Although there is GitHub Desktop that's entirely another thing, You can call that Git with GUI. GitHub and GitHub Desktop are two entirely different things. To create an account on GitHub you have to visit GitHub's official website Here. I suggest using your primary Google account to create a GitHub account and keeping one GitHub account throughout your lifetime. Because all your projects can stay in one place. When working with other people in collaborative work everyone knows where to contact you and many other benefits arise from having one GitHub account.

Git Setup on your Local Machine.

Installation

Git is a free and open-source VCS ( Version Control System ) but I will not dive into its real purpose. I will just show you guess how to Install and setup it up on your machine correctly. First download it from its official website here. After the download is complete just run it. Almost every default setting in the installer is perfect for you except one where you have to choose your editor, by default it's VIM but most of the people here don't use it so pick the one you use. In my case that VS code.

Logging In with your GitHub account.

After installing Git locally you have to log in with your GitHub account that you just created. First, open Git Bash by searching it in the start menu. Once that opens run the following commands.

git config --global user.name "Your Name"
git config --global user.email "YourGitHubEmail@gmail.com"
git config --global init.defaultBranch main

remember to put your name and email within double quotes. And we are done. Setting up Git and GitHub.

Uploading Your Code to GitHub.

Git's Role.

First of all, go to your project folder and open the terminal, If you are on Windows I suggest using Powershell. You can open Powershell by clicking on your folder's address bar which is almost at the top of the File Explorer. Once you click on it then remove the path of your folder and type powershell that will open PowerShell in your current folder/directory, and it should be there. Now inside PowerShell type these commands. We will understand these commands in the next blog, For now just type them.

git init
git add -A
git commit -m "Your Message"

After these commands don't close Powershell just open GitHub on your browser.

GitHub's Role.

Click on the green New button.

Give your Repository ( Repository is a term used to refer to a single Project or Folder on your GitHub ) a name. Give this Repo ( an acronym for Repository ) a description. Choose to make your repository public so that your friends can see the code. And only public repositories can be deployed using GitHub pages. So choose public, of course, you can change this later. Don't do anything else.

Just click on the green Create repository Button. This will redirect you to a new page. Make sure not to close this page. The URL of the page is the

full-url-to-your-github-repo, which you will need in a bit.

Uploading the code.

Go to your Powershell again and make sure you are in your project directory where you ran the previous Git commands. and run these commands.

git remote add origin full-url-to-your-github-repo
git branch -M main
git push -u origin main

and once that's done, then your code is safe and sound on your GitHub account. To check that it's there, open the same browser tab that has the

full-url-to-your-github-repo, and refresh it. And you'll see that it's there. All your code is there.

Getting your source code from GitHub.

Now let's say you lost your source code from your machine but it's on your GitHub. What now, How to get that source code from your GitHub? Yes, you can copy and paste it one-by-one but that would be tedious work instantly if you have tens of hundreds of files in your project. A more effective approach is described below. Open the folder where you store all your projects. and then open GitBash there. You can do this by right-clicking your mouse and then clicking on the Git Bash Here option. That will open git bash in that folder. And then type this command there.

git clone full-url-to-your-github-repo

This will copy all of your GitHub repo to your local machine.

Deployment on GitHub Pages.

GitHub Pages is a service provided by GitHub for free to deploy simple Frontend Projects. And it can only work if you have a file named index.html in the root of your repo that will be considered as the home page and other than that, you can have as many pages as you want with names of your choosing. To use GitHub Pages first of course upload your code to GitHub using the previous steps and then. Go to the settings of your Repository by clicking the settings button. then

On the sidebar click on the pages option.

Then for the source Select Deploy From A Branch and then select the main branch and then root and after that click on save. Give it a few minutes and when you come back you will see the full URL of your newly deployed project at the top. As mine is shown at the top.

Conclusion.

Git and GitHub are powerful tools without which the life of developers would be much harder. They are one of the most useful and used tools in the tech industry and knowing them is a must in todays world. I don't remember, how many of my projects are lost in the abyss just because I didn't know about Git and GitHub. Saving and deploying your code are not the core features of either Git or GitHub the core features are to make collaboration in projects easy. And I will tell you about it in a future blog until then, Excuse Me.