Git is a version control system that enables developers to organize their code with ease and in a safe place. You are allowed to either upload your code as open-source and public or private where only you and the people you choose can access it.

We will learn how to use it and also host our site for free on gh-pages.

What you will learn.

  1. Creating an account on git-hub.
  2. Installing git on your computer.
  3. Creating a simple one page HTML CSS website.
  4. Pushing the code to git-hub.
  5. Hosting your site on gh-pages.

Who is this tutorial for?

This tutorial is for a beginner in programming who knows some of HTML and working with the terminal. But if you don't know, do not worry because the tutorial will take you through every step in the process. If you are an expert in git, this tutorial may include too much detail for you, so feel free to go and check out my more advanced tutorials.

Creating an account on git-hub.

Creating an account on git-hub is completely free.  Paid versions are also available on Git-Lab which has more advanced features. The free version is good enough for most projects. You can skip this step if you already have an account.

Head over to https://github.com  and proceed to create an account.

After creating the account create a repository and name it: git-github.

Copy the push URL on your repository and paste it somewhere. We will require this later in the tutorial

Installing git on your computer.

Debian Ubuntu

If you are using Debian Ubuntu open the terminal in applications or by typing Ctrl+Alt+t .

  • In the terminal type $ sudo apt-get install git and follow the prompts to install it.
  • Once the installation is done type $ git --version in your terminal to check if the installation was successful.

Windows

  • For Windows users go to https://git-scm.com/ and install git bash on your computer.
  • This will provide you with a GUI to type in your git commands.

Mac

  • Install the XCode Command Line Tools. On Mavericks (10.9) or above you can do this simply by trying to run git from the Terminal the very first time.
  • $ git --version
  • If you don’t have it installed already, it will prompt you to install it.

Creating a simple one-page HTML CSS website.

Create a folder on the desktop named git-github then in the folder create a file index.html.

On Ubuntu terminal you can type $ cd Desktop && mkdir git-github && cd git-github && touch index.html

Create 2 other files to-ignore.txt and .gitignore

The file structure should be like this

|- git-github
|	|- index.html
|	|- to-ignore.txt
|	|- .gitignore

Open the created folder in your preferred code editor e.g text editor, visual studio code, sublime text etc. I will use visual studio code.

Before you start editing open the folder in the terminal and type git init to initialize git.

On vs code, you can open the terminal simply by clicking the terminal tab on the top bar or by pressing Ctrl+Shift+`.

If success full the output should be something like this:

Copy the code below to your index.html file and save the changes.

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git Tutorial</title>
    <style type="text/css">
      body {
        min-height: 100vh;
        background: linear-gradient(#0044ff 50%, #000000);
        color: rgb(255, 255, 255);
        box-sizing: border-box;
        padding: 10% 10%;
        text-shadow: 0 2px 2px #ffffff4b;
      }

      p {
        position: fixed;
        bottom: 0px;
        color: white;
      }
      a{
        background-color: #fff;
        padding: 0 20px;
      }

    </style>
  </head>

  <body>
    <h1>Git tutorial</h1>
    <h3>This website is a test for git and github</h3>
    <h4>Get more tutorials on <a href="https://developers.decoded.africa/"> www.decoded.africa</a></h4>
    <p>Made with love by Arnold :)</p>
  </body>

</html>

Pushing the code to git-hub.

Once the files are saved, again open your terminal making sure the working directory i.e git-github or the name of the folder you created.

  • Type $ git add .gitignore to enable the file to be tracked by git.
  • Type $ git add . to add the rest of the files
  • Type $ git commit -m “Type here any custom commit message to help you remember the changes you made”  this will add a custom commit message to git
  • To check the changes type $ git log

Still, in the terminal type $ git remote add and paste the code you copied while creating the repository.

e.g git remote add https://techspaceke@bitbucket.org/techspaceke/git-github.git

This links our remote repository to our local git installation

  • Type git push to finally push your code. You may be prompted for your password.

The output should be something like this

Hosting the site on gh-pages.

Once the code is pushed we will go to our GitHub account and open the repository we created.

Click on settings tab and scroll down until you see GitHub pages

On the sources drop down, choose master.

And just like that you have your site on GitHub.

Go to URL displayed on your GitHub pages section to view your site. NB: this may take up to 10 minutes to be activated.

Hurrah, you are done :)

You've successfully subscribed to Decoded For Devs
Welcome back! You've successfully signed in.
Great! You've successfully signed up.
Your link has expired
Success! Your account is fully activated, you now have access to all content.