Setting up GitHub Actions to deploy your website via FTP
Tags: github, webdev, tutorial, devops
Published: 2023-06-27 12:28:31

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:

```bash
\
|-- 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](https://docs.github.com/en/actions/using-workflows/about-workflows).

## 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](https://github.com/SamKirkland/FTP-Deploy-Action)" Actions workflow developed by Sam Kirkland. In the `main.yml` file, include the following code:
```yaml
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](https://trunkbaseddevelopment.com/) branching strategy. For larger teams and complex deployment cycles, the [Gitflow](https://nvie.com/posts/a-successful-git-branching-model/) branching model might be more suitable.

_Lets build secure, scalable and reliable systems_