Project Overview
This project documents a complete CI/CD deployment loop for a PHP-based eLearning platform. It starts at the very beginning—initializing version control on a local project—and follows the code through GitHub into an Azure Web App wired for continuous deployment, ending with a live, publicly accessible site verified in the browser. It's a practical demonstration of how source control, cloud hosting, and automated build pipelines connect into a single working system.
Skills demonstrated: Git version control fundamentals (init, add, and status); GitHub repository management; Azure App Service provisioning; GitHub-to-Azure Deployment Center integration; GitHub Actions build pipelines; PHP runtime configuration on Linux App Service; deployment log verification; and live production validation.
Screen-by-Screen Breakdown
Screen 1 — Initializing Git and Staging the Project
Initialized a local Git repository inside the eLearning project folder in VS Code and staged all project files — HTML/PHP pages, styles, scripts, and assets — for the first commit.
Steps:
Open the project folder (elearning) in VS Code.
Open the integrated terminal and run git init to create a local repository.
Run git add . to stage all files.
Note the LF-to-CRLF line-ending warnings (expected on Windows; Git will normalize line endings automatically — not an error).
Screen 2 — Reviewing Git Status Before the First Commit
Verified exactly which files were staged before committing, confirming the full project structure — PHP pages, CSS, images, and library assets — was ready to be tracked.
Steps:
Run git status to review staged changes.
Confirm the branch is master with no commits yet.
Review the full list of new files under "Changes to be committed."
Proceed to git commit and set up the remote origin (not pictured, but the natural next step).
Screen 3 — Pushing the Repository to GitHub
Pushed the committed project to a public GitHub repository (kolarinde/kola-elearning), making the source code available as the deployment source for Azure.
Steps:
Create a new repository on GitHub (kola-elearning).
Add it as a remote: git remote add origin .
Push the code: git push -u origin master.
Confirm the files appear on GitHub under the master branch with the commit message "Adding code files."
Screen 4 — Provisioning the Azure App Service
Created and reviewed the Azure Web App (kolaAPP2), confirming it was running on a Linux-based App Service Plan in West US 3, with the GitHub repository already linked as its project source.
Steps:
In the Azure Portal, navigate to App Services and open the Web App (kolaAPP2).
Review the Overview blade: resource group, default domain, status, App Service plan, region, and OS.
Confirm the GitHub project link matches the intended repository.
Screen 5 — Connecting Azure to GitHub via Deployment Center
Configured the Deployment Center to source code directly from GitHub, selecting the correct organization, repository, and branch, with GitHub Actions as the build provider and PHP as the runtime stack.
Steps:
Open Deployment → Deployment Center on the Web App.
Set the source to GitHub and authorize the connection.
Select the GitHub organization (kolarinde), repository (kola-elearning), and branch (master).
Confirm the build provider is set to GitHub Actions and the runtime stack to PHP.
Save — Azure automatically generates a GitHub Actions workflow file in the repository.
Screen 6 — Verifying the GitHub Actions Deployment Log
Confirmed the automated deployment triggered by the GitHub Actions workflow completed successfully, reviewing the deployment log entry for status and timing.
Steps:
In Deployment Center, open the Logs tab.
Locate the latest deployment entry by date.
Confirm Status shows "Succeeded," and the log source is linked to the app logs.
Click into the log entry for full build/deploy details if troubleshooting is needed.
Screen 7 — Validating the Live Deployed Application
Opened the live Azure-hosted domain in the browser to confirm the eLearning platform deployed correctly, rendering the full site—navigation, course cards, and imagery—from the automated pipeline.
Steps:
Copy the App Service default domain from the Overview blade (*.azurewebsites.net).
Open it in a new browser tab.
Verify the site renders correctly: navigation, hero content, and course listings.
Spot-check a few pages/links to confirm assets (CSS, images) loaded correctly from the deployed build.
Top comments (0)