Education Committee


Introduction to getting started with git

How To Build Your Own Personal Website

Part 0: An Introduction To Git!

By Abhinav Bhaskar, Anthony Yu




Purpose

This series of tutorials will be aimed at teaching you the very fundamentals of web development and using what you learn to build your very own personal website using a mix of HTML (Part 1) and CSS (Part 2 and Part 3). Because GitHub Pages is free and accessible to anyone with a GitHub account, we will use it to host our finished website. However, due to this, certain features may not be available to us as GitHub Pages is not able to host back end languages such as node.js, PHP, Django. Future tutorials may be focused around javascript or back-end development, but for now we will try to create something simple using what we have. This tutorial will assume no prior programming knowledge and will be a prerequisite to working as a part of SAAS's Web Development Committee. So without further ado let us get started!

Introduction: What is Git?

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.


Step 1: Installing 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 "myemail@email.com"
Every git commit will 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.

Step 2: Creating a Repository on GitHub

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:

Creating a Repository

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:

  • A .gitignore file contains a list of files in your repository that git should ignore and not track. Such files would include temporary files, OS related files, scripts that generate output, etc... basically anything your fellow collaborators don't want to see when they open the repo or things that won't be included in the final build of your project.
  • A license details the conditions that others must meet in order to share or use your work on GitHub. Because GitHub is used to share open source software, licenses are an easy way in order to make sure your work is not plagiarized or used without your knowledge. Without one, other developers may not use your code. The most common license is the MIT license which allows others to use your work as long as they give you credit and relieves you of any liability. For a more complex rundown of the various types of licenses, visit this GitHub-owned Site.

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.

Step 3: Creating a Local Project Folder

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.
Now open up your terminal (Mac/Linux) or Git Bash (Windows). Choose a spot on your computer to create a folder to hold all files for our newly created repository. You can create this folder wherever you want, but as an example, mine is located at /Users/Abhinav/documents/github. To get there, I would cd documents/github as terminal starts me off my home directory - /Users/Abhinav/ - when I open it. If you get lost, just type in pwd and 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 Github to create your GitHub directory.

Next, cd inside 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.

Step 4: 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:

git remote add origin https://github.com/User/User.github.io.git
where you replace User with your GitHub username. This pathway can also be found on the repository site from earlier if you click on clone/download:

clone/download repo

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 ls again. 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 <p>Hello World</p>. 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 master branch. 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 -b. 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.

Step 5: Using GitHub Pages

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:

github

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:

github

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.