Code Craft # 4 - Into the github basics

Before You Start!

Before we begin exploring the basics of Git and GitHub, it’s essential to ensure that you have your environment set up correctly. Git is a powerful version control tool widely used by developers to manage code and track changes over time. GitHub, on the other hand, is an online platform that integrates with Git, allowing you to store, share, and collaborate on projects in the cloud.

If you haven’t set up Git on your machine or don’t have a GitHub account yet, don’t worry! In this complete guide, you will be walked through the steps to install Git, create your GitHub account, configure your SSH keys, and much more. This will ensure that you're ready to follow the rest of the content securely and effectively.

What You Should Know:
Install Git on your operating system
Configure your GitHub account and link it to Git
Manage your SSH keys for more secure authentication
Verify your setup to ensure everything is working properly

To get started, follow the step-by-step instructions in our complete guide to setting up Git and GitHub for beginners. This guide will provide detailed instructions to ensure your development environment is ready for using Git and GitHub.

---

Into the basics

Create the Repository

Now that you have your Git and GitHub set up, it's time to create your first repository! A repository is where all your project files, code, and version history will be stored. This step-by-step guide will show you how to create a repository on GitHub.

1. Sign in to GitHub
2. Open your web browser and go to GitHub.
3. If you already have an account, click on Sign in at the top-right corner and enter your credentials.
4. If you don’t have an account yet, click on Sign up to create a new account.
5. Create a New Repository
6. Once you’re signed in, click on the + sign in the top-right corner of the screen.
7. From the drop-down menu, select New repository
8. Set Repository Details
9. Repository name: Choose a unique name for your repository. For example, if you're working on a project called "MyApp", you can name the repository MyApp.
10. Description (optional): Write a brief description of your project. For example, "This is a simple web application built with HTML, CSS, and JavaScript."
11. Public or Private: Decide whether you want your repository to be public or private: Public: Anyone can see and contribute to your repository; Private: Only you and collaborators can access the repository.
12. Initialize the Repository
13. Initialize this repository with a README: It's recommended to check this box, as a README file is essential for providing an introduction to your project.
14. Add .gitignore: A .gitignore file tells Git which files or directories to ignore (for example, system files or IDE configurations).
15. You can choose a template based on your project type (e.g., Node, Java, Python).
16. Choose a license (optional): If you want to specify the terms under which others can use your code, you can add a license. GitHub provides a variety of open-source licenses to choose from.
17. Create the Repository Once you've filled out the necessary details, click on the Create repository button.
18. Clone the Repository to Your Local Machine (Optional) To start working with the repository on your local machine, you can clone it using Git:
19. Go to the repository page on GitHub.
20. Click on the Code button and copy the URL under Clone with HTTPS.
21. Open your terminal and run the following command:

git clone [e-mail]:USERNAME/REPOSITORY-NAME.git

• This will create a local copy of the repository on your computer where you can start adding files and making changes.
• To test this, cd int othe new folder that was downloaded and the enter git remote -v on you command line: You should see and output similar that:

origin  [e-mail]:USERNAME:git_test.git (fetch)
origin  [e-mail]:USERNAME:git_test.git (push) 

1. Add Files to Your Repository
2. Create or copy the project files you want to add to the repository into the cloned folder on your local machine.
3. Use the following Git commands to add, commit, and push changes:

git add .
git commit -m "Initial commit"
git push origin main

Use the Git Workflow

The Git workflow is a standard process used to manage and track changes in your project using Git. It helps developers maintain organized, consistent, and collaborative development environments. Understanding and following the Git workflow is crucial for effective version control, especially as you start working with teams and collaborating on code.

Git Workflow Steps

Let’s break down the typical Git workflow into simple, digestible steps:

1. Clone the Repository (for the first time)

• When starting a project, you need to create a local copy of the repository from GitHub (or any other remote service). This is done using git clone.

git clone https://github.com/your-username/your-repository.git

• This command will download the entire repository to your local machine.

1. Create a New Branch (Optional but recommended)
2. When working on a feature or fix, it’s a good practice to create a new branch. This keeps your main branch clean and allows you to experiment without affecting the main project. The main branch (commonly named main or master) should always contain stable, production-ready code.

git checkout -b feature-name

• This creates and switches to a new branch called feature-name. You can replace feature-name with a descriptive name for your task.

1. Make Changes and Modify Files

2. Now that you’re working on your feature branch, make your changes to the codebase. This could be adding new files, editing existing ones, or fixing bugs.

3. Stage Changes

4. Git doesn't automatically track changes in your files. After you make modifications, you need to "stage" the changes, which tells Git which files you want to include in your next commit.

5. To stage files, use:
   

git add <file-name>  # Add a specific file
git add .            # Add all modified files

1. Commit Changes
2. After staging your files, the next step is to commit the changes. A commit is like a snapshot of your code at a particular point in time.
3. When committing, always provide a meaningful commit message that explains what changes were made. This helps you and others understand the history of the project.

git commit -m "Add new feature to index page"

1. Push Changes to GitHub
2. After committing, it’s time to push your changes to the remote repository (GitHub). This uploads your changes and makes them accessible to others.
3. If you’re working on a branch (like feature-name), push the branch to GitHub:

git push origin feature-name

• If you're working on the main branch (or whatever the default branch is named), use:

git push origin main

1. Create a Pull Request (for Collaboration)
2. If you're working in a team or collaborating on a project, after pushing your branch, you’ll typically open a Pull Request (PR) on GitHub. A PR lets others review and discuss your changes before they are merged into the main branch.

3. On GitHub, navigate to your repository, click on the Pull Request tab, and create a new PR from your feature branch to the main branch.

4. Merge Changes

5. Once the pull request is reviewed and approved, it will be merged into the main branch. If you’re working solo and confident in your changes, you can merge it directly through the command line:
   

git checkout main       # Switch back to the main branch
git merge feature-name  # Merge changes from your feature branch
git push origin main     # Push merged changes to GitHub

1. Pull the Latest Changes (before working again)
2. Before starting work the next day (or anytime you want to sync with the latest code), always make sure to pull the latest changes from the remote repository. This is particularly important if you are collaborating with others.
3. Example:

git pull origin main

Why This Workflow Matters

• Keeps Your Code Organized: By following a clear workflow, you avoid conflicts and ensure that each change is logically grouped and tracked.
• Prevents Conflicts: Working on branches means you can develop independently without affecting the main project. It also makes it easier to merge changes later.
• Encourages Collaboration: Using pull requests and branching allows multiple developers to work on different features simultaneously and merge their work without disrupting the main codebase.
• Improves Version Control: Committing often with meaningful messages helps you track every change and revert to previous versions if necessary.

Modify Files

Now let’s say you’re working on a project and want to modify files. For this example, we’ll create a new HTML file, modify it, and then commit those changes using the Git workflow.

1. Scenario: Create and Modify index.html Clone the repository (if you haven’t already): If you haven’t cloned the repository to your local machine yet, do so by running this command in your terminal:

git clone https://github.com/your-username/your-repository.git
cd your-repository

• This will create a local copy of your GitHub repository.

1. Create a new file (index.html): Now, let’s say you want to create a new HTML file called index.html:

Create a new file using a text editor or the command line.

touch index.html

1. Open index.html in your editor (e.g., Visual Studio Code, Sublime, or even a simple text editor) and add some basic HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Web Page</title>
</head>
<body>
  <h1>Welcome to My Web Page!</h1>
  <p>This is a simple page created for the example.</p>
</body>
</html>

1. Modify an existing file: Let’s say you already have a file, style.css, and you want to modify it to add some styles for the index.html file.

Open style.css and add some CSS styles:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}
h1 {
  color: #333;
}

Push Your Work to GitHub

Once you’ve created and modified your files, you need to follow these steps to push your changes to GitHub.

1. Stage your changes: After creating and modifying your files, you need to tell Git which changes you want to include in your next commit. To stage the changes, use:

git add index.html style.css

1. If you modified several files and want to stage everything, you can use:

git add .

1. Commit your changes: After staging the files, you need to commit them with a message that explains what you’ve done. For example:

git commit -m "Add index.html and modify style.css"

1. Push the changes to GitHub: Now that your changes are committed locally, it’s time to push them to GitHub so they are saved remotely. To push the changes, use:

git push origin main

1. This will push your changes to the main branch of your GitHub repository.

Summary of the Example Workflow:

• Clone the repository (if not done already).
• Create and modify files:
• Created index.html and added basic HTML structure.
• Modified style.css to add custom styles.
• Stage changes:
• Used git add to stage the files you modified.
• Commit changes:
• Committed your changes with a clear message using git commit -m.
• Push changes:
• Pushed the commit to GitHub with git push origin main.

---

By following this Git workflow, you can effectively track your changes and collaborate with others on your project. Whether you're adding new files or modifying existing ones, this process ensures your work is always saved and shared on GitHub.