Local Machine to GitHub Repo

Version control is a fundamental practice in modern software development and DevOps. It enables developers to track changes, collaborate efficiently, and maintain a complete history of their codebase. One of the most widely used version control systems is Git, while GitHub provides a cloud based platform for storing and managing Git repositories.

In this project, we will explore the complete process of moving code from a local machine to a GitHub repository. By the end, you will understand how to initialize a Git repository, track changes, create commits, connect to GitHub, and push your code to a remote repository.

Workspace Preparation:

Install the terminal environment and tools required to perform Git operations on Windows or macOS. This environment allows you to execute Git commands for version control, repository management, and collaboration.

1. GitBash

Download and install the official Git package for your operating system (Windows, macOS, or Linux). The installer includes Git and the tools required to perform version control operations from the command line.

Git Bash provides a Unix-like command-line environment on Windows, allowing users to execute Git commands and work with shell utilities commonly used in software development, cloud computing, and DevOps workflows. It offers a consistent experience similar to Linux and macOS terminals, making it an industry standard tool for developers and DevOps engineers.

Using standardized tools and environments across the software development lifecycle promotes operational excellence by improving consistency, collaboration, and automation. A common command-line interface helps teams reduce environment specific issues, streamline workflows, and maintain reliable development and deployment processes.

       # Visit: https://git-scm.com/downloads

Global Identity Configuration

Before creating commits, configure your global Git profile by setting your username and email address. Git uses this information to identify the author of each commit, ensuring that all changes are correctly attributed to you across your repositories.

Properly configuring your Git identity improves traceability and accountability, making it easier to track contributions, collaborate with other developers, and maintain an accurate project history.

1. Set Global Username

Configures your identity in the global .gitconfig file on your local machine, ensuring that all commits are consistently attributed to you.

Git is a distributed version control system, and every change must be associated with an author identity to support traceability, collaboration, and accountability across teams.

This follows the principle of operational excellence by maintaining clear ownership, auditability, and a reliable history of changes within the codebase.

      git config --global user.name "Your Name"

2. Set Global Email

Associates your email address with all commits made from your local Git environment.

This email is used by platforms such as GitHub to map your local Git activity to your remote user profile, including your avatar, contribution history, and activity graph.

From a security and governance perspective, this ensures that every commit is tied to a verifiable identity, supporting authentication, traceability, and accountability within collaborative development workflows.

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

Local Repository Initialization

Create a dedicated project directory and initialize a Git repository within it.

This sets up Git's version control framework by creating a hidden .git directory, enabling the project to track file changes, manage revisions, and support collaborative development workflows from the start.

1. Create Project Directory

Creates a new directory named website and changes the terminal's current working directory to that location.

Organizing each project in its own dedicated directory helps prevent accidental file modifications, simplifies project management, and maintains a clean and structured development environment.

This aligns with the principle of Operational Excellence by promoting effective workspace organization, consistency, and maintainability across projects.

      # Creates a new directory (folder).
      mkdir website

      # Changes the current directory.
      cd website

2. Initialize Git Engine

Initializes a Git repository by creating a hidden .git directory, which acts as the local database for storing version history, configuration settings, and metadata related to your project.

Without this initialization step, Git cannot monitor file changes, record commit history, or provide version control capabilities.

This supports the principle of Reliability by establishing a solid foundation for change tracking, version management, and recovery from unintended modifications.

      # Initializes a new Git repository in the current directory.
       git init

Artifact Creation

Create your first web asset within the project directory.

This file serves as the foundation of your web application and becomes part of the source code that Git can track, version, and manage throughout the development lifecycle. Starting with a structured project asset helps establish good development and version control practices from the outset.

1. Generate index.html

Creates an empty file named index.html in the current working directory.

The index.html file serves as the default entry point for most web servers and static hosting platforms such as GitHub Pages, allowing it to be automatically loaded when a user accesses a website root.

This follows the principle of Reliability by adhering to standard web conventions, ensuring predictable behavior and consistent application structure across hosting environments.

      # Creates an empty file or updates the timestamp of an existing one.
       touch index.html

Content Authoring (Vi/Vim)

Learn how to use an industry-standard command-line text editor to create and manage your website content.

This skill enables you to efficiently edit files directly from the terminal, which is essential for remote development environments, server management, and professional software engineering workflows where graphical editors may not be available.

1. Open File in Vim

Opens the index.html file in the Vim text editor for direct modification within the terminal.

Editing files via the command line is a fundamental skill in DevOps and system administration, particularly in environments where GUI-based editors are unavailable, such as remote servers and containers.

This aligns with Operational Excellence by promoting proficiency in terminal-based tooling, improving efficiency, and enabling consistent development across diverse environments.

      vi index.html

2. Enter Insert Mode

Switches Vim from Normal Mode to Insert Mode, enabling direct text input and file editing.

Vim is a modal text editor, meaning different modes are used for navigation and editing. Insert Mode must be explicitly activated before content can be added or modified.

This supports Operational Excellence by enabling efficient, precise text manipulation through a structured, mode-based editing workflow.

      # Press 'i' on your keyboard

3. Add Website Content

Adds the website’s HTML structure and content to the file.

This markup defines what is rendered in the browser and determines how users will view and interact with the webpage when it is deployed.

This aligns with Reliability by ensuring the application has a valid, well-defined entry point that can be correctly interpreted and displayed by web browsers.

      # Paste your HTML content (Resume, Website, etc.)
      # TIP: You can generate a sample resume template!

4. Save and Exit

The command :wq in Vim means write and quit, where w saves the current changes to disk and q exits the editor.

Writing ensures that all modifications are persisted to the file system, while quitting returns you to the terminal environment (e.g., Git Bash) to continue executing commands.

This supports Operational Excellence by promoting safe, intentional file handling and ensuring changes are explicitly saved before exiting the editing session.

      # 1. Press 'ESC' to return to Normal Mode
      # 2. Type ':wq' and press Enter

Staging Changes

Prepare your authored content for inclusion in a repository snapshot.

This means organizing and staging your modified files so they are ready to be recorded as part of a Git commit, creating a consistent and trackable version of your project’s current state.

1. Stage the File

Adds the file from the Working Directory to Git's Staging Area, marking it for inclusion in the next commit.

The staging area acts as an intermediate layer where changes are selected and reviewed before being permanently recorded in the repository history through a commit. This allows developers to group related changes and maintain controlled, intentional updates.

This supports Operational Excellence by enabling granular control over the content of commits, improving change management, traceability, and overall code quality.

      # Stages the specified file(s) for the next commit.
       git add index.html

First Commit Snapshot

Record your staged changes as a new commit in the local Git repository.

A commit creates a permanent snapshot of the files currently in the staging area and stores it in Git's version history. Each commit serves as a checkpoint, allowing you to track progress, review changes, and revert to previous versions if necessary.

This supports Reliability by maintaining a complete and traceable history of project changes, enabling effective version control and recovery.

1. Commit with Message

Creates a Git commit, which packages all staged changes into a commit object identified by a unique hash and accompanied by a descriptive commit message.

A commit acts as a permanent snapshot of your project's state at a specific point in time. These snapshots provide a reliable history of changes, making it possible to review progress, compare versions, and revert to a known working state if issues arise later.

This supports Reliability by enabling point-in-time recovery, preserving historical records, and ensuring traceability throughout the software development lifecycle.

      # Creates a new commit with all staged changes and the message after -m.
      git commit -m "Create index.html with Vim"

Establishing the Cloud Link

Connect your local Git repository to a remote repository hosted on GitHub.

This establishes a link between your local development environment and the remote repository, enabling you to synchronize code, share changes with collaborators, and back up your project to a centralized version control platform.

This supports Operational Excellence by facilitating collaboration, maintaining a single source of truth for the codebase, and ensuring changes can be reliably distributed across development teams and environments.

1. Add Remote Origin

Associates the remote alias origin with the URL of your GitHub repository.

Git is a distributed version control system, which means local repositories operate independently. Before code can be shared or synchronized, you must explicitly define the remote destination where changes will be pushed and retrieved.

Using a named remote such as origin provides a convenient reference to the repository's URL, simplifying future push, pull, and fetch operations.

This supports Reliability by ensuring your source code is stored in a highly available remote repository, providing backup, version history preservation, and protection against local data loss.

      # Stages the specified file(s) for the next commit.
       git remote add origin https://github.com/your-username/your-repo.git

Publishing to the Global Stage

Push your local commits to a remote repository hosted on GitHub.

This operation transfers committed changes from your local Git history to the remote repository, synchronizing your local development state with the centralized codebase and making updates available to collaborators.

This supports Reliability by ensuring code is safely backed up in the cloud and Operational Excellence by enabling seamless collaboration and consistent version synchronization across environments.

1. Push to Remote

Transfers all commits from the local master branch to the remote repository labeled origin.

This operation publishes your local changes to the remote version control system, making your updates accessible to collaborators and enabling integration with services such as GitHub Pages for deployment and hosting.

This supports Operational Excellence by synchronizing the local development environment with the central source of truth, ensuring consistency, collaboration, and controlled distribution of code changes.

      # Uploads your local commits to the remote repository.
      git push origin main

Live Hosting: GitHub Pages

Deploy your static content to a publicly accessible web server.

This process publishes your HTML, CSS, and JavaScript files to a hosting environment, making them available over the internet for end users to access through a web browser.

This supports Operational Excellence by ensuring consistent, reliable delivery of application assets from development to production environments.

1. Enable GitHub Pages

Configures GitHub to publish the repository as a static website and generate a publicly accessible URL.

This enables GitHub Pages to serve your project directly from the repository, allowing you to showcase your application without provisioning or managing dedicated servers.

This supports Performance Efficiency by leveraging GitHub’s globally distributed infrastructure (CDN), ensuring fast, low-latency content delivery to users across different regions.

      # 1. In GitHub UI: Settings -> Pages
      # 2. Source: 'Deploy from a branch'
      # 3. Branch: 'master' (or 'main')
      # 4. Folder: '/ (root)'
      # 5. Save

Automated Lifecycle: CI/CD

Defines a GitHub Actions workflow to automate the software deployment process.

This enables continuous integration and continuous deployment (CI/CD) by executing predefined steps such as building, testing, and publishing whenever changes are pushed to the repository, reducing manual intervention and improving consistency.

This supports Operational Excellence by automating repetitive tasks, improving deployment reliability, and ensuring faster, more consistent delivery of updates.

1. Create Workflow Definition

Creates the standard directory structure required for GitHub Actions workflows.

GitHub automatically detects and executes automation scripts only when they are placed inside the .github/workflows directory, where workflow configuration files are defined.

This supports Operational Excellence by enforcing a consistent and standardized location for automation pipelines, improving maintainability, discoverability, and reliability of CI/CD processes.

      # Creates a new directory (folder).
      mkdir -p .github/workflows

      # Creates an empty file or updates the timestamp of an existing one.
      touch .github/workflows/deploy.yml

Configure the Pipeline

Defines an automated workflow consisting of sequential jobs such as Checkout, Configuration, Build/Upload, and Deployment that are triggered on every push event to the master branch.

This CI/CD pipeline automates the software delivery process, reducing reliance on manual deployment steps, minimizing human error, and ensuring that the production environment consistently reflects the latest committed code.

This supports Reliability by enabling consistent, repeatable, and error-resistant deployments through automation.

      name: Deploy to Pages
      on:
        push:
          branches: [ master ]
      permissions:
        contents: read
        pages: write
        id-token: write
      jobs:
        deploy:
          environment:
            name: github-pages
          runs-on: ubuntu-latest
          steps:
            - uses: actions/checkout@v4
            - uses: actions/configure-pages@v4
            - uses: actions/upload-pages-artifact@v3
              with:
                path: '.'
            - uses: actions/deploy-pages@v4

Git and GitHub are essential tools in modern software development and DevOps workflows. Understanding how to move code from a local machine to a GitHub repository establishes the foundation for more advanced practices such as Continuous Integration (CI), Continuous Delivery (CD), Infrastructure as Code (IaC), and collaborative software engineering.