GitHub: Mastering Git and GitHub: From Basics to Building Your First Web App

Introduction

Git and GitHub have become indispensable tools for modern developers, powering everything from personal projects to enterprise-level software development. Git, a distributed version control system, allows developers to track changes, collaborate seamlessly, and manage code across different branches with ease. GitHub, built on top of Git, takes it a step further by providing a cloud-based platform for collaboration, workflow automation, and open-source contributions.

In this guide, we’ll break down the essentials of Git and GitHub — from understanding core Git commands like init, add, and commit, to navigating the GitHub workflow of forking, branching, and creating pull requests. We’ll also explore GitHub Actions, which enable you to automate tasks such as building, testing, and deploying your applications.

To tie it all together, you’ll walk through a hands-on project: creating and pushing a simple web application to GitHub using Git Bash. Whether you’re a beginner just getting started with version control or an aspiring DevOps engineer, this guide will give you a clear roadmap to confidently use Git and GitHub in your development journey.

Git: is a powerful tool for developers

i ) version control, ii) collaboration, iii) Branching, iv) merging

Understanding Git commands

git init - creates a new git repository in the current directory.

git add - stages changes to be commited.

git commit - records changes to the repository.

Github work flow : From fork to pull request

1. Fork - create a copy of the original repository.

2. Clone - download a copy of the forked repository to your local machine.

3. Branch - create a new branch to work on your changes.

4. Commit - save your changes to the repository.

5. Push - upload your changes to your remote repository.

6. Pull - submit your changes for review.

Github Action : Automating your work flow similar to jenkins

Task Example,

Build compile your code into a executable file.

Test Run automated tests to ensure your code work as expected.

Deploy Publish your code to a web server or other platform.

Prerequisite

1. Download GitBash and install on your local host, After installed search GitBash on your local host search box to access it.

2. Sign up to Github on your browser.

To Create A Web App Using Github and Gitbash Terminal

Sign in to your GitHub account, click New to create a new repository.

Give your repository a name, which is the name of your app.

check the box for Add a Readme file. leave the rest in default and create.

Navigate back to your local host, search and open your Gitbash terminal.

Run - git config —global user.name (your GitHub username) and enter.

Run - git config —global user.email (your email) and enter.

Run - mkdir (your app name) To make a diectory.

Run - cd (your app name) To enter the directory.

Run - git init To initialize an empty repository in your local host….It will create a path with in your c.drive .

To see it in your local host, go tp your file explorer and click on users you will find the folder Ghost in there.

Navigate back to your Gitbash terminal.

Run - touch index.html To create an index.html file.

Run - vi index.html To open a text editor where you can input your code.

Get your HTML code for the web app and paste it within the text editor by typing the i button first to be able to paste or write something.

Run - esc:wq To save and exit.

Navigate back to GitHub, click on the code button, and copy the HTTPS URL.

Navigate back to GitBash terminal.

Run - git remote add origin (your HTTPS URL link).

Run - git add index.html To add your file.

Run - git status To see the status of what you are doing.

Run - git commit -m (add your message e.g, “my first commit“) and enter.

Run - git status To check if its committed successfully.

Run - git push origin master To push it into master in the github repository.

Navigate back to github and check if the code has been pushed successfully.

An authentication pop up will appear to authenticate.

When it pushed successfully, you will see compare and pull request, click on and you will find the html code in.

SUCCESS…….

Join me on this cloud adventure and elevate your tech skills! Sign in to the Azure portal, follow my easy instructions, and unleash the power of Being in the cloud.

Subscribe to my blog for more tech tips and tricks that will keep you ahead in the digital game. Your journey to mastering Cloud computing starts here!

🌟 Thank you for being a part of this incredible journey! Together, let's unlock new opportunities and make the most out of our digital experiences. Happy computing! 🌟