Automating Deployment with GitHub Actions for a Custom WordPress Blocks Plugin

Manually uploading files for a WordPress plugin—especially a custom blocks plugin—isn’t practical. Every time you make changes, you need to run npm run build to generate the production files, and then you have to manually remember which files need to be uploaded via FTP.

This process is – at least – prone to mistakes as forgetting to upload just one file could break your plugin.

That’s why I like automating deployment with GitHub Actions. The automated process already knows which files should be uploaded, eliminating the need for manual tracking. GitHub Actions will:

• Automatically run npm run build to generate updated plugin files.
• Upload only the necessary files to the correct directory in Hostinger.
• Keep your plugin deployment fast, reliable, and error-free.

Let’s set it up! 🚀

Step 1: Preparing for Deployment

Before setting up GitHub Actions, make sure:

1. Your hosting directory (wp-content/plugins/velias-blocks) is set up to receive the updated files.
2. You have the FTP credentials for your hosting.

Step 2: Create a GitHub Actions Workflow

1. Create a Workflow File
   • Inside your repository, create a new folder: .github/workflows/.
   • Inside that folder, create a file called deploy.yml.
2. Create the Workflow Configuration in the deploy.yml file

name: Build and Deploy to Hostinger

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      # Step 1: Checkout the code
      - name: Checkout repository
        uses: actions/checkout@v3

      # Step 2: Set up Node.js
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      # Step 3: Install dependencies and build the plugin
      - name: Install dependencies and build
        run: |
          npm install
          npm run build

      # Step 4: Deploy to Hostinger via FTP
      - name: Deploy via FTP
        uses: SamKirkland/FTP-Deploy-Action@v4.5.0
        with:
          server: ftp.yourdomain.com
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: build/
          server-dir: /public_html/wp-content/plugins/ipx-blocks
          exclude: |
            **/.git*
            **/.git*/**
            **/node_modules/**
            **/.github/**
            **/src/**
            **/package-lock.json
            **/package.json
            **/README.md

Step 3: Store FTP Credentials Securely

Instead of hardcoding your credentials, store them as GitHub Secrets:

1. Go to your GitHub repository.
2. Navigate to Settings > Secrets and Variables > Actions.
3. Add:
   • FTP_USERNAME: Your Hostinger FTP username.
   • FTP_PASSWORD: Your Hostinger FTP password.

Step 4: Push to Deploy

Once the workflow is set up, GitHub Actions will automatically handle deployments every time you push changes to the main branch.

• Add the workflow file to your repo:

git add .github/workflows/deploy.yml  
git commit -m "Add GitHub Actions deployment workflow"  
git push

• Test the deployment by making any change in your repo and pushing it:

git commit -m "Test deployment" --allow-empty  
git push

• Go to your GitHub repo and check the “Actions” tab to monitor the workflow execution.
• Verify in Hostinger that the updated plugin files are in place.

Why Exclude the build/ Folder from Git?

In a modern block-based WordPress plugin, you should not commit the build/ folder to Git. Here’s why:

1. Avoid Bloated Repositories:
   The build/ folder contains generated files that don’t need to be tracked in Git since they can be re-created anytime.
2. Ensures a Fresh Build on Each Deployment:
   By keeping the build/ folder out of Git and having GitHub Actions handle npm run build, you ensure that the deployment always includes the latest, production-ready version of your plugin.

To exclude the build/ folder, add this to your .gitignore file:

build/

Final Thoughts

With this process, deploying your custom WordPress blocks plugin is streamlined. No more manual builds, no more dragging and dropping files via FTP—just a clean, automated deployment process that keeps your plugin up-to-date with every push.