Stop Manually Uploading Your Site To The Hosting Service

So, you are done creating or editing a website and now you need to upload it to your hosting service. What is your next step?

Let me answer that: there was a time when I uploaded all my files to the shared hosting service using a FTP Client. I needed to open the client, login, search for the folder I wanted to upload in, and then drag all the website files into it.

If you identify yourself in this routine, I say those days are over!

Let's create, today, a very simple script to automate this boring work.

Just like in the last week's post, we'll be using GitHub Actions to perform this automation.

1. Setting up the environment

If your project is not yet on GitHub, let's start by publishing it.

Then create a YAML file in your project's repository under the .github/workflows directory. You can name the file something like publish-ftp.yml.

└── .github
    └── workflows
        └── publish-ftp.yml

This is going to be the content of your YAML file:

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: 📂 Sync files
        uses: SamKirkland/FTP-Deploy-Action@v4.3.4
        with:
          server: ${{ secrets.FTP_SERVER }}
          username: ${{ secrets.FTP_USERNAME }}
          password: ${{ secrets.FTP_PASSWORD }}
          server-dir: /path/to/your/project
          exclude: |
            README.md
            .editorconfig
            **/.git*/**
            **/.git*
            **/node_modules/**

2. Understanding the configuration

This YAML file is pretty straightforward: we start by defining that the workflow should run on each push to the repository and it will only run on main branch. Then, there's the usual code for configuring GitHub Actions and the configuration to use the FTP-Deploy-Action from SamKirkland.

Next, we will...

3. Set up the secrets

In here, we have 3 secret keys we must setup before committing and pushing to our remote repository.

Follow these steps:
a. Go to your GitHub repository.
b. Click on the "Settings" tab.
c. In the left sidebar, click on "Secrets and variables" and then "Actions".

github actions
d. Click the "New repository secret" button.
e. Name the secret "FTP_SERVER".
f. Paste the URL to your ftp server.
g. Click "Add secret" to save it.
h. Repeat with the other 2 keys, providing your credentials.

Also, don't forget to inform the exact path to your project inside your server on server-dir property.

Now that everything is set up correctly, it's time to commit your changes, push to your repository and wait for the ninja cats from GitHub to do their work 🐱!

See ya and until the next post!