Introduction
This guide is for users who are new to web development and aren't familiar with Git. Git and everything you need to start with it will be covered so you can use it easily with your websites. At the end of this guide, you will be in a position where you can use Git to manage your code for your web development.
What is Git?
Git is a distributed version control system but what is version control? It's a system used to manage the code changes to software.
In the case of Git, it manages code changes for a code base that makes up an application be it a desktop application, website, or mobile app.
Git refers to code bases as repositories.
The following are the benefits of this type of system...
Multiple developers can work on a single repository
Git makes it easier for multiple software developers to work on a single repository as each developer will have a copy of that repository. Each developer can submit their code changes to a main version of the repository. Then other developers can connect to the main version and pull in the latest changes to their copied version, this allows multiple developers to be in sync and have the same repository version.
Keep a history of code changes
As you submit code changes while using Git it keeps a history of those code changes allowing you to refer back to them if needed to resolve any issues. Also, those code changes would include useful information such as a developer's username and email associated so you can also track who made certain code changes. Also, messages can be written to describe the code change to inform others what the code change represents.
Multiple versions of a repository
A version of a repository is referred to as a Git branch where a branch can have different code changes to each other. Whenever a repository is created there has to be at least one branch, this is the main (or master) branch.
Typically when working on a new feature to add to your code you would create a new branch referred to as a feature branch. On a feature branch, you would code up a feature, and then on completion that feature branch gets merged in with the main branch, normally a code review would be done on the feature branch to see if it's eligible to be merged to the main branch.
As the main branch is typically used to provide code for a live web server or application you only want the live version of code to be part of that branch. Multiple branches allow you to work with code that's not the live version so let's say you need to submit an urgent bug fix to the live code you can submit it to the main branch and keep the feature branches intact as those features are in progress and currently being worked on.
How does Git work?
Git is used in the terminal where you write "git" followed by a command. As a beginner this can be intimidating as you need to be familiar with the correct commands to use however there are alternatives to using Git which are easier to use. Below we cover GitHub Desktop, a Windows application where you would use a user interface instead of Git commands to manage your GitHub application.
GitHub
GitHub is a website used to host your developer projects, search for and use open-source projects made by other developers and organizations, and collaborate with other developers.
Store your code online
GitHub uses Git so when you copy repositories to your local machine it would be downloaded from GitHub. When you want to send code changes it would be uploaded from your local machine to the repository hosted in GitHub.
Without GitHub it would be more difficult to host your code online so it's recommended that you create an account and make use of it. It's a bad idea to have all your code on your local PC, if your PC was to stop working then there is a chance you would lose your code.
Repositories can be public so everyone can see the code (open-source) or private so only you or a select group of developers can access or work with those repositories.
Anyone can contribute
GitHub is a great collaboration tool allowing developers to discover and contribute to your projects. As you can host your projects online on GitHub, this makes it easier for other developers to download your repository to their machine, work on updates, and submit them to be applied to the project.
For developers who submit code changes to your project, they go through a review process instead of the change being applied instantly. You can review the code changes or someone else with the admin status can also review, after a successful review the changes get merged into the repository.
Portfolio projects
Having a GitHub account is also a great opportunity to show off a portfolio of projects. When applying for developer jobs a great way to show potential employers you are a great developer is to show that you use GitHub and you have a few personal projects hosted with GitHub. As the git repositories would be public employers can see your code and code changes giving them visibility of your work and effort.
GitHub Desktop
To get started with Git and GitHub a good starter method is to download and use the GitHub Desktop application.
Setup
Start by going to the GitHub Desktop website and downloading the application file, after downloading install the application.
You will be presented with the following screen. If you don't have a GitHub account then click the Create your free account link otherwise click the Sign in to GitHub.com blue button.
If you selected the Create your free account link then github.com should load up in your web browser. Fill in the form providing a username, email address, and password, complete the verification check, and click the Create account button.
After registration, you will verify the account and go to your email account of the email address used to retrieve the verification code.
Click the Open GitHub button to verify the account which will open GitHub.
Your GitHub account will be available on the GitHub website where you can view and manage your repositories. GitHub Desktop is the application that will be used to push and pull code from your local PC to your GitHub account.
GitHub Desktop will require connecting to the GitHub online account. When you see this screen click the Authorize desktop button to connect it.
When presented with the following prompt tick the checkbox so that your GitHub Desktop application will respond to actions performed on the GitHub website.
Back in the GitHub Desktop application, your account details need to be set up. Click the Finish button in the Configure Git page to set up the account, every time you send code changes your username/email address will be attached to each change.
Creating your first repository
In GitHub Desktop you can create a repository and submit a code change to it.
To begin on the main page select the Create a tutorial repository... button.
You will be prompted with a message stating that a new repository will be created and available in your online GitHub account.
Press the Continue button to go to proceed with the action.
If you check the GitHub folder inside the Documents folder you will see a desktop-tutorial folder. This folder represents the new desktop tutorial repository that was just created.
You will see a new repository added to your account named desktop-tutorial.
You can also see on the right-hand side steps to complete the tutorial. Assuming you have a text editor you should be on Step 2, if not then install a text editor like Sublime Text.
Step 2 requires creating a new branch, click the current branch tab at the top. This panel will show a list of your branches for the current repository, click the New branch button to create a branch.
Enter a name for the branch in the field and click the Create branch button.
After creating the branch the next task is to create and submit a change to your repository. Open the Sublime Text application or whichever text editor you want to use and open the desktop tutorial folder inside the GitHub folder.
In the desktop-tutorial folder create a new file. In Sublime Text right-click the desktop-tutorial folder and select the New File option.
Enter the file name index.html and click the Save button.
Go to the Sample page GitHub gist and copy the example HTML code.
Paste the HTML code into the index.html file inside the Sublime Text application, and save the file by holding the Ctrl key and pressing the S key on your keyboard.
If you go back to the GitHub Desktop app it will detect your change to the Git repository.
In the bottom right corner, there are a couple of text fields. Enter a message for the title and then press the Commit to add-html-file button. This will perform a Git commit meaning the code change you've just made is applied to the current branch.
Now use Git push to commit to the origin which is the remote version of desktop-tutorial, the version you have in GitHub Desktop is your local version.
The final step to complete the tutorial is to do a Git pull request. Click the Open pull request button to view the pull request on the GitHub website.
GitHub.com will load up in your web browser, you will see the pull request page where you will merge the add-html-file branch to the main branch. Click the Merge pull request button to continue.
You will be presented with a form to enter the merge message, you can leave the default message as it is and press the Confirm merge button.
After the merge, you will be shown that the merge has been completed.
Go to the GitHub Desktop app and switch the branch from add-html-file to main.
Press the Fetch origin tab to get the latest change to the main so the main branch is updated with the latest change on your local PC.
At this point, you will have completed the tutorial by adding the desktop-tutorial repository, creating a new branch (add-html-file) on the desktop-tutorial repository, committing a code change on the branch, and then merging the changes made in the add-html-file branch to the main branch.
Cloning an existing repository
To clone a repository is to download an existing repository from either your own, another user's or an organization's GitHub account to your local PC / desktop.
Click the Clone a repository from the internet... button and the Clone a repository pop-up window will show.
Select the URL tab and add the following to the repository field.
devpushprojects/devsites
The repository will be downloaded and then appear in your account.
If you check your GitHub folder inside of the Documents folder you will see the new repository added.
To add this new repository to your online GitHub account use the Push command.
Conclusion
After having gone through this guide you should be in a position where you are familiar with Git, GitHub, and GitHub Desktop.
Git allows you to manage code changes for your projects and allow multiple developers to work on the same project as Git can merge code changes more easily.
GitHub is a way to host your code online instead of keeping it stored locally on your PC, allows anyone to find and collaborate on your projects and build a portfolio to show to potential employers for a developer job role.
GitHub Desktop is a great application for beginners to Git and GitHub as it eases them into Git. After using GitHub Desktop you should progress to stand-alone Git on the command line as it's the way to go when managing projects hosted on live servers.