Last updated on April 12th, 2017. Posted in Web Design.
In web design, we often need to connect directly to our web server to access the files there. Maybe we want to edit some of the files that are a part of our website, upload new files to our web server, or perhaps back up some of our site files manually. The best way to connect to our web server and gain access to the files stored there is using something called FTP (File Transfer Protocol).
In this tutorial, I’d like to show you how all this works. We’ll talk about what you’ll need in order to connect to your web server using FTP, then I’ll walk you through, step-by-step, to connect to your website using an FTP application. We’ll do all of this using a free Firefox extension called FireFTP.
One of the big reasons why I love FireFTP is that because it’s browser-based, I can keep it running in one browser tab while I’m inside another checking email or looking up the lyrics to Dancing Queen. You can even have multiple FireFTP sessions open in different browser tabs.
By the end of this tutorial, you’ll have a firm grasp on what FTP is and how it works, and you’ll have an FTP application installed installed on your computer and connected to your web server.
The concepts and process for using FTP are fairly straightforward, so let’s get started!
When running a website, you and I will have several ways to access our live site and the files that are stored on our web server. For example, we can access our site’s files using our web host’s cPanel interface. Or, if we’re running a WordPress website, we can access some of our site files using the WordPress admin dashboard. But the most direct way to gain access to our site files, and any other files on our web server, is to use FTP.
Think of FTP as opening a two-way street between your computer and your web server. You can either send files from your computer to your web server (uploading), or you can pull files from your web server down to your computer (downloading). There are lots of scenarios where you’d want to either pull files down from your website or upload new ones—and FTP makes this process a breeze.
For instance, you might want to edit a part of your website. One method of doing this is to connect to your website via FTP, find the file on your web server and download it to your computer, make your edits, and then upload the file back to your server. The changes you’ve made would now appear on your live website. Other times, you might want to manually back up your website’s files, which is easy enough with FTP. Here, you’d simply connect to your web server and download all your site files to your computer. Here’s a final example of where using FTP comes in very handy: If you’re running a WordPress website, it’s possible to get locked out of your admin dashboard. Thankfully, this is a rare event. And this problem can be resolved via FTP.
In order to use FTP, you’ll need a few things. First, you’ll need an FTP application. There are many free and paid FTP applications available for both Mac and PC. Be sure to check out my tutorials, The Best FTP Applications For Windows Users and The Best FTP Applications For Mac Users.
An FTP application provides us with a simple, easy to use interface for managing our website files. We can move, copy, rename, and delete files, create folders, and so on. You’ll see exactly how this works in a moment.
The next thing we’ll need is your FTP login information. This is username, password, and web server info that we’ll set within the FTP application, which will grant us access to the web server. This information is provided to you by your web hosting company. They likely provided this information in their welcome email they sent you when you first signed up, and they often also provide this information in your hosting dashboard and in cPanel. If you’re really stuck, you can always contact your web host’s support and they’ll be able to assist you.
Armed with an FTP application and your FTP login information, you can now connect to your website. The actual process of connecting is very simple. FTP applications store your login information, so connecting to your web server is usually just a matter of clicking a Connect button. Once you’re connected, you’ll see a double-pane window, with (typically) your computer in the left-hand pane, and your web server in the right pane. Moving files is simply a matter of dragging and dropping.
So now that you know the basics of FTP and how it works, let’s now go and actually install an FTP application and connect to your web server. I’ve divided these steps into two parts, Installing FireFTP In Firefox, and Connecting To Your Web Server. Let’s take a look at how it works…
Now that we know a little bit about FTP and how it works, we’re ready to install an FTP application and connect to our website. I’ve mentioned already that there are many free and commercial-grade FTP applications available for both Mac and Windows. Here, we’ll be installing FireFTP for Firefox. FireFTP is free, easy to use, and it’s my FTP application of choice. Let’s get FireFTP installed, then I’ll show you how to use it.
Firefox is free to use. And it’s always good to have an extra web browser or two handy—especially when you’re testing things in web design.
Firefox opens a message window and begins installing FireFTP.
Firefox finishes the installation. Then, a message appears asking you to restart Firefox.
Once Firefox restarts, FireFTP will be ready to use. You may see a small FireFTP icon on Firefox’s toolbar, which you can click to open FireFTP in a browser tab, or you can choose Tools > Web Developer > FireFTP.
Great, with FireFTP now installed, we’re ready to use it to connect to our web server. Let’s see how that’s done…
Now that we have FireFTP installed in Firefox, we’re ready to put it to use. What we’ll do now is plug in the FTP login info that our web host provided us with, save this info in FireFTP (so that future connections are just a single mouse click), and then connect to our web server.
Once again, this information will be provided to you from your web host. If you’re having trouble finding the information you need, contact your host’s technical support. This is one of the most common requests they get, so they’ll know exactly what information you need.
Account Name: This is for your own reference, so you can put whatever you like. I usually just put the name of the website.
Host: In the documentation that your web host provided you with, this could be referred to as the FTP hostname, or the server. This is just the address of your web server. Sometimes this is something like
ftp.yourdomain.com, or even the web server’s IP address.
Login: Here, insert your FTP username. Often, this is a truncated version of your website’s URL.
Password: This is your FTP password.
That’s it! You should now be connected to your website.
You’ll see your computer’s file structure on the left side and your live web server on the right. Often, your website will be stored inside a folder called public_html. If this is the case for your website, locate this folder and double-click on it to open it. This is the "top level" of your domain or your website (sometimes called the root-level). So when someone navigates to
yourdomain.com, it’s this folder that they’re going to.
Here a pro-tip: To save you the extra step of having to double-click on the public_html folder every time you connect to your website, try this: When you’re connected to your site, in the top-left, click the Edit button. Next, in the dialog box that appears, click Connection at the top. Then, in the Initial Directories area, adjacent to Remote, click Use Current; then click OK. What this does is sets public_html as the default directory that FireFTP will navigate to the next time you connect to your website.
Once you’re connected to your website, you can now manage the files on your web server. You can upload files from your computer, download files from your web server, create folders, and otherwise handle your site’s file management.
Working with your files in FireFTP is very simple. Here’s a fast run-through of a few common tasks:
To upload a file: Navigate to and select the file in the left-hand pane (remember, your computer is displayed on this side). Next, click the green Upload arrow that appears on the vertical separator between the left and right window panes. The file will be uploaded to the directory that’s currently displayed in the right-hand pane. You can upload multiple files at once if you like.
To download a file: Just do the opposite to the above—navigate to and select the file that you want to download in the right-hand pane (don’t forget, the right-hand pane displays your live web server). Next, click the green Download arrow that appears on the vertical separator between the left and right window panes. The file will be downloaded to the directory that’s currently displayed in the left-hand pane. And, just as before, you can download multiple files at once.
Deleting, creating folders, and other tasks: It’s easiest to summarize other common tasks together. All you need to do is simply right-click on a file in either the left or right window pane. In the context-senstive menu that appears, you’ll see all sorts of commands for common tasks—deleting, renaming, cutting, and so on. Create Directory, Copy URL, and Properties are a few other handy commands.
What’s great about FireFTP is it will store the FTP information for you. In fact, you can even store information for several websites. To connect to your website the next time you launch FireFTP, all you need to do is select the website from the drop-down menu in the top-left corner, and then click Connect. That’s it.
I want to mention one more thing about FireFTP: The developer behind FireFTP takes 100% any proceeds and donations, and puts it all towards helping people with disabilities. So if you like FireFTP, please consider supporting the project.
And that’s all there is to using FireFTP to manage the files on your web server!
I hope you enjoyed this look at using FTP and connecting to your web server using FireFTP. As you can see, it’s all a very simple process. Just be careful when you’re poking around on your web server. You don’t want to accidentally move or delete anything critical. This is another reason for frequent website backups! Other than that, it’s all pretty straightforward. I think many people get intimidated by the jargonny, techie language that’s used in web design (how many FTPs are in a MySQL again?!), but if you can get past that stuff, the actual process is easy.
So to summarize, we first talked about a few FTP concepts and key ideas, and I mentioned a few scenarios where using FTP comes in handy. After that, we got the FireFTP extension installed in Firefox. Then, we plugged our FTP login details into FireFTP and connected to the web server. I also added in some additional information about performing common tasks in FireFTP. I hope you were able to get all this to work.
See you soon!