Projects
ProjectsDevOps FoundationsbeginnerCI/CD

GitHub Actions Static Site Deployment

Git, CI, workflow, build and deploy.

~8 hours 5 phases
GitGitHub ActionsCI/CD

Overview

Set up a GitHub Actions workflow that builds a static site and deploys it on every push to the default branch.

The problem

Automatically build and deploy a static site on every push using GitHub Actions.

Why it matters

Automated delivery is the core of modern DevOps.

What you'll build

  • A CI workflow
  • Automated deploy
  • Status badges

What you'll learn

  • CI
  • GitHub Actions
  • Deployment

Business problem

Manual deploys are slow and error-prone.

Technical problem

Automate build and deploy on every change.

When you're done: A push-triggered automated deploy pipeline.

Requirements

User requirements

  • Deploy on push
  • See build status
  • Rollback safely

System requirements

  • GitHub repo
  • Actions

Functional requirements

  • Workflow file
  • Build step
  • Deploy step

Non-functional requirements

  • Reliable
  • Visible status

Technical requirements

  • YAML workflow
  • Secrets for deploy

Security requirements

  • Use GitHub secrets
  • Pin action versions

Operational requirements

  • Repo on GitHub

Constraints

  • GitHub Actions

Success criteria

  • Push triggers deploy
  • Status visible

Flows

Request Flow

  1. 1

    Browser

    User requests the application over HTTPS.

  2. 2

    CDN / DNS

    Edge routes the request to the origin.

  3. 3

    Load Balancer

    Distributes traffic across healthy app instances.

  4. 4

    Application

    Handles the request, applies business logic.

  5. 5

    Cache

    Serves fast reads for hot data.

  6. 6

    Database

    Persists data and returns results.

Project Structure

Root of the client application source.

Setup

  1. 1

    Prerequisites

    You need the tools required by Git, GitHub Actions, CI/CD installed and available on your PATH.

  2. 2

    Clone project

    Clone the repository locally.

    1. Clone the repository
    git clone <your-repo-url> <project-folder>
  3. 3

    Install dependencies

    Install the project dependencies.

    1. Create the workflow directory
    mkdir -p .github/workflows
  4. 4

    Configure environment

    Set the environment variables documented for this project. Never commit secrets.

    1. Create the environment file
    cp .env.example .env   # then edit values
  5. 5

    Start project

    Run the development command and confirm it starts.

    1. Add the workflow
    git add .github/workflows/deploy.yml && git commit -m 'ci: add deploy workflow' && git push
  6. 6

    Verify

    Open the printed local URL and confirm the primary flow works.

Build Phases

0 of 5 phases complete

  1. Objective: Establish the next milestone of the operational environment.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Run

    1. Create the workflow directory
    mkdir -p .github/workflows

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

  2. Objective: Establish the next milestone of the operational environment.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Run

    1. Add the workflow
    git add .github/workflows/deploy.yml && git commit -m 'ci: add deploy workflow' && git push

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

  3. Objective: Establish the next milestone of the operational environment.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

  4. Objective: Establish the next milestone of the operational environment.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

  5. Objective: Establish the next milestone of the operational environment.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

Commands

1. Create the workflow directory
mkdir -p .github/workflows
2. Add the workflow
git add .github/workflows/deploy.yml && git commit -m 'ci: add deploy workflow' && git push

Testing

Unit tests

  • Core logic and pure functions behave correctly.

    mkdir -p .github/workflows

    Success: All unit tests pass without errors.

Integration tests

  • Components integrate correctly with data sources and services.

    npm test

    Success: Integration tests pass for the primary flows.

API tests

  • Endpoints respond to valid and invalid input correctly.

    npm test

    Success: API tests cover happy and failure paths.

End-to-end tests

  • A user can complete the primary journey end to end.

    npm run test:e2e

    Success: The main user journey completes successfully.

Security tests

  • No obvious security regressions are introduced.

    npm audit

    Success: No high or critical vulnerabilities.

Debugging & Troubleshooting

Port already in use at startup

Why: Another process is binding the same port your app wants.

Check: List what is using the port.

lsof -i :3000   # Linux/macOS  |  netstat -ano | findstr :3000   # Windows

Fix: Free the port or start your app on a different port.

Prevent: Choose uncommon ports and document them in the README.

Environment variable missing or undefined

Why: A required value was not loaded into the runtime.

Check: Print the variable or inspect the config loader.

echo $MY_VAR   # Linux/macOS  |  echo %MY_VAR%   # Windows

Fix: Add the variable to your .env file and restart the process.

Prevent: Fail fast at startup when required env vars are absent.

API request times out

Why: An upstream call is slow or the network is blocked.

Check: Time a direct request against the upstream.

curl -w 'time_total: %{time_total}\n' http://upstream/health

Fix: Add timeouts and retries to the client; verify the upstream is up.

Prevent: Set explicit timeouts and circuit breakers on outbound calls.

Dependency fails to install or run

Why: Version conflicts or an incompatible runtime.

Check: Inspect the error and the installed versions.

npm ls <pkg>

Fix: Align versions or clear the lockfile and reinstall.

Prevent: Commit a lockfile and use the same Node version everywhere.

Security

Security is treated as a core requirement: input is validated, secrets are protected, and dependencies are kept up to date.

  • Input validation

    Validate and sanitize all user input before use.

  • Secrets management

    Store secrets in environment variables, never in source.

  • Dependency hygiene

    Regularly audit dependencies for known vulnerabilities.

Deployment

  1. 1

    Prepare for deployment

    Build the production artifact.

    1. Build for production
    npm run build
  2. 2

    Deploy

    Deploy to the project target platform following its documented steps.

    1. Deploy
    npm run deploy   # or the platform-specific command
  3. 3

    Verify

    Confirm the deployed application responds and its health check passes.

    1. Check health
    curl -I https://<your-deployed-url>

Documentation

Project Overview

Set up a GitHub Actions workflow that builds a static site and deploys it on every push to the default branch. This is a beginner ci/cd project in the operational environment space, built to demonstrate real engineering, not just copied code.

What You Will Build

- A CI workflow - Automated deploy - Status badges

Problem Statement

Manual deploys are slow and error-prone. Automate build and deploy on every change.

Technology Stack

Git, GitHub Actions, CI/CD

Installation

Clone the repository and install dependencies with the documented commands.

Local Development

Run the development command and open the printed local URL.

Testing

Run the test commands documented in the Testing section and confirm they pass.

Deployment

Follow the documented deployment steps for this project's target platform.

Interview Explanation

Use the Interview section to explain the architecture, technology choices and trade-offs.

Build Process

Phases guide the build in 5 checkpoints. Complete each and validate before moving on.

Interview Prep

30-second pitch

I built GitHub Actions Static Site Deployment — automatically build and deploy a static site on every push using github actions. It uses Git, GitHub Actions, CI/CD and solves manual deploys are slow and error-prone.

2-minute walkthrough

Set up a GitHub Actions workflow that builds a static site and deploys it on every push to the default branch. The core requirements were Workflow file, Build step, Deploy step. I structured the work around Write a workflow, Trigger on push, Build and deploy and validated the result with the documented tests.

Architecture

Because this is a devops-foundations project, the architecture is concentrated in operational environment rather than a distributed system.

Why these technologies

I chose Git, GitHub Actions, CI/CD because they are the pragmatic, well-supported tools best suited to building a ci/cd of this kind.

Why this architecture

The structure exists to keep concerns separated, make each piece testable, and scale the project cleanly as requirements grow.

At scale

At scale I would introduce caching, move to a service boundary structure, add proper observability, and enforce stricter contracts between components.

What can fail

The data source becomes unavailable, A dependency introduces a breaking change, Performance degrades under load, Configuration drift between environments

Monitoring

Monitoring is covered in the Observability section, focusing on basic health and error signals.

Security

Security was handled by validating input, protecting secrets, and following the practices listed in the Security section.

Deployment strategy

Deployment follows the steps in the Deployment section for the target platform, with a health check to confirm success.

What I'd do differently

With more time I would add deeper test coverage, stronger observability, and automated deployment.

Practice Q&A

Why did you build GitHub Actions Static Site Deployment?

To demonstrate Write a workflow and Trigger on push on a real, portfolio-worthy project.

What was the hardest part?

Coordinating the pieces so each stays correct as the project grows, and validating end to end.

How do you handle failure and scale?

By designing for correctness first and adding resilience once the core works.

Extensions

  • Add deeper test coverage
  • Add observability and alerting
  • Harden security
  • Automate deployment

Completion Checklist

Prerequisite Projects

Next Steps

Recommended next

CI Pipeline for a Node.js/Python Service

Adds tests and artifact building to CI.