Deploy Website on Push with GitHub Actions

Overview

In this tutorial, we’ll set up a GitHub Actions workflow to automatically deploy your website to an FTP server whenever you push changes to your repository. Here’s a brief overview of the workflow:

1. Checkout the latest code: Fetch the latest code from the repository.
2. Sync files to the FTP server: Deploy the changes to your web server.

Prerequisites

1. A GitHub repository containing your website code.
2. Access to an FTP server for deployment.
3. GitHub Secrets configured for your FTP server credentials.

Step-by-Step Guide

1. Create a GitHub Workflow File

First, navigate to your GitHub repository. In the root directory, create a .github/workflows folder if it doesn’t already exist. Inside this folder, create a new file named deploy.yml and add the following content:

name: 🚀 Deploy website on push

on: push

jobs:
  web-deploy:
    name: 🎉 Deploy
    runs-on: ubuntu-latest
    steps:
      - name: 🚚 Get latest code
        uses: actions/checkout@v4
      
      - name: 📂 Sync files
        uses: SamKirkland/FTP-Deploy-Action@v4.3.5
        with:
          server: ftp.samkirkland.com
          username: myFtpUserName
          password: ${{ secrets.ftp_password }}

2. Configure FTP Credentials

To securely manage your FTP credentials, you’ll need to add them to your repository’s secrets:

1. Go to your repository on GitHub.
2. Click on Settings.
3. Navigate to Secrets and variables > Actions.
4. Click on New repository secret.
5. Add a new secret named ftp_password with your FTP password.

3. Explanation of the Workflow

• Trigger on Push: The on: push key specifies that this workflow will trigger on every push to the repository.
• Job: web-deploy: This job named “Deploy” will run on the latest Ubuntu runner.
  • Checkout latest code: The actions/checkout@v4 action checks out the latest code from the repository.
  • Sync files: The SamKirkland/FTP-Deploy-Action@v4.3.5 action uploads your website files to the FTP server using the provided credentials.

4. Commit and Push

Commit your changes and push them to your repository. This action will trigger the GitHub Actions workflow, and your website will be automatically deployed to your FTP server.

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

Conclusion

With this setup, your website will be automatically deployed on every push to your repository. GitHub Actions simplifies the deployment process, allowing you to focus more on developing new features rather than managing deployments.

Happy coding and deploying! 🚀