Auto Deploy

To automatically deploy your WordPressify project, you can use GitHub Actions.

GitHub Actions

1. Create a new GitHub repository for your WordPressify project.
2. Create a new GitHub Actions workflow file in the root directory of your project: .github/workflows/deploy.yml.
3. Copy the following code into the workflow file:

Deploy with FTP

name: Deploy WordPressify
on:
  push:
    branches:
      - main
env:
  THEME_NAME: ${{ vars.THEME_NAME }} # Define theme name as environment variable

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "20"

      - name: Install dependencies
        run: |
          npm install
          npm run build

      - name: Build theme
        run: |
          npm run export

      - name: Set permissions
        run: |
          sudo chown -R $USER:$USER ./dist
          chmod -R 755 ./dist
          mkdir -p dist/themes/${{ env.THEME_NAME }}
          touch dist/themes/${{ env.THEME_NAME }}/.ftp-deploy-sync-state.json
          chmod 666 dist/themes/${{ env.THEME_NAME }}/.ftp-deploy-sync-state.json

      - name: Deploy to WordPress
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          local-dir: ./dist/themes/${{ env.THEME_NAME }}/
          server-dir: /public_html/wp-content/themes/${{ env.THEME_NAME }}/
          exclude: |
            **/.git*
            **/.git*/**
            **/node_modules/**
            **/src/**
            gulpfile.js
            package.json
            package-lock.json

• Make sure to add FTP_SERVER, FTP_USERNAME, and FTP_PASSWORD to your GitHub repository's secrets.

Deploy with SSH

name: Deploy WordPressify

on:
  push:
    branches:
      - develop

env:
  THEME_NAME: ${{ vars.THEME_NAME }}

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "20"

      - name: Install dependencies
        run: |
          npm install
          npm run build

      - name: Build theme
        run: |
          npm run export

      - name: Set permissions
        run: |
          sudo chown -R $USER:$USER ./dist
          chmod -R 755 ./dist
          mkdir -p dist/themes/${{ env.THEME_NAME }}

      - name: Install SSH key
        uses: shimataro/ssh-key-action@v2
        with:
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          known_hosts: ${{ secrets.SSH_KNOWN_HOSTS }}

      - name: Deploy to WordPress via SSH
        run: |
          rsync -avz --delete \
            -e "ssh -p 22" \
            --exclude '.git*' \
            --exclude '.git*/**' \
            --exclude 'node_modules/**' \
            --exclude 'src/**' \
            --exclude 'gulpfile.js' \
            --exclude 'package.json' \
            --exclude 'package-lock.json' \
            ./dist/themes/${{ env.THEME_NAME }}/ \
            ${{ secrets.SSH_USERNAME }}@${{ secrets.SSH_HOST }}:/var/www/riangle/wordpress/wp-content/themes/${{ env.THEME_NAME }}/

• Make sure to add SSH_HOST, SSH_USERNAME, SSH_KNOWN_HOSTS, and SSH_PRIVATE_KEY to your GitHub repository's secrets.

• Make sure to add THEME_NAME to your GitHub repository's variables. This is the name of your WordPress theme directory.
• Make sure the .env file is commited to your repository and contains the value for THEME_NAME. Do not include any sensitive information.
• Make sure to double check the server-dir path in the FTP-Deploy-Action step. This is the path to your WordPress theme directory on your server.
• Make sure to have at least one file in the src/plugins directory, even if it's an empty file. If the directory is empty, the deployment will fail.

Triggering the Deployment

4. Commit and push your changes to the main branch.
5. Your WordPressify project will now automatically deploy to your WordPress site whenever you push changes to the main branch.

Setup GitHub Actions

Here's how to set up both the theme name variable and all required secrets for the workflow:

Go to your GitHub repository settings:

• Click on "Settings" tab in your repository
• Click on "Secrets and variables" → "Actions"

Set up the theme name variable:

• Click on "Variables" tab
• Click "New repository variable"
• Create variable:
  • Name: THEME_NAME
  • Value: Your theme name (e.g., "my-awesome-theme")

Set up the FTP secrets:

• Click on "Secrets" tab
• Click "New repository secret"
• Add these three secrets:

FTP_SERVER
Value: your-domain.com or ftp.your-domain.com

FTP_USERNAME
Value: your-ftp-username

FTP_PASSWORD
Value: your-ftp-password

Remember:

• Secrets are encrypted and can't be viewed once saved
• You can update secrets anytime by creating a new one with the same name
• The workflow will automatically use the updated values
• Never commit these credentials to your repository