Git is a popular version control system that is used to help groups of developers to keep track of changes to an existing code base. It is not necessary for individual developers to use Git, but when working on a team, it is very beneficial and in most cases, required to use some version or alternative of Git.NOTE: You may have heard of GitHub before. It is important to note that GitHub and Git are not the same thing. Git is a version control system, while GitHub is a web-based repository hosting service that uses Git.
In order to use Git, we have to install it first. The following instructions will help you to install git on your preferred OS.
Linux: If you have Linux, odds are you know how to get Git. But in case you don't, for Debian Based Linux, type in
$ sudo apt install git-all
and for Fedora, type in
$ sudo dnf install git-all.
Mac: visit https://git-scm.com/download/mac for an automatic download.
You can also install Git via Homebrew or Xcode for a more up to date version, but we will not cover that here. You can check your
version of Git by opening a terminal and typing
$ git --version.
Windows: visit http://git-scm.com/download/win for an automatic download.
This is technically not the same as the other versions of git, but it will work the same. For more information, visit
https://gitforwindows.org/. Alternatively you could just buy a Mac or dualboot with Linux.
Now that you have git, we must configure it globally. Go ahead and open up a Terminal or Command Prompt window and type in the following:
$ git config --global user.name "First Last" $ git config --global user.email "email@example.com"
git commitwill attach these credentials to every change you make in the codebase to help keep track of who changed what. It only needs to be done once on each machine. Now that we have Git, it's time to move on to Step 2.
Before we create our repository, it helps to have an idea of what a GitHub is, and what a repository helps us do.
As mentioned earlier, GitHub is a web-based repository hosting service that uses Git. This essentially means GitHub
allows us to use it to host our repository ("repo" for short) - a file storage location which we can use to store code.
In the context of our project, we will use GitHub Pages, a GitHub owned hosting service, to access the code on our repo
and generate a website.
In order to create a repo you first need a GitHub account! To get one, sign up Here! Once you have your account, go ahead and click the "Start a Project" button to create your repository. You should see the following:
The next step is very important. Your Repository name MUST be the same as your GitHub username. For example, if your username is SAASisgr8, your personal website's repository must be called SAASisgr8.github.io and will be located at https://SAASisgr8.github.io. If your repository name does not match your username, you will need to rename this repo or create a new one. Go ahead and keep this repo public, and check the box to initialize the repo with a README. The README is where you will provide visitors to your repository a brief explanation of what they are looking at and what code lies inside the repository. For our project, you don't need to worry about a gitignore file, or a license. However, in case you decide to include these on a different project, I will provide a brief explanation of both below:
Once you've finished with the above instructions, go ahead and click the "Create Repository" button. Congratulations, you have created your repository! Don't try to add any files here, we will come back to this page in a bit, so just (.git)ignore it for now and proceed to step 3.
For this chapter (and for future projects), you should memorize the following shell commands:
pwd- Print Working Directory - Gives an idea of where you are.
cd- Change Directory - Enters a directory.
ls- List Segments - Lists the contents of a directory (folder).
touch- Creates a file in the current directory.
mkdir- Make Directory - Creates a working directory.
/Users/Abhinav/documents/github. To get there, I would
cd documents/githubas terminal starts me off my home directory -
/Users/Abhinav/- when I open it. If you get lost, just type in
pwdand your terminal will list the pathway to your current directory. You can also go up one level by typing in
cd ..Once you decide on where you want your folder, type in
mkdir Githubto create your GitHub directory.
cdinside your GitHub directory. Our next step is to initialize git. Doing this is pretty easy, just make sure you're inside the right directory, and type in
git init. Once this finishes, we will move on to working with GitHub.
Remember when you set up your GitHub repository earlier? Now it's time to connect that to our local folder. Type in the following into your terminal and hit enter:
where you replace
git remote add origin https://github.com/User/User.github.io.git
Userwith your GitHub username. This pathway can also be found on the repository site from earlier if you click on clone/download:
This is an old screenshot of what my website's repo used to look like. Don't mind the file names or folders, yours will look different from mine.
Your terminal will not print any output, so make sure to
ls to see if your project folder is there. Then
cd inside and
There should be your README.md from earlier. Go ahead and use the
touch command from earlier to create an index.html. This will be the basis for your website
as we will discover in the next tutorial.
Once you've created your file, go ahead and type in
git status. You should see that git is properly set up, but that your index.html is "untracked". This means that git is not keeping
track of the edit history for this file, and it will not show up in GitHub unless you explicitly tell it to. In order to do that, type in
git add index.html. Likewise,
if you ever find yourself removing a file, use the
git rm command in the same fashion.
Open up your text editor of choice (Atom in my case) and try to modify your index.html by typing in
In order to tell github that you've changed this file, we're going to use a new command,
git commit. This will stage your commit, which essentially means you are making a checkpoint in your code
without telling github to keep track of a new file. Once you've typed this in, you might notice a screen pop up in your terminal. On Linux/Mac, this is vi - a unix based text editor. On Windows,
it may be another text editor. It will ask you for a "commit message" which is basically a short 1-2 sentence message for your collaborators to understand what exactly you've changed since the last commit.
For now, since we don't have any collaborators, just input "First Commit" or something, and hit escape and enter to exit this screen. You can also make this process a bit faster by typing in
git commit -m "Message Here"
to bypass the built in text editor. Also note that all commits are public, so don't make your commit message anything too crazy.
If you look at your web browser, you might notice that the files aren't showing up on GitHub. This is because we have not yet pushed the files to GitHub. While git is tracking those files, GitHub has not explicitly been told to store them yet. To rectify this, type in
git push and refresh your web browser. All
relevant files (index.html, README.md) should now show up.
We have skipped a command,
git pull because it will be of no use to us in series of tutorials. However, this is very important in a collaborative setting.
This command will be used to grab code others will have worked on from the GitHub repository so that we can stay up to date and edit their sections of the code if necessary.
NOTE: If you have multiple files that are being added, removed or just changed, you can use the
--all modifier to either
git add rm commit to
perform the command to all relevant files at once.
In collaborative environments it is also very important to use branches. In short, a branch is a way to organize your code while keeping it separate from your collaborators and the finished features that reside on the
Depending on the organization you are a part of, branches can signify different features that are being worked on, or just different users' work.
Within SAAS's website repository, we use branches to differentiate each person's work. You do not need to follow this for this series of tutorials, but here is a quick rundown of how branches work for when you start collaborating with others!
First, type in
git branch to see which branch you're working on right now. You should be on
master, which is the main branch used to hold code that you intend to use during deployment. To switch out to a new branch,
use the command
git checkout -b new-branch-name. This creates a new branch called
new-branch-name and switches the your current working branch to that one. Just type in
git branch now to confirm that this is the case.
If you ever need to switch to another existing branch, use the same
git checkout command without the
Note that when this is done, you will need to specify which branch you are altering when you use commands like
git push or
git pull. Typically this means that you will be using
git push origin your-branch to push new changes to your personal branch, not to
master where the latest complete "version" of the code resides, and
git pull origin master to grab new features that have
been reviewed and merged into the
master branch. Here,
origin refers to the specific repository on github that we cloned to our local folder earlier when we used the
git remote add at the beginning of this step.
Note that without branches,
git push and
git pull is equivalent to
git push origin master and
git pull origin master.
For a more visual review of how branches work, please visit this GitHub Blog.
We're almost done getting set up! Our last step is to publish to GitHub pages. Open up the Settings tab and scroll down until you see this:
Where you see the dropdown menu, select the master branch. GitHub requires that User Pages are built using the master branch.
If you read the paragraphs on branches in Step 4, I should also mention that it is advised to create a new source branch for the repository in the case that you accidentally push some code to the
master branch that breaks your site. To avoid this, first create a "Source" branch. Then just go to Settings -> Branches and change the default branch to "Source" instead of "master".
If you choose to do this, you must push code to your Source branch, then once you make sure that the code works, merge it into master.
If you've followed these steps so far with no issues, you should see the following:
Go ahead and visit the url https://user.github.io and enjoy your "Hello World" text. Congratulations! You've finished setting up the basis for your personal website.
Please visit Part 1 to learn more about HTML and CSS.