Automate Docker Deployment with GitHub Actions Task #4

This guide helps you automate html pages deployment to Docker Hub.

Due date 04/12/2026 11:59 PM

Example repository

Step 1: Create an empty repository on Github and clone it

Create an empty repository on GitHub named docker-github-action (or any name of your choice).

Clone the repository to your local machine using the following command:

git clone https://github.com/shivasharma/IS436-Classwork-Foosball.git

Step 2: Create username and token from dockerhub

Create an account on Dockerhub

Click on your profile =>Account Settings=> Click Personal Access Token => Generate Token => Save the token on your computer.

Step 3: Create GitHub Workflow

Create Github Action using Github UI

Log in to Github= >Select your repositroy => Click on Action => New workflow/Search Simple Workflow => Configure => Commit change

Your repositroy should have .github/workflow/somefile.yml added to your repository

.github/workflows/docker.yml

Paste the following YAML configuration:

Or create GitHub Workflow using Vscode

Create .github/workflows/docker.yml folder structure directly inside the repositroy using vscode

.github/workflows/docker.yml

Paste the following YAML configuration:

name: Build and Push to Docker Hub

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4
      - name: Log in to Docker Hub
        run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
      - name: Build Docker Image
        run: docker build -t ${{ secrets.DOCKER_USERNAME }}/is147:${{ github.run_number }} .
      - name: Push Docker Image
        run: docker push ${{ secrets.DOCKER_USERNAME }}/is147:${{ github.run_number }}

Step 4: Commit and Push

Now commit and push your changes to trigger the GitHub Action:

git add .
git commit -m "Automate Docker build and push"
git push origin main 
OR
From vscode git=> commit =>commit and push

Step 5: Pull and Run from Docker Hub

Once the workflow completes, you can pull and run the image from Dockerhub:


                    docker pull your-dockerhub-username/hello-world:tagname
                     eg docker pull shivathebravo/foosball:28
docker images

                    docker run  -d -p 80:80 --name yourppname your-dockerhub-username/appname:tagname
                    docker run -d -p 80:80 --name foosball shivathebravo/foosball:28

Step 6: How to test your implementation?

  1. open the browser
  2. type localhost:port defined on you docker run command above for e.g http://localhost:80 in the address bar.
  3. You should see your application running.

Step 7: How to submit on Blackboard?

  1. Break down all the requirements into stories on the GitHub project.
  2. Push the code to GitHub with solutions.
  3. Write about the use of docker and github action in the README.md file.
  4. Submit your GitHub project url , GitHub code url, and output screenshot including docker image from Dockerhub , docker run output and browser output on Blackboard.