How I FTP Commits to My Host via Github

This one won’t be new to most, but might be useful to some if you want to learn about deploying GitHub Commits to FTP server.

I’m going to be documenting some new discoveries that I come across, such as workflows, as well as web dev tutorials on this website. As you might tell from the title of this post, I have discovered Git.

Backstory

I started playing around with code about twenty one years ago, when I was in secondary school. I remember when I got a bootleg copy of Macromedia Dreamweaver and was amazed that I could organise my different projects, upload my files with FTP, use a fancy code editor and visually see my (table based) websites in with the design view!

Well time hasn’t really changed for me… I still use Dreamweaver to this day! Although I quickly dropped using the design view early on as it never really was fit for purpose. A dinosaur I might be, but why have I been using this out-dated software for this long?

If it’s not broken, why fix it?

I guess I’ve never changed my workflow as the main projects I have been working on over the past number of years have been WordPress based, on simple shared servers, oh and I’ve always been the main dev – meaning version control didn’t really enter my head as I just pushed straight to production using FTP (Yeah I know).

Having now taken a bit of a breather from the rat race – I’m updating my skills, learning some new tech, spending some time on this website, and having a hell of a lot of time while at it.

On that note about updating my skills, and as mentioned earlier, I’m learning all about the wonderful world of Git, and have just learned about using actions to push updates to my host.

If you’d be interested in learning about pushing your commits to your host via FTP, carry on dear reader.

Software I will be using

• Git
• VS Code
• FTP-Deploy-Action

Prerequisites

This write-up assumes that you already have Git installed. I installed my version through homebrew. And you are using VS Code.

1. Create a Github Repository

I’ve created a repository called https://github.com/Frontend-Hero/test-push-ftp that will be used for the purposes of this tutorial.

2. Create a YAML File For FTP Deploy

Following the docs for the awesome Github action FTP Deploy, it tells us to create a YAML file called main.yml inside our new repository – or more specifically inside the  /.github/workflows/ directory.

Here is where mine is located:

https://github.com/Frontend-Hero/test-push-ftp/blob/main/.github/workflows/main.yml

on: push
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: ftp.yourdomain.com
        username: ${{ secrets.FTPUSERNAME }}
        password: ${{ secrets.FTPPASSWORD }}
        protocol: ftps
        server-dir: public_html/test-push-ftp/

You will just need to change your FTP details for your own host.

2.1 Create Your FTP Username & Password Secret

In Github settings > Security > Secrets and Variables > Actions – create two repository secrets that were included in the above YAML file.

• FTPUSERNAME: Your FTP username
• FTPPASSWORD: Your FTP Password

3. Install the GitHub Repositories Extension

With VS Code open, install the Github Repositories extension. This will allow us to download our repository and start committing. Once installed it will ask you to authorise your Github account. Please do this and carry on to the next step.

Click the bottom left green Github button in VS Code and then select Open Remote Repository from the dropdown list, pop in your Github repository link (without the domain prefix), hit enter and your repository will download to your computer and be available in VS Code.

The link to my Github repository is located at Test Push Repository but all I need is Frontend-Hero/test-push

4. Create a New File

Create a new file in VS Code. I’ve called mine index.htm. Then I’ve added some text to my new file. Once you modify your file, the Source Control icon to the left will have a blue notification attached to it, with the number of pending changes.

4.1 Stage File

Stage your file by clicking the + icon in the Changes area. And then you’re ready to upload your file. Give the commit a message and Click the Commit & Push button.

And we are live!

5. Conclusion

That’s about it. Check your repository on Github to see your changes. Once you’re happy that the changes have been committed successfully, now you ready to check the website/directory to see your new shiny commits.