Git and Github Practical for beginners

August 24, 20205 minutes read

This blog will guide you through step by step process to create a git repository, push it to GitHub and host a simple HTML page.

Who is this blog for?

If you are getting started with git and GitHub and want to get your hands dirty with a real-world use case.
If you are an instructor and want to use the guide to teach beginners.

Pre-requesites

Install Git: https://git-scm.com/download/win
Create a Github account: https://github.com/join
Basic knowledge of Git and Github (Optional)

Open git bash program

To open git bash got to Start Menu and search Git bash
Windows 7:
download

Windows 10:

gitbash-start

You should see something like this: Screenshot_18

On Mac or Linux:
Open up the terminal.

Configure GIT:

If you have already configured git skip to the next step.

On the console type:

git config --global user.name subesh

And then,

git config --global user.email su1b1esh@gmail.com

This will help track who made the current change.

Creating a repository

Step 1: Create a project directory

Before creating a repository we will need a directory to place our code. Go to the path where you want to create your project and type.

mkdir my-app

mkdir command creates a directory.

Step 2: Change the directory to the project directory

cd my-app

This will change the current directory to my-app directory.

Step 3: Initialize git

Be sure that you are in the right directory and then run:

git init

You should message like this:

Initialized empty Git repository in /Users/subeshbhandari/client-app/.git/

Good job! you have successfully created your first git repository. Now let’s add some changes.

Making some changes

Step 1: Creating a file

To create a file we will use a command named touch:

touch index.html`

This will create an HTML file in the current directory. To check if it’s created not use the command ls.

ls

You will see:

index.html

Step 2: Add some text in HTML file

If you find it difficult to open the file using the console. type the following command.

start .

This will open the file explorer on windows. You can then right-click the file and open it with any code editor.

If you don’t have any tool and can’t open the explorer use the following command to open with notepad and paste the code.

notepad index.html

Open the HTML file using your favorite code editor and add some HTML code or paste the below if you want to copy:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: #2f54c3;
        height: 100vh;
      }

      h1 {
        font-size: 4rem;
        font-family: arial;
        color: white;
      }

      a {
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>Hi! I am Subesh</h1>
  </body>
</html>

Remember to change it to your name in the <h1> tag.

Commit the file

Now that we have made changes, let’s commit (version) the change.

Step 1: Add the file to the staging area

Use the following command:

 git add index.html

This will add the file to the staging area.

Step 2: Check the status

Now let’s see if the file has been staged or not:

git status

You should see a message like this:

On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
  new file:   index.html

Step 3: Commit the change

This is the step where we version our code:

git commit -m "My first commit"

Great! You have successfully created your first commit.

Create a Github Repository and push code

We will create a Github Repository to push our local repository to a server.

Step 1: Go to Github and select New Repository

Step 2: Name your repository as my-app

Ignore everything below and click Create Repository.

You should see something like this: Screen Shot 2020-08-09 at 10 18 28

Step 3: Push your code to GitHub

Under the section ..or push an existing repository from the command line copy the first line

git remote add origin git@github.com:<username>/my-app.git

Then push the code to GitHub

git push -u origin master

For the first time, you will see a prompt for Github login. Log in with credentials and the code will be pushed. Github Login Prompt

Check your repository in GitHub to see if the code has been pushed.

Hosting the site

Now that you have successfully pushed your code we will host it in Github.

Step 1: Go to repository settings

Step 2: Under GitHub pages section select source and select master

Step 3: Open the shown URL

Congrats! You have successfully hosted your site on Github.

What you’ve learned:

How to create a git repository
How to push code to Github
How to host site using Github