Setting up GitHub Actions to deploy your website via FTP

Web development is a familiar concept to most developers, and deploying websites via FTP is a common practice. However, in this article, we will explore an alternative method for deploying websites using GitHub Actions. GitHub Actions is a platform provided by GitHub that allows developers to create event-driven CI/CD scripts in YAML format, either by creating their own scripts or by integrating existing open-source scripts.

Let's dive into the steps required to deploy a website via FTP using GitHub Actions.

Step 1: Create a GitHub repository for your website code

First, create a GitHub repository that contains all the files of your website, which will be deployed to the root location (/) of your hosting. The structure of the repository should look like this:

\
|-- css
|   |-- *.css
|-- js
|   |-- *.js
|-- images
|   |-- *.ico
|   |-- *.png
|   |-- *.jpg
|-- index.html
|-- README.md

Step 2: Create a GitHub Actions workflow file

At the root folder of your GitHub repository, create a directory named /.github/workflows. This directory will house all your workflow files. You can name these files as per your preference. Workflows are triggered based on the events specified in the on property defined within these files. Let's create a main.yml file for our project. For more details on GitHub Actions workflows, you can refer to the official website.

Step 3: Utilize the "FTP-Deploy" Actions

As GitHub Actions is a community-driven platform, we can utilize various open-source workflows available. In this case, we will use the popular "FTP-Deploy" Actions workflow developed by Sam Kirkland. In the main.yml file, include the following code:

on:
  push:
    branches:
      - main
name: Deploy website on push
jobs:
  web-deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
    - name: Get latest code
      uses: actions/checkout@v3

    - name: Push files
      uses: SamKirkland/FTP-Deploy-Action@v4.3.4
      with:
        server: ftp.website.com
        username: myFtpUserName
        password: ${{ secrets.ftp_password }}

In the above code, we have defined the on property to trigger the workflow whenever a new commit is pushed to the main branch. It is important to modify the values of the server and username fields to match your FTP server's details.

Step 4: Add secrets

Since the FTP password is a sensitive field, it is recommended to store it securely using GitHub Secrets. Here's how you can add a secret:

1. Go to the Settings tab of your repository.
2. Navigate to the Secrets and variables section and select the Actions option from the expanded menu.
3. Click on New repository secret to create a new secret.
4. Enter the name as ftp_password and provide your FTP password in the secret field.

That's it! You are now ready to deploy your website via FTP using GitHub Actions. Every time you push your code to the main branch of your repository, a workflow will automatically run, deploying your website to the FTP server.

As a best practice, consider creating a dev branch where you can stage your code and collaborate with other developers on your team. Alternatively, you can follow the Trunk-based development branching strategy. For larger teams and complex deployment cycles, the Gitflow branching model might be more suitable.

Lets build secure, scalable and reliable systems