Home » Other Tips » Hosting Issues » Uploading your site using FTP

Uploading your site using FTP

If you're considering creating your own web site, odds are pretty good that you are fairly comfortable using the web.  You feel confident that you can browse from site to site, search for what you want to find, and send emails.  For some reason though the thought of FTP sends a cold chill down many people's spines. 

This tutorial will be a quick lesson in how to upload your site from your computer to your server. 

I'm going to be using FileZilla for this tutorial.  FileZilla is a free and open-source FTP client and is one of two that I've used.  The other is FTPx which I had crashes with so I changed to FileZilla and never looked back.

Before we begin
Before we start you'll need a few pieces of information from your host.  When you registered they should have given you an address, a username, and a password to login to your FTP space.  Normally the address is the same as your domain, so for this site it's bobsmithphotography.net. 

The FileZilla Window
When you open FileZilla for the first time you'll see a window similar to this. 

Notice that there are two panels in the middle.  The left side is your local file system, the right side is your server file system.  Once we connect in a couple steps you'll be able to drag between them.

An important setting
A quick mini lesson.  For FTP there are basically two types of files - ASCII and binary.  Without going too deep let's just say that graphics are binary and HTML and CSS files are ASCII.  But we'll make it even easier. Under the Transfer menu select Transfer Type and make sure that Auto is checked.  Now FileZilla will use the correct mode even without you telling it to.

Making the connection
There are three boxes across the top of the window that we need to be concerned with - Address, User, and Password.  The fourth is port and you can usually leave this blank.  Most hosts leave the port to the default setting of 21 and that's what FileZilla will use if you leave that field blank.

Enter the address, username, and password that your host gave you into these three boxes and press Quick Connect.  You'll see a window that looks like the following.

I've blurred out a few things mostly because they're not important to this tutorial. 

The server folder names I'm using are from a default installation of cPanel, so yours may differ.  Sometimes you'll connect directly to your web space, sometimes the folders will have different names.  If in doubt as to where to upload your files, ask your host.

Your web space is located in the public_html folder.  Any file you put there will be available through your website.  Double click on public_html and the server will change directories.

Uploading files
To upload files to your web space you just need to drag them from the local panel on the left to the server panel on the right.  You are probably uploading multiple files, and you can just select them all and drag at once.  They'll get listed in the queue window at the bottom and upload in order.

Troubleshooting
Can things go wrong?  Yup.  A couple things to try.

First, FileZilla defaults to trying to use multiple connections to upload files.  Some hosts don't like this.  Go to the Settings... option under the Edit menu.  Down the left side you'll see a choice for File Transfer Settings.  When you select this you'll see a check box for Use Multple Connections to Transfer Files.  Clear this checkbox.  Now FileZilla will only use one connection at a time.  Confused?  Here's a picture.

Files not showing up on your site?  Check with your host to make sure you're putting them in the right folder.  Every host I've used has had the same public_html structure, but I'm sure there are some that differ.

Trouble connecting?  Make sure you're using the right username and password.  Sometimes you have to use your domain name as well - so if your username is bob for the domain bobsmithphotography.net your username may actually be bob@bobsmithphotography.net instead of just bob. 

Files look like Greek when you view your site?  Check and make sure that you've selected Auto as your transfer type.  Trying to upload a HTML file in binary mode will often do this.

Newly uploaded files still showing the old version?  Clear your browser cache by pushing the refresh button. Sometimes your browser will be showing an older version instead of downloading the new one.