Deploying Static Web App to Static Website Hosting using GitHub Actions

To deploy your static web app to static website hosting using GitHub Actions, you need to create a GitHub Actions workflow that automates the deployment process. The process will vary depending on the static website hosting provider and the tools they provide (FTP, SSH, etc.). Here’s a general example of how to set up GitHub Actions to deploy to static website hosting using FTP

In this article, you will learn how to deploy and create a continuous integration in GitHub using GitHub actions

And static web apps are assumed to be Vue, React or angular, etc.

To deploy a project to static website hosting using GitHub Actions , you’ll need to:

1. Build your project using npm (for example, for Vue, React, Angular, or any Node.js-based frontend/backend project).
2. Upload the built files to your static website hosting provider using FTP or another method they support.

Here’s a step-by-step guide on how to achieve this:

Prerequisites:

1. Static website hosting credentials (FTP or SFTP host, username, password, and directory path).
2. Secrets added to your GitHub repository (FTP/SFTP credentials).
3. Project is hosted on GitHub

Steps:

1. Create FTP Credentials as Secrets in GitHub: Go to your GitHub repository and add the following secrets:

• FTP_HOST: The FTP server (e.g., ftp.yourhost.com).
• FTP_USERNAME: The FTP username.
• FTP_PASSWORD: The FTP password.
• FTP_PATH: The directory where the files should be uploaded (this can be / for the root).

You can add secrets by navigating to your GitHub repository: Settings > Secrets and variables > Actions > New repository secret

Actions secrets and variables

2. Create GitHub Actions Workflow: Add a new YAML file for your workflow in .github/workflows/deploy.yml. This workflow will automatically trigger on a push to the main branch and use FTP to upload your files to the static website hosting.

name: Deploy static web app
on:
  push:
    branches:
      - main # Triggers the action on push to the 'main' branch
    # tags:
    #   - v*.*.* # Triggers the action on tag

jobs:
  build:
    name: Deploy
    runs-on: ubuntu-latest

    steps:
      # Step 1: Checkout the latest code
      - name: Checkout code
        uses: actions/checkout@v4

      # Step 2: Set up Node.js
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18" # Specify your Node.js version
      
      # Step 3: Get tag version
      - name: Get tag version
        id: get_tag
        run: echo "TAG_VERSION=${GITHUB_REF#refs/tags/}" >> $GITHUB_ENV

      # Step 4: Load environment variables from file (.env)
      - name: Set environment variables from Dotenv
        uses: c-py/action-dotenv-to-setenv@v5
        with:
          env-file: .env

      # Step 5: Load environment variables from GitHub Secrets
      - name: Set environment variables from GitHub Secrets
        run: |
          echo "FTP_HOST=${{ secrets.FTP_HOST }}" >> $GITHUB_ENV

      # Step 6: Install dependencies
      - name: Install dependencies
        run: npm install

      # Step 7: Run build script
      - name: Build
        run: npm run build # Assumes there's a build script in package.json

      # Step 8: Deploy built files via FTP
      - name: Deploy via FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ${{ secrets.FTP_HOST }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/ # The local directory where the build output is located (adjust if necessary)
          server-dir: ${{ secrets.FTP_PATH }} # The remote directory on the server
          protocol: ftps # Change to 'ftps' for secure FTP if needed

Explanation:

• on.push.branches.main: This action is triggered every time you push to the main branch. You can adjust this to suit your workflow (e.g., trigger on tags, pull_requests, etc.).
• Checkout Code: It checks out your repository’s code.
• Set Up Node.js: It sets up the specified version of Node.js for the build process.
• Get tag version: Get tag version as environment variables TAG_VERSION
• Load environment variables from file (.env): Load environment variables from a .env file (e.g., /path/to/.env)
• Load environment variables from GitHub Secrets: Load environment variables from GitHub secrets
• Install Dependencies: It installs the dependencies from package.json.
• Run npm build: It runs your build script (typically npm run build) that compiles the app into static files (for a Vue app, this would create a dist/ directory).
• Deploy via FTP: The action uploads the built files to your static website hosting’s server directory via FTP.
• local-dir: ./dist/ assumes that your build artifacts (static files) are in the build folder (which is typical for a Vue app). Change it according to your app's build output directory (for React, this could be ./build).
• protocal: ftps full encryption newest standard

3. Commit the Workflow File: Commit the new workflow to your repository.

git add .github/workflows/deploy.yml
git commit -m "Add GitHub Actions workflow for FTP deploy"
git push origin main

4. Trigger the Deployment: Now, every time you push changes to the main branch, GitHub Actions will automatically upload the project to your static website hosting via FTP.

Logs for each step in a workflow

References

• GitHub Actions
• GitHub Actions — Checkout
• GitHub Actions — Setup Node.js environment
• GitHub Actions — Variables from Dotenv
• GitHub Actions — FTP Deploy