Creating Git and Github

Introduction

Git and GitHub are essential tools for modern software development. Git is a version control system that helps developers track changes, collaborate with others, and maintain the history of their projects. GitHub is a web-based platform that uses Git for version control and provides additional features like collaboration, issue tracking, and project management. This guide will walk you through setting up Git, creating a repository, making commits, and performing basic Git operations like pushing and pulling.

Git terminology

• Repository (repo): The directory, located at the top level of a working tree, where Git keeps all the history and metadata for a project. Repositories are almost always referred to as repos. A bare repository is one that isn't part of a working tree; it's used for sharing or backup. A bare repo is usually a directory with a name that ends in .git—for example, p_roject.git._

• Commit: When used as a verb, commit means to make a commit object. This action takes its name from commits to a database. It means you are committing the changes you have made so that others can eventually see them, too.

• Branch: A branch is a named series of linked commits. The most recent commit on a branch is called the head. The default branch, which is created when you initialize a repository, is called main, often named master in Git. The head of the current branch is named HEAD. Branches are an incredibly useful feature of Git because they allow developers to work independently (or together) in branches and later merge their changes into the default branch.

• Remote: A remote is a named reference to another Git repository. When you create a repo, Git creates a remote named origin that is the default remote for push and pull operations.

• Commands, subcommands, and options: Git operations are performed by using commands like git push and git pull. git is the command, and push or pull is the subcommand. The subcommand specifies the operation you want Git to perform. Commands frequently are accompanied by options, which use hyphens (-) or double hyphens (--). For example, git reset --hard.

Setting Up Git

Installing Git
To start using Git, you need to install it on your system. Here are the installation steps for different operating systems:

• Windows: Download the installer from Git for Windows, run it, and follow the installation instructions.

• macOS: Install Git using Homebrew by running the command brew install git in your terminal.

• Linux: Install Git using your distribution’s package manager. For example, on Ubuntu, you can run sudo apt-get install git.

• Once installed, open your terminal or Git Bash (if you’re on Windows) and run this code: git --version

You should see the installed Git version. Congrats, you’re ready to roll!

Configuring Git

• If you do not have a Github account you will need to create an account.
  Click here a Github account.

• Follow the prompts to create an account with your email address.

You need to configure Git with your user information. Open your terminal and run the following commands:

git config --global user.name "Your Name"
git config --global user.email "[e-mail]"

These commands set your name and email, which will appear in your commits.

Creating Your First Repository.

Initializing a New Repository

To create a new Git repository, navigate to your project directory in the terminal and run:

git init

This command initializes a new Git repository in the current directory, creating a .git folder that contains all the necessary files for version control.
PS: Note that the .git folder is hidden.

• Great! You’ve just created a Git repository.

Adding Files to the Repository:

• Create some files (e.g. index.html, style.css, script.js etc)

• You can use a Linux command such as touch to create a file or use Visual Studio code (VSC) editor. In this article we will use VSC.

• From the terminal (Git Bash), create a directory named GitLab using the command mkdir GitLab

• In Git bash, type code . to open Visual studio code editor.

• Create your files index.html, style.css, script.js.

• Add the block of codes below to the index.html file you just created.

HTML code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Welcome to My Simple Website</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="home">
            <h2>Home</h2>
            <p>This is the home section of the website.</p>
        </section>
        <section id="about">
            <h2>About</h2>
            <p>This is the about section of the website. Here you can find information about this website.</p>
        </section>
        <section id="contact">
            <h2>Contact</h2>
            <p>This is the contact section of the website. Feel free to get in touch!</p>
            <button onclick="showAlert()">Click Me</button>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 Simple Website. All rights reserved.</p>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header {
    background-color: #4CAF50;
    color: white;
    padding: 15px 20px;
    text-align: center;
}

header nav ul {
    list-style-type: none;
    padding: 0;
}

header nav ul li {
    display: inline;
    margin: 0 10px;
}

header nav ul li a {
    color: white;
    text-decoration: none;
}

main {
    padding: 20px;
}

main section {
    margin-bottom: 20px;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    bottom: 0;
}

scripts.js

function showAlert() {
    alert('Button clicked!');
}

Adding the created files to the repository

• To add the created files to the repository index.html, style.css, script.js, run the command git add . This can be done using the Git Bash console or from VsCode

git add .command adds all the files and changes in the current directory to the repository.
If you want to add specific files you use git add "filename"'

To check the status of your staged files you use git status.

Committing Changes
Once you have staged your changes, you can commit them to the repository with a descriptive message: git commit -m "Your commit message"

The -m flag in this command tells Git that you're providing a commit message.

This command creates a snapshot of the staged changes and records it in the repository’s history.

Pushing and Pulling

• To push your local commits to a remote repository on GitHub, you first need to add the remote repository:
  You can create the reposistory first in Github or use the command below
  git remote add origin https://github.com/username/Gitlab.git

• Log in to your git account and click New to create a new repository

• Enter the Repository name and give a description (optional).

• Click Create a repository

• Then, push your commits to the remote repository: git push origin main Replace main with your branch name if you are working on a different branch.

• Open Github to view the added files:

Pulling Changes from GitHub
To fetch and integrate changes from a remote repository, use the following command: git pull origin main

This command updates your local repository with the latest changes from the remote repository.

Additional Git Operations

Branching
Branches allow you to work on different features or bug fixes independently. To create a new branch, use: git checkout -b new-branch

• To switch to an existing branch, use: git checkout existing-branch

Merging
To merge changes from one branch into another, first switch to the branch you want to merge into: git checkout main

Then, merge the other branch:
git merge new-branch

Viewing Commit History

To view the commit history of your repository, use: git log

• You can also use git log --oneline for a simplified view.

Resolving Conflicts

Conflicts may arise when multiple changes are made to the same part of a file. Git will mark the conflicts in the affected files, and you will need to resolve them manually. After resolving conflicts, stage the resolved files and commit the changes.

git add resolved-file
git commit -m "Resolved merge conflict in resolved-file"

Conclusion

Git and GitHub are powerful tools that streamline the development process, facilitate collaboration, and ensure that your code is version-controlled and backed up. By following this guide, you should be able to set up Git, create and manage repositories, make commits, and handle basic Git operations.