If you’re a programmer or web developer of any sort, you’ve probably heard of version control. In it’s simplest term it’s a way for you to keep a manipulative history of your work. It not only helps you keep a record of files you can roll back with, but also a way of collaborating with other programmers all together.
For me, it’s an important thing to -always- create a repo for -every- little project. You never know how much it might grow or how many other people may want to lend a hand or offer advice or alterations.
While i may be a bit daunting, i’m going to show you just how simple it can be. And while it may take a little bit of adjustment, you’ll find that this will be the beginning of a beautiful friendship.
To understand this, we’re going to create a simple website and we’re going to put it into a repository. We will then create a commit of changes and push it to our repositories main branch.
Setting Up
For this, i’m going to use Git as our version control. And we’ll be using Github for our repositories.
First, you’ll have to download and install Git. Follow the instructions on their download page.
Once downloaded you’ll need to create a new folder for your website. Once you’ve done this, navigate to the folder using a terminal. Either via Git Bash, Powershell, Cmd, or just plain Terminal. You should end up with something similar to this:
Outside of the terminal, create 2 simple files inside this folder. index.html and style.css. Open these up in whatever program you use for your web work. In the event you’re unsure, a simple notepad program will work.
Inside index.html, copy the following code for a very simple website:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<h1>Hello World</h1>
<p>This is your first repo!</p>
</body>
</html>Inside style.css, copy this following simple code:
h1 {
color: Blue;
}
p {
color: Grey;
}Once these files are saved, open up index.html in your browser. You should see this:
Great! Your first website set up. Now, we need to put this into version control.
Git-ting Started
First, create a free account on Github. Once your account is set up, you need to create a new repository. Click the plus icon at the top right and choose “New Repository”.
On the next screen, fill in the repository name based on your own personal preference. A description as well if you feel like it. Make the repository public and don’t tick any of the boxes. Once you’re done, click Create Repository.
This will take you to the following screen.
At this point, go back to your terminal you opened earlier. Type in the following in this order:
git init – This will initialise an empty git repo.
git add . – Note the full stop. This will add all items in this folder to the git repo you have locally.
git commit -m "initialise" – This will create a commit for your local repository of all changes you added in the previous command. In this case, that means the files you’ve created.
At this point, your local repo has been updated. For every milestone you feel you’ve hit with your code, you could repeat git add and git commit to your own preference. For each commit, if you’ve made a mistake and you’re unsure how to fix it, you can roll back to a previous commit. There’s no need to keep copies of files as you work.
Unfortunately, a local repo isn’t something that can be collaborated, shared and easily navigated. That’s why we use GitHub. Pushing our changes to a remote repository like GitHub will allow our code and commits to be easilly readable by ourself and others.
Back on your github page, copy the full line that says git remote ... and paste it into your terminal. This will create a remote connection to this github repository from your local one.
After this, type git push origin master. Once the terminal has finished it’s details, go back and refresh your repository on github. Your files should be there to see! You successfully created a remote repository.
Now, make a change to your CSS. Change the colours to anything you see fit. Then add, commit and push again. Your css on the github repo will have updated and you’ll have two commits available for viewing!
In summary
You’ve managed to create yourself a history locally and remotely where you can roll back, download and update your code using Git and Github. Using this in any project will allow yourself a great history of all files and work you’ve done in any project. It also allows you to roll back if there are any issues that don’t work.
Mastering all the tools of github and git are a little outside the territory of this small simple tutorial, however Atlassian offers a cheatsheet to help you understand the commands a little better.
I hope this helped someone understand how things work!