Introduction

Ever lost track of changes in your code? Or struggled to collaborate on a project remotely? If so, you're not alone. This is why version control systems like Git and GitHub have become relevant tools for software development.

They work together as powerful version control tools that help developers—from beginners to experts—track changes in their projects both locally and remotely. If your project size is a complex application with a global team, these tools provide the foundation for efficient development workflows.

In this post, you will learn how to:

1. Set up Git and Github.
2. Connect your local project version (Git) with the remote version (GitHub).
3. Know and Use Git terms and commands.
4. Deploy your HTML project on GitHub.

Prerequisites

1. HTML project.
2. Install Git.
3. Create a Github account.

Using Git as a Version Control.

Git is a popular open-source version control system that handles projects(small to very large projects) with speed and efficiency. Git stands tall amongst other version control systems with the following key features:

1. Branching and Merging: Git allows you to have more than one local branch that can be a standalone. You can switch from one branch to another, merge a branch to another, delete an already merged branch, and create a private branch.
2. Small and Fast: Git is super fast because it's built to operate on Linux Kernel and handle large repositories.
3. Distributed: This feature is flexible and reliable which makes teamwork easy, time-saving, and less stressful. When working in teams, Git keeps your project files super safe with every team member having a complete copy.
4. Data Assurance: Git ensures that your project files are checksummed using cryptographic integrity which makes it impossible for a change in file date, commit message or any other data and files can only be retrieved by its checksum.
5. Staging Area: Git allows you to stage and commit any file quickly without committing any modified file in the working directory.
6. Free and Open Source: Git is free and open-sourced under the GNU General Public License Version 2.0.

What are the Basic Git Commands?

When using Git, you will mostly use the following commands:

1. Git init: This command creates an empty repository or re-initializes an existing repository for a project.
2. Git add: This command adds file(s) to the index of the current content found on the working tree.
3. Git commit: This command is used to write a log message describing the changes made on a file(s).
4. Git push: This command is used to update remote refs (GitHub) with associated objects.

You will use these commands to initialize and deploy your project on Github Pages.

How to Set Up Github for Deployment–Github pages.

GitHub is a cloud-based version of Git. It is a platform that allows you to store, share, and collaborate with others to write code remotely. Storing your code in a "repository" on GitHub enables you to:

1. Show or share your work.
2. Track and manage code changes over time.
3. Other devs can review your code and recommend improvements.
4. You can collaborate on a shared task and others won't be affected by your modifications until you're ready to merge them.

To get started, you need to create a GitHub Account.

After creating an account, click on the ”+” sign to show a dropdown of different options.

Choose "New Repository" from the dropdown options.

You'll be redirected to a page.

Enter the repository name using this format, username.github.io (username is what is close to the marked field), and create.

If you don't want to deploy your HTML project on Github Pages, just name your repository without the "github.io".

After creating your repo, you'll be redirected to another page, copy the commands, go back to your project, and enter the command in the project's opened terminal–ctrl+`.

When this runs successfully, go back to the repository you created and refresh the page. Your HTML project is now live and can be viewed using this url pattern

"https://yourusername.github.io"; replace the "yourusername" with your GitHub username. You can share the link with family and friends so they can view your deployed project.

Did you notice that the file structure in your code editor is replicated in the repository you created when you refreshed the page, and a new file (README.md) is created?

About the README.md File

This file serves as the landing page and documentation for your project.

A well-crafted README typically includes:

1. Project name and description of what your project does and its purpose.
2. Installation instructions on how to set up the project locally.
3. Usage information on how to use the project's features
4. Documentation links where to find more detailed information
5. Contributing guidelines on how others can contribute to your project.
6. License information of terms under which your code can be used.
7. Contact information on how to reach the maintainers

The `.md` extension stands for Markdown, a lightweight formatting language that allows you to add headings, lists, links, images, and more to plain text.

How to Maintain Your Deployed Project on GitHub Pages.

GitHub Pages automatically rebuild your site whenever changes are pushed to the designated branch.

Here's the workflow for updating your deployed project:

1. Make Changes Locally

Edit your HTML, CSS, or JavaScript files in your preferred code editor.

2. Check Status

Before committing, check which files have been modified:

git status

This command shows all changed files that aren't yet staged for commit.

3. Stage Changes

Add the modified files to the staging area:

git add . # Add all changes

# OR

git add index.html # Add specific files

4. Commit Changes

Create a snapshot of the staged changes with a descriptive message:

git commit -m "any message"

5. Push to GitHub

Send your changes to the remote repository:

git push

6. Verify Deployment

After pushing, GitHub Pages will automatically rebuild your site. This typically takes a few seconds to minutes. Once complete, visit your site URL to confirm the changes are live.

How to Collaborate with Other Developers.

One of Git and GitHub's greatest strengths is facilitating collaboration. When working with a team, you'll use additional concepts to ensure smooth integration of everyone's work:

Branches allow team members to work on separate features simultaneously without interfering with each other:

1. Create a new branch: `git checkout -b feature-login-page`

2. Make changes and commit them to your branch

3. Push your branch to GitHub: `git push origin feature-login-page`

Pull requests (PRs) are GitHub's way of proposing changes and requesting reviews:

1. After pushing your branch, visit your repository on GitHub

2. Click "Compare & pull request"

3. Add a title and description explaining your changes

4. Request reviews from team members

5. Discuss and refine the code through comments

6. Once approved, merge the changes into the main branch

Keeping in Sync To stay updated with others' work:

1. Fetch the latest changes: `git fetch`

2. Pull updates into your branch: `git pull origin main`

3. Resolve any conflicts that arise

4. Continue working with the latest code

This collaborative workflow ensures that everyone's contributions can be reviewed, tested, and integrated methodically, maintaining code quality and project stability.

How to Troubleshoot Common Git Issues.

Even experienced developers encounter Git challenges. Here are solutions to common issues:

"Permission denied" When Pushing

This typically occurs when your authentication isn't set up correctly:

- Verify you're using the correct username/password or SSH key

- Ensure you have write access to the repository

- Check if you need to authenticate with a personal access token

Merge Conflicts

When Git can't automatically merge changes:

1. Use `git status` to identify conflicted files

2. Open the files and look for conflict markers (`<<<<<<<`, `=======`, `>>>>>>>`)

3. Edit the files to resolve the conflicts

4. Mark as resolved with `git add`

5. Complete the merge with `git commit`

Accidental Commits

If you committed something you shouldn't have:

- For the most recent commit: `git reset --soft HEAD~1`

- To remove a file from the most recent commit: `git reset HEAD~1 file.txt` followed by corrected commits

- For more complex situations, consider `git rebase -i` to edit history

Large Files Rejected

GitHub has file size limitations:

- Keep files under 100MB when possible

- Consider Git LFS (Large File Storage) for larger assets

- Look into alternative storage for very large files

Remember, when you encounter Git problems, the command line often provides helpful error messages and suggestions. Read them carefully for clues about how to proceed.

Conclusion

Both Git and Github have been very beneficial in keeping track of changes and enhancing collaboration with other team members.

GitHub (GitHub pages) also provides deployment privileges for HTML projects and it automatically builds when changes are made to any of the project files.

When you continue using the GitHub commands, you will be familiar with them, and if you encounter any error while using Git or GitHub, you should refer to online resources for assistance.

Is this post interesting to you? PLEASE SHARE with other devs.