Header

Deploying your GitHub repository to an FTP server

Tutorials

Previously, you may have been updating your website using an FTP client where you drag-and-drop files across to your live or staging site when they've been changed. This can be bad for a number of reasons, such as:

  • Forgetting to upload all your changed files
  • If you upload the whole website each time, having to wait a long time for the files to upload
  • Having to manually connect and run through one of the above methods each time you want to make a change
  • Managing complex uploads to multiple environments (development, staging and production)

Using DeployHQ

In order to use a service such as DeployHQ to streamline your deployment process, you'll need to have an FTP server in place, and a Git repository.

This guide assumes you are using GitHub for code hosting and version control management using Git.

Creating a new project in DeployHQ

Once you've signed up for a new DeployHQ account, you can click the New Project button at the top of the screen to get started.

You’ll be happy to hear that we have a generous free plan that lets you deploy 1 project up to 10 times a day!

New project

Enter a name for your project and choose GitHub. You can connect to a repository on any of the main hosting providers - Bitbucket, Codebase, GitHub and GitLab, but if you host a repository elsewhere you can configure it manually.

Connecting to your GitHub repository

Once you've clicked Create Project you'll be prompted to login to GitHub, then you can choose your account, after which you'll be presented with a list of repositories that you have access to.

Repository list

Select the repository, then DeployHQ will automatically connect to it and add an SSH public key to be able to access it. It's recommended that you keep the add a webhook option checked, as that will allow us to set up automatic deployments later in this guide.

Configuring your FTP server

Once you’ve connected your GitHub repository, you'll be automatically directed to the New Server screen. Here, you'll be able to enter a name for your server, then choose FTP as the protocol.

We've created a simple free hosting site so we'll just use the same details here we'd enter when connecting via our FTP client.

FTP details

The hostname, username and password must match those which you'd enter in your client, and the deployment path is where files will be placed on the server. Normally, this will be a directory like htdocs or public_html.

Once those details have been added, simply click Create Server to finish.

Deploying for the first time

Now that we've configured our repository and server, we can run our first deployment to get started. Click the Deploy for the first time link to the top right of your project:

First deployment

Then, you can check the information before clicking the green Deploy button to the bottom right. You'll notice that the chosen server and branch are selected automatically, and the start revision says The very first commit. This is because no previous commits have been deployed. The end revision will be automatically selected as the latest found in the chosen branch.

Once you've clicked the Deploy button, the deployment will start. In this instance the process will be simple, all files will be transferred to your deployment directory.

First deployment complete

Once that's done, you can review the log and see a full list of which files were transferred across.

Push to upload changes from GitHub to FTP

After your first deployment, you'll be able to push a new commit to the repository, and see the changes uploaded. Additionally, we'll enable automatic deployments so that we don't need to login to DeployHQ to start a deployment each time.

Head to the Automatic Deployments page on the left hand side, then enable the option next to your server:

Auto deployment

After pushing a test commit, the deployment starts automatically and only the files changed in that commit are uploaded. Viewing the deployment log shows the single file uploaded, and that the deployment was automatic:

New deployment

After logging into our server and checking in the htdocs directory, we can see that new file has now been uploaded:

-rw-r--r--    1 23634008   23634008            0 Mar 20 11:00 testfile

That's it! We've now improved our deployment process massively by setting up automatic deployments using DeployHQ. We no longer have to upload everything at once or worry about missing anything - only files that have changed will be uploaded.

Using pipelines to compile code when uploading changes from GitHub to your FTP server

One limitation of deploying via FTP is the inability to run SSH commands. This is particularly frustrating because most modern projects use technologies like Sass, TypeScript or Webpacker which must be compiled before being used in production.

Developers often get around this issue by committing the compiled assets into Git, however, this can lead to nasty merge conflicts and bloated diffs.

DeployHQ’s Build Pipelines feature lets you specify a series of commands to run in an isolated environment which comes preinstalled with Node, Ruby, PHP and many more languages.

Build commands

Once the commands have been run, DeployHQ will upload the compiled assets to your FTP server. Check out our guides for more information on how you can set up the build pipeline to deploy popular frameworks from GitHub to your FTP server.

If you have any questions about this, or any other aspect of the DeployHQ service, please get in touch.

A little bit about the author

I'm Adam W, or as everyone prefers to call me - Batman. I get a lot of satisfaction out of helping our customers and am committed to making their customer experience as positive as possible. When not offering support to our customers, you'll find me gaming, listening to music or running.