Skip to main content

Course Progress

Loading...

Set Up GitHub and Docker

Duration: 45 minutes
Module 1: Course Introduction

Learning Objectives

  • Master the concepts in this lesson
  • Apply knowledge through practice
  • Build practical skills
  • Prepare for next topics

Assignment Overview

This assignment will guide you through setting up essential tools for modern web development: GitHub for version control and collaboration, and Docker for creating consistent development environments. By the end of this guide, you'll have a GitHub account, your first repository, and Docker installed on your system.

George Polya's 4-Step Problem Solving Method

Step 1: Understand the Problem

We need to accomplish three main tasks:

  • Create a personal GitHub account for code hosting and version control
  • Create our first Git repository to store our code
  • Install Docker to create consistent development environments

These tools are essential for modern web development and will be used throughout the PHP WordPress Development course.

Step 2: Devise a Plan

  1. Set up a GitHub account
    • Visit GitHub's website
    • Create a new account
    • Verify email address
    • Set up profile
    • Enable two-factor authentication (recommended)
  2. Create first GitHub repository
    • Create a new repository on GitHub
    • Initialize with README
    • Clone repository to local machine
    • Make simple changes and push them
  3. Install Docker
    • Check system requirements
    • Download Docker Desktop
    • Install Docker Desktop
    • Verify installation
    • Run a test container

Step 3: Execute the Plan

Part 1: Setting Up a GitHub Account

Step-by-Step Instructions

  1. Visit GitHub's Website

    Open your web browser and navigate to https://github.com

    https://github.com Sign up Welcome to GitHub! Email Password

    GitHub's homepage where you can create a new account

  2. Sign Up for a New Account

    • Click the "Sign up" button
    • Enter your email address
    • Create a password
    • Choose a username (this will be your GitHub identity, so choose carefully)
    • Complete the verification process to prove you're not a robot
    • Click "Create account"

  3. Verify Your Email Address

    • GitHub will send a verification email to the address you provided
    • Open the email and click the verification link
    • This step is required to fully activate your account

  4. Complete Your Profile (Optional but Recommended)

    • Add a profile picture (helps others identify you)
    • Fill in your name
    • Add a bio describing your interests or skills
    • Add your location (if you're comfortable sharing)

  5. Set Up Two-Factor Authentication (2FA) (Highly Recommended)

    • Go to Settings → Security → Two-factor authentication
    • Click "Enable two-factor authentication"
    • Choose your preferred 2FA method (app or SMS)
    • Follow the instructions to complete the setup
    • Store your recovery codes in a safe place

Part 2: Creating Your First GitHub Repository

What is a Repository?

A repository (or "repo") is like a project folder that contains all your project files and stores each file's revision history. It can be public (anyone can see it) or private (only you and people you explicitly share it with can see it).

                        graph TD
                        A[Repository] --- B[Files]
                        A --- C[Revision History]
                        A --- D[Issues/Tickets]
                        A --- E[Wiki/Documentation]
                        B --- F[Code]
                        B --- G[Images]
                        B --- H[Documents]
                        B --- I[README.md]
                        C --- J[Commits]
                        C --- K[Branches]
                        C --- L[Tags/Releases]

Step-by-Step Instructions

  1. Create a New Repository on GitHub

    • Click the "+" icon in the top-right corner of GitHub
    • Select "New repository"
    • Enter a repository name (e.g., "my-first-repo")
    • Add an optional description
    • Choose to make it public or private
    • Check "Initialize this repository with a README"
    • Click "Create repository"
    Create a new repository Owner yourusername Repository name my-first-repo Description (optional) Public Private Initialize this repository with a README Create repository

    Creating a new repository on GitHub

  2. Install Git on Your Local Machine (if not already installed)

    Before you can work with GitHub locally, you need to have Git installed:

  3. Clone Your Repository to Your Local Machine

    1. On your repository page, click the green "Code" button
    2. Copy the HTTPS URL (e.g., https://github.com/yourusername/my-first-repo.git)
    3. Open your terminal or command prompt
    4. Navigate to where you want to store your project: cd path/to/your/projects
    5. Clone the repository: git clone https://github.com/yourusername/my-first-repo.git
    6. This will create a new folder with your repository name

  4. Make Changes to Your Repository

    1. Navigate into your repository folder: cd my-first-repo
    2. Create a new file: touch index.html (Mac/Linux) or echo > index.html (Windows)
    3. Open the file in your favorite text editor
    4. Add some basic HTML: 
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Repository</title>
</head>
<body>
    <h1>Hello, GitHub!</h1>
    <p>This is my first GitHub repository.</p>
</body>
</html>
    5. Save the file

  5. Commit and Push Your Changes

    1. Check the status of your repository: git status
    2. Add the new file to staging: git add index.html
    3. Commit your changes with a message: git commit -m "Add index.html"
    4. Push your changes to GitHub: git push origin main (or git push origin master for older repositories)
    5. Enter your GitHub username and password when prompted (or use a personal access token if 2FA is enabled)

  6. View Your Changes on GitHub

    • Go back to your repository page on GitHub and refresh
    • You should now see your new index.html file in the file list
    • Click on the file to view its contents
    • Click on "Commits" to see your commit history

Part 3: Installing Docker

What is Docker?

Docker is a platform that enables developers to build, share, and run applications in containers. Containers are lightweight, portable environments that include everything needed to run an application: code, runtime, libraries, and system tools.

                        graph TD
                        A[Docker] --- B[Containers]
                        A --- C[Images]
                        A --- D[Dockerfile]
                        A --- E[Docker Compose]
                        B --- F[Isolated Environments]
                        C --- G[Templates for Containers]
                        D --- H[Instructions to Build Images]
                        E --- I[Multi-container Applications]

Why Use Docker for Web Development?

  • Consistency: "Works on my machine" problems are eliminated
  • Isolation: Projects don't interfere with each other
  • Version Control: Easy to switch between different versions of PHP, MySQL, etc.
  • Simplified Setup: No need to manually install web servers, databases, etc.
  • Mirrors Production: Development environment can match production closely

Step-by-Step Instructions

  1. Check System Requirements

    Before installing Docker Desktop, ensure your system meets the requirements:

    • Windows: Windows 10 64-bit: Pro, Enterprise, or Education (Build 16299 or later) or Windows 11
    • Mac: macOS 10.15 or newer, with Intel or Apple Silicon processor
    • Linux: Various distributions supported, see Docker's documentation
    • At least 4GB of RAM (8GB recommended)
    • Virtualization enabled in BIOS/UEFI (for Windows and some Linux)

  2. Download Docker Desktop

  3. Install Docker Desktop

    For Windows:

    1. Double-click the downloaded installer (.exe file)
    2. Follow the installation wizard
    3. Ensure "Use WSL 2 instead of Hyper-V" is selected if available
    4. Click "Install" and wait for the installation to complete
    5. Click "Close" when finished

    For Mac:

    1. Open the downloaded .dmg file
    2. Drag the Docker icon to the Applications folder
    3. Open Docker from your Applications folder
    4. Authorize the installation if prompted
    5. Wait for Docker to start

    For Linux:

    1. Follow the distribution-specific instructions from Docker's documentation
    2. Typically involves adding Docker's repository and installing via package manager

  4. Start Docker Desktop

    • Launch Docker Desktop from your Start menu (Windows) or Applications folder (Mac)
    • Wait for Docker to start (you'll see the Docker icon in the system tray/menu bar)
    • The first launch may take a few minutes
    Docker Desktop Docker Desktop is running Open Docker Dashboard

    Docker Desktop running successfully

  5. Verify Docker Installation

    1. Open your terminal or command prompt
    2. Run the command: docker --version
    3. You should see output like: Docker version 20.10.14, build a224086 (version numbers may vary)
    4. Run the command: docker-compose --version
    5. You should see output like: Docker Compose version v2.3.3 (version numbers may vary)

  6. Test Docker with a Simple Container

    1. In your terminal or command prompt, run: docker run hello-world
    2. Docker will download the hello-world image and run it
    3. You should see a message indicating that your Docker installation is working correctly
    4. The output will explain what Docker did to run the container
    Hello from Docker!
This message shows that your installation appears to be working correctly.

To generate this message, Docker took the following steps:
 1. The Docker client contacted the Docker daemon.
 2. The Docker daemon pulled the "hello-world" image from the Docker Hub.
 3. The Docker daemon created a new container from that image which runs the
    executable that produces the output you are currently reading.
 4. The Docker daemon streamed that output to the Docker client, which sent it
    to your terminal.

Step 4: Look Back and Review

What We Accomplished

  • Created a personal GitHub account for version control and collaboration
  • Set up our first Git repository
  • Made our first commit and pushed it to GitHub
  • Installed Docker Desktop for containerized development
  • Verified our Docker installation with a test container

These tools will be essential throughout the course for managing your code and creating consistent development environments.

Development Workflow with Git and Docker

                    graph LR
                    A[Write Code] -->|git add| B[Stage Changes]
                    B -->|git commit| C[Commit Changes]
                    C -->|git push| D[Push to GitHub]
                    E[Clone Repository] -->|git clone| A
                    F[Build Container] -->|docker build| G[Run Application]
                    G -->|Test| A

This basic workflow shows how Git and Docker will integrate into your development process. As we progress through the course, we'll learn more advanced techniques and practices.

Common Issues and Troubleshooting

GitHub Issues

  • Authentication Failed

    If you're unable to push to GitHub with your password:

    • GitHub has phased out password authentication for Git operations
    • You need to use a Personal Access Token (PAT) or SSH key
    • To create a PAT: Go to GitHub → Settings → Developer settings → Personal access tokens → Generate new token
    • Use this token instead of your password when pushing to GitHub

  • "fatal: remote origin already exists"

    If you see this error when trying to add a remote:

    • The remote already exists. You can update it: git remote set-url origin https://github.com/yourusername/your-repo.git

  • "fatal: not a git repository"

    If you see this error when running Git commands:

    • Make sure you're in the correct directory
    • Check if the directory is a Git repository (it should have a .git folder)
    • If not, initialize it with git init

Docker Issues

  • Docker Desktop Won't Start

    • Make sure virtualization is enabled in your BIOS/UEFI
    • For Windows, ensure WSL 2 is installed and enabled
    • Check system requirements (especially RAM and OS version)
    • Restart your computer and try again
    • Reinstall Docker Desktop if necessary

  • "Cannot connect to the Docker daemon"

    • Make sure Docker Desktop is running
    • If on Linux, make sure the Docker service is started: sudo systemctl start docker
    • Restart Docker Desktop

  • Permission Issues (Linux)

    • Add your user to the docker group: sudo usermod -aG docker $USER
    • Log out and log back in for the changes to take effect

Next Steps and Further Learning

GitHub Resources

Docker Resources

Practice Ideas

  • Create additional repositories for personal projects
  • Learn more Git commands like branching and merging
  • Experiment with Docker by running different containers (e.g., a web server or database)
  • Try creating a simple Docker Compose file to run multiple containers
  • Collaborate with a classmate on a GitHub repository

Additional Challenges

Basic Challenge: GitHub Pages

Deploy your first website using GitHub Pages:

  1. In your repository, go to Settings → Pages
  2. Under "Source", select "main" branch and click "Save"
  3. Wait a few minutes for your site to be published
  4. Visit yourusername.github.io/my-first-repo to see your site live on the internet

Intermediate Challenge: WordPress in Docker

Set up a local WordPress development environment using Docker:

  1. Create a new directory for your WordPress project
  2. Create a file named docker-compose.yml with the following content:
    3. version: '3'

services:
  wordpress:
    image: wordpress:latest
    ports:
      - "8080:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wp-content:/var/www/html/wp-content
    depends_on:
      - db

  db:
    image: mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: rootpassword
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
    volumes:
      - db_data:/var/lib/mysql

volumes:
  db_data:
  3. Open a terminal in that directory and run: docker-compose up -d
  4. Wait for the containers to start
  5. Open your browser and navigate to http://localhost:8080
  6. Follow the WordPress installation wizard