Over the past few months, I’ve had a lot of my students ask me for a tutorial on how to use FTP.
After all, you can be the best website designer in the world, but without knowing exactly how to use FTP correctly, you won’t even be able to get your files online.
So What Is FTP?
FTP stands for “File Transfer Protocol”, and is a method for getting the files currently stored on your computer to display on your website.
Think of it this way…
Your Computer —> FTP —> Your Website
Throughout this guide, I’m assuming you have a domain name and hosting account, as these are required to get your files online.
So let’s begin!
How To Use FTP
To begin with, you need a small piece of software which will control the FTP process.
I recommend FileZilla, as it’s 100% free and works perfectly.
When you install it and open it up, you’ll get a screen which looks a little like this…
If you notice, the screen can be “split” down the middle into two halves – the left side and the right side.
(As we’re just getting started, the top and bottom full-width rows are completely irrelevant for now.)
The left side of the screen is the place to show all the files on your computer…
… and the right side of the screen is the place to show all the files on your website (inside your hosting account).
To get started, we need to connect to our website’s hosting account using our “FTP access details”.
This usually consists of a username and password, along with the website you’d like to connect to.
When you registered for your hosting account, you should have been sent your FTP access details in the welcome email (sometimes you can use the “cPanel” details).
If you can’t find them, contact your hosting company and they’ll be sure to give you the correct details 🙂
Once you have your details, simply enter them in the bar at the top of the screen.
The “Host” field is the website domain name you’d like to connect to (e.g. digitalprosperity.com), and the Username and Password fields are self explanatory. You don’t need to add a “Port” number unless your hosting company has given you one.
Then just hit the “Quickconnect” button!
You should now see a bunch of scrolling text at the top of the screen which can only be described as something out of The Matrix, and some files and folders should appear on the right hand side of the screen.
If the files and folders don’t appear, this means there’s something wrong with your access details (so contact your hosting company if you’re not sure what to do next).
From here, we need to find the “public_html” folder in the right hand side of the screen, as this is where all of the “visible” files (the ones shown on the web) are stored.
Once you’ve found it, just double click on it to go inside.
(Every hosting company is different, so if your hosting account doesn’t have a public_html folder, it usually means you’re already inside it)
Well done! You’re now inside your website’s hosting account.
To upload files onto your website, just drag and drop them from your computer into the blank space on the right hand side of the screen.
You can do this from either navigating to the files in the left hand side of the screen within FileZilla, from your desktop, or the folder view itself.
(It’s completely up to you!)
Then you should see some more scrolling text at the top of the screen, plus a green progress bar at the bottom.
When this progress bar disappears, you should see a line of text at the top of the screen which says “Directory listing successful” – which means your file is uploaded!
You can do this with html files, videos, audio files… You name it!
But keep in mind, the file to be displayed at the homepage of your website (e.g. http://www.yourwebsite.com) should be “index.something” – usually “index.html” or “index.php”.
If you have a WordPress installation you’d like to upload, this “public_html” folder is also the place to drag and drop it into.
When you’re finished, just close the FileZilla software, and you’re done! 🙂
Accessing Your Files From The Web
To access, download or view these files from the web, we need to know the URL (“web address”) where they are stored.
Within the FTP client, every folder and file within the “public_html” is a forward slash in your URL.
So for example, if I was to upload a file called “coolebook.pdf” to my “public_html” folder, the correct URL to access it would be…
However, if I was to create a new folder within my hosting account using FileZilla called “download”, then drag and drop that “coolebook.pdf” into it, the correct URL to access it would be…
… Because in our hosting account, we did this:
public_html —> download —> coolebook.pdf
In other words, each forward slash in the URL is the “path” to get to the file within your hosting account.
Now you know this vital skill of uploading files to your website using FTP, you can play around with it and generally get familiar with the way everything works.
As always, practice makes perfect!
I hope this tutorial has helped you, and feel free to ask me any questions (or leave any comments) in the comments section below…
- James Francis.