By Scot Hacker
For updates and discussion on this tutorial, visit:
FTP, which stands for File Transfer Protocol, is a means of transferring files directly between computers on the internet — usually between desktops and servers. One of the most common uses for FTP is to upload the files that comprise a web site to a public web server, though it can also be useful for passing around files that are too large for email. FTP is one of the internet’s oldest and simplest protocols, and pre-dates HTTP (which drives the world wide web) by decades.
In this tutorial we’ll show you how to “bookmark” an FTP server, make the connection, then upload files from your computer to a web server.
This tutorial also includes a video screencast, demonstrating how the FTP process works. If you’re a visually oriented person, you might want to watch that instead of or addition to reading through the tutorial.
An FTP client is a desktop application you run on your own computer that lets you drag and drop files from your computer to a remote server.
Secure FTP is a variant of FTP that does the same thing without transmitting passwords in clear text. SFTP is highly recommended over FTP. In fact, the entire University of California system completely bans the use of non-secure FTP. Contact your web host to see about having SSH/SFTP connections enabled. All instructions in this tutorial should work identically whether you’re using FTP or SFTP.
What You’ll Need
You’ll need an FTP client to communicate with an FTP server — just like you use a web client (a browser) to get information from a web server, or an email client (like Outlook, Apple Mail, or GMail) to communicate with a mail server. There are dozens of FTP clients available for Mac OS, Windows, and Unix/Linux. Some are free, some are shareware, and some have to be purchased.
This tutorial shows screenshots of Cyberduck for the Mac, since it’s installed on J-School lab computers and is payment-optional. Please see the Related Links section of this tutorial for other FTP client recommendations.
Please download and install an FTP client on your computer before continuing.
You’ll also need to know your FTP connection details in order to make a connection, including:
Server name (hostname)
Your web host or system administrator can provide you with this information, but in most cases you can assume that the hostname is the same as your domain name (domain.com) or a subdomain of that (ftp.yourdomain.com). Your username and password are most likely the same ones you used to sign up for the hosting account. However, in some cases FTP accounts take the form of an email address (even though it’s not), such as email@example.com. Check your host’s FAQs or knowledgebase if unsure.
Making the Connection
While different FTP clients have somewhat different interfaces, the basic concept is always the same. You’ll need to enter the name of the server (aka the “hostname”) to which you’re connecting, your username, and your password. To avoid having to type everything in manually every time, you should start by creating a “bookmark” to store this information for you.
Important: If you’re temporarily borrowing a computer from someone else, or using a public computer, DO NOT allow the bookmarking feature to store your password.
Remember, these screenshots are from Cyberduck for Mac OS. Your client may look somewhat different, but the concepts are the same.
To view the bookmark management screen in Cyberduck, click the Bookmark icon near the top left:
To add a new bookmark, click the “+” symbol at the lower left of the screen:
In the Nickname field, give the connection a friendly name, like “Ernie’s Documents at the J-School”
Select SFTP or FTP from the Protocol picklist (preferably SFTP).
Enter your username. The dialog should now look something like this:
Close the bookmark box and you’ll see that your new bookmark has been stored for future use. You can bookmark as many FTP servers as you like.
Double-click a bookmark to open that connection. You’ll be prompted for your password, which you can optionally have the computer remember for future use. Again, if you’re using a shared or public computer, don’t let the computer store the password for you.
You’re now looking at a Finder-like view of your home directory on the remote server. Most of the folder names will appear unfamiliar, and you don’t need to worry about them. The important folder is the “document root,” which is where the web server looks for files when web requests on your domain arrive. In most cases, this folder will be called public_html. Everything that lives inside public_html will be visible on the public web. Files and folders outside of this folder cannot be accessed from a web browser.
Double-click the public_html folder to see its contents.
Now you can simply drag and drop files from your local computer to the server and back again. Assuming you’ve already built your web site in a folder on your Desktop, open that folder in the Finder and drag one or more of its files into the public_html folder on the server.
To check your work, access your domain from a web browser. If your homepage was named index.html, your site should come right up. If your homepage had some other name, you’ll need to specify the filename in the URL. For example, if your homepage is called pageone.html, then the URL to it will be http://yourdomain.com/pageone.html.
See how filenames have a one-to-one correlation to URLs? This is also true of folder names. If you uploaded a folder called images and that folder contained a file called headshot.jpg, then the full URL to that image will be http://yourdomain.com/images/headshot.jpg.
There is a one-to-one relationship between the hierarchy of folder and filenames on a web server and the URLs to each file on the web. Shown here (in front) a file called headshot.png that lives inside a folder called images. In the background, a web browser’s URL field shows the full path to the same file.
Note that the web browser won’t automatically refresh its view after uploading – you’ll need to click the Refresh/Reload button in your web browser after each upload to see your changes. In fact, you’ll be doing this so often, you’ll want to learn the keyboard shortcut: Cmd-R (Mac) or Ctrl-R (Windows).
The Editing Process
It’s important to make sure you’ve got a complete and accurate copy of your web site on your computer at all times, in case your web host has a disk failure, or you inadvertently delete a file. Therefore, it’s best practice always to edit your site on your own computer, then upload files to the live server when ready. This also ensures that the public won’t accidentally browse to a file that’s currently in the middle of being edited on the server and see half-baked information or design.
After making an edit, you’ll need to RE-upload each changed file. Your FTP client will prompt you to make sure you really intend to overwrite the copy of the file on the server. After overwriting the file, you’ll of course need to refresh your browser again to see the changes.
However, if you prefer to live dangerously and are very confident in your ability to change an HTML document without breaking it, there is a faster way through this process. Most modern FTP clients have built-in integration with desktop text editors. Take a look in your FTP client’s Settings or Preferences menus to set your favorite text editor. Once configured, selecting a file and clicking the Edit button will cause that file to open up directly on the server. When you save the document, the changes will be transparently written back to the server, thus sidestepping the whole upload/overwrite process every time.
Most modern FTP clients have the ability to push files on the server directly into text editors on your computer, so you can edit directly on the remote server.
That’s very convenient, but keep in mind two gotchas:
You’re working without a net. The public will see any mistakes you make as soon as you hit Save.
By doing this, your local copy of the site you’re working on goes out of sync with the version on the server, which could cause problems down the road if you’re not careful. So only use this method if you also remember to manually sync the two versions of the sites, or rely on some other backup system.
You can, however, provide yourself with a bit of a safety net by using your FTP client’s “Duplicate” feature. Just as you can duplicate a file in the Mac Finder by pressing Cmd-D, you can do the same thing on the remote server with the same keyboard shortcut (or right-click | Duplicate File). It’s an excellent idea to always make a live backup of a file before doing any live editing on it, just in case things go wrong (and they will… eventually!)
Always make a backup copy of a file on the server before editing it live!
This video screencast covers most of the same material as the written tutorial; the tutorial text and screencast supplement one another.
FTP Made Simple from kdmcinfo on Vimeo.
About this Tutorial
This tutorial was created by Scot Hacker of the Knight Digital Media Center, to assist students in web development classes, new web domain owners, and journalists in the Knight training programs.
This content may not be republished in print or digital form without express written permission from Berkeley Advanced Media Institute. Please see our Content Redistribution Policy at multimedia.journalism.berkeley.edu/content_redistribution/.
This workshop was incredibly valuable — I now have a solid foundation for new kinds of Web and multimedia journalism and an idea of where I want to go from here and what I want to take back to my news organization. I want to come up with ideas to better my news organization and the news/digital experience for other reporters and to train others in all the techniques I have learned.