freeSchool logo

Tutorial 6. How to Upload Files Using FTP

When pages are complete and images are set, it's time to upload files to your host server and "go live". This is accomplished by using an FTP client ("File Transfer Protocol" ). "Client" software is any that is designed to help move files back and forth from a server (get it? "server/client"? Like a restaurant?). Other examples of client software are Web browsers (e.g., Internet Explorer, Firefox and Safari) and email clients (e.g., Entourage, Mail, Outlook).

Types of FTP clients. There are two basic types of FTP clients for our purposes: 1) stand-alone, and 2) in-browser file managers available at your Web host. Traditionally, FTP was done using stand-alone client software such as WS_FTP for Windows and Fetch and Transport for Macintosh. Increasingly, however, it seems that Web hosts have quietly inserted in-browser FTP clients as part of their user accounts and made it harder to get the information needed for the stand-alone types. Why? Maybe to keep total control over the hosting process.

Getting an FTP Client. The first type, stand-alone FTP clients, are available for purchase on the Web, typically for $40-60. WS_FTP, Fetch and Transmit are full, professional clients and are highly recommeded. Free clents or "lite" versions of professional clients are also available, and you can google them. A warning though, in my experience the free FTP clients can be a bit harder to use. In-browser file managers are available free as part of most hosting packages. Certainly major hosts such as Bluehost.com and Godaddy.com have them.

PART I: Stand-Alone FTP Clients

Basic FTP information for Stand-Alone FTP Clients. To facilitate the transfer of files from your build machine (your computer) to the host server, your stand-alone FTP client requires 3 phrases. Web hosts used to send you these settings in your first email, but, as before, they have started withholding this information. So it may take you a while to ferret these 3 things from you host:

  • Host/Server Name (something like ftp.yoursite.com, or an IP adress, like 205.345.3.6)
  • User Name (something like yoursite.com or yoursite)
  • Password (you create this, usually a combination of letters and numbers, like y0urs1t3)

1. Connecting to the Server. When you open an FTP client, you will see a screen something like these. The one on the left is from my personal favorite, Transmit, and the one on the right is the connection dialogue box from Fetch. Note that the two have different names for addressing the server: Server and Hostname. If you don't see a panel such as these, find a button or Main Menu item that reads something like "Make Connection". When the dialogue box opens, fill in the 3 phrases you should have received from your Web host. When you click the "Connect" button, a new box should open showing the open connection.

 
2

2. Two-Window FTP Client: use. When the connecton is made in FTP clients such as WS_FTP and Transmit, a two-window box should open. On the left will be your files and folders, and on the right, files and folders on the host server at the root, or entry point your site is allowed on the server. Files are moved back and forth by drag-and-drop, or sometimes with little arrow buttons.

3. Putting up a new home page. Every host will place a temporary home page for you on the server, so when people enter your URL, something will display. Once the connection is made, look for the HTML files. On hosts like Bluehost, there are LOTS of folders you should leave alone: they are housekeeping folders that keep track of usage, allow for CGI scripts, etc. You're looking for a folder that reads Public_HTML. Other hosts place the HTML files right at the root. Anyway, once you find the HTML files, look for a .html file called default.html or temp.html: this is the file that shows when people go to your URL. Create a new home page and, of course, name it index.html. When it's done, drag it to the HTML folder on the server and delete the holding page. When the site reloads (remember to clear the browser cache) you should see your new page "live".

4. One-Window FTP Client: use. A second style of stand-alone FTP client uses one window. Shown above is the connection dialogue box from Fetch. To move files from the server to your build machine, select the file to be downloaded and click the "Get" button you see at the top of the window. To move files from the server to your build machine, click the "Put" button at the top of the screen. This will open a browsing window. Browse to your site folder, select the file to be uploaded, and click the "Put" button. Other one-window clients will be somewhat different, but this is the general idea.

5. Putting up a new home page using a one-window client. The instructions are very similar to those in 3), above.

6. Finding FTP settings at your host. The image above is of the panel for "FTP Accounts" at this site's host, Bluehost.com. See Section II, no. 2 to find out how I got to this point. If this was your host, you'd click "Configure FTP Client" as above.

For some reason, as above, these basic "manual" FTP settings can be hard to find at some hosts. If you can't find them, try pestering your host's customer service or technical assistance personal with phonecalls and email.

7. Make a note of "Manual Settings". At Bluehost, you get this page when you choose to configure settings. If you ignore the configuration software available, down at the bottom of the page are the good old manual settings, ready to input into a stand-alone FTP client (with your password, of course).

PART II: Web-Based, In-Browser Clients

In-Browser Clients are Usually Available from Your Host. Sadly, its a lot harder to help you with this type of FTP: there are many hosts and many places to find this service, and a whole lot of user interface designs. I can only give you the way it's done at the Web host this site uses, Bluehost.com. In the course of helping students in the classroom, I have seen a number of hosts, most notably Godaddy.com, and am too aware how difficult this may be.
4

1. Sign on to your host account. Most host sites have sign in fields on their home page. The host for this site has theirs in the upper right-hand corner. Note that this host indicates that a "Control Panel" will be opened on button press.
5

2. Navigate to your File Manager or FTP Client. Open in the example is the "control panel" for this site at Bluehost. Usually, a full-service host will offer many, many features to add and metrics to examine. Not shown, but on this panel is a icon called "File Manager" — other hosts will call this, not surprisingly, "FTP Client". For other clients, it can be more of a search. Once you sign on, you'll probably need to find the account for your domain name and click it to get features specific to it (you can have several domains, after all).
7

3. If you have a choice for which files to look at, make it. Many hosts take you straight to the site files of a domain once it's selected; mine asks for which "directory" (file and folder structure) to go to. Since in this instance I'd be uploading site files, I would choose "Web Root (public_html/www)".

8

4. Select the directory you want to upload to. To upload a complete site, or a homepage, you want the directory (files and folders) at the root of the site. Look at Section 1, no. 3, "Putting Up a Homepage", above. Click on the folder (directory) to which you want to upload in order to select it. Click on the "Upload" icon, or whatever link your host provides.
7

6. Choose the file you want to upload. When you click "upload", you'll get some sort of means to navigate or browse to the files you want to upload. Bluehosts isn't very good; it won't let you upload the whole site at a go. I personaly don't care, because I use a stand-alone FTP client. Some hosts have better schemes, with a two-window setup like some of the stand-alones, and files can be moved either by drag-and-drop or by selection and button click.

8

7. Browse to the upload file. Here's the Bluehost file chooser. Click "Choose" or a similar button to start the upload.

8. Check the results. Using your FTP file manager, navigate to where you think you've uploaded your new file, and check that it has arrived..