Coders' Guidebook

How to upload files to your website using File Transfer Protocol (FTP)

This tutorial will walk you through how to upload your website's files so they can be viewed by others online. You will need a web domain and hosting service to proceed with this tutorial, so if you have not already set these things up then first complete this tutorial. The hosting provider used for this tutorial is x10hosting because they are free, quick and reliable, but you should still be able to follow along no matter which provider you use.

Setting up the File Transfer Protocol (FTP)

File Transfer Protocol (FTP) is a method for your computer and web server to communicate with one another. You can use FTP to upload webpages and other files to the server and so make them available over the internet.

Before you can use FTP, you must first create an FTP account with your hosting provider. If you are using x10hosting, then log into your account and open cPanel. Your view of cPanel will depend on which theme you are using. The screenshots for this tutorial are from cPanel in Paper Lantern mode. If your cPanel layout does not look like the screenshots below then you may need to switch your theme from x10Hosting Basic to Paper Lantern theme by clicking the 'Switch Theme' button.

Once in Paper Lantern mode, navigate to the section named 'FTP Accounts'.

Create an FTP account by filling in the Log In and Password sections of the Add FTP Account form. Be sure to keep a note of your Log In and Password details someplace safe because we will need them later. You must replace the text which auto-fills the Directory section with public_html because only files found in this folder will be loaded when people visit your website. The public_html folder (also known as the root directory) is where you will store your 'index.html' homepage.

addftp

Once you have created an FTP account you next need to download an FTP application. FTP applications handle your files and upload them to the server. FileZilla is one of the most popular FTP applications and can be downloaded for free here.

Install FileZilla (or the FTP client of your choice) and configure it to log in to your FTP account. In FileZilla, this is done by clicking File > Site Manager > New Site. In the dialogue box on the right-hand side of the Site Manager window, fill in the details as follows:

  • Protocol - FTP - File Transfer Protocol
  • Host - This will be your domain name (e.g. treesandtrees.com for our imaginary website)
  • Port - The port can be left blank
  • Encryption - Use explicit FTP over TLS if available
  • Logon Type - Normal
  • User - This is the Log In for your FTP account
  • Password - This is the password for your FTP account
  • Background color - Can be left on 'None' or set to whatever colour prefer.

In the Site Manager window, you can now connect to the server using your FTP login by pressing 'Connect'. For future reference though, you can also log in by selecting your login from the 'Open the Site Manager' dropdown menu.

Uploading files

Once you have connected to the server you can begin uploading files to your website. In FileZilla, you will find two panels of files. The left-hand side shows the files on your computer and the right-hand side shows the files on the server.

To upload files to the server, simply drag and drop them from the computer panel over to the server panel. You should receive a notification when the files have finished uploading and they will also now be visible on the server panel.

And that's it! Providing you have uploaded your files to the public_html folder we set as the directory earlier then your website will now be available for all to see.

<<< Previous

Next >>>