Uploading your website with Filezilla

In this lesson we're going to take a look at how you can put the site you've developed onto your web host, in this lesson on uploading your website with Filezilla.
In this lesson we’re going to show you how to:

• Set up your FTP program so it can connect to your website
• Upload files from your computer to your website
• Make changes to content on your site

What is FTP?

FTP is short for File Transfer Protocol. It is a system that allows you to log in to a server and upload, download or modify content.
Note that not all web hosts support FTP (some have it disabled because they may feel it is too insecure, or open to abuse with people uploading too many large files), so if you're not sure, or can't find your FTP login details in your hosting control panel, you should double-check with your hosting provider.

What is FileZilla?

FileZilla is a program that actually lets you transfers files over FTP. It's free, available for Windows and Mac OSX and you can download it from http://filezilla-project.org/. Filezilla is a reasonably standard FTP program, and you’ll find that most FTP programs operate in a similar way.
If you’ve got Dreamweaver or some other HTML editing program which has the ability to upload your website, you might get a little bit lost in this lesson since the process can be a little different; however, even if you are creating your website in one of these programs, you can still use a separate FTP program to upload it all - in fact it's frequently easier to see what's going on if you use a separate program.

Connecting to your website

Once you've downloaded and installed FileZilla, the first thing you need to do is tell FileZilla what it's connecting to! To do this, click on "File" at the top of the screen, and then select "Site Manager".
Go File > Site Manager

nside this window, click on "New Site" and you’ll see a new icon appear under " My FTP Sites". Give it a name if you like, otherwise it’ll just call it "New Site"

Select this new site and a whole bunch of fields will open on the right. In these boxes you’re going to enter some of the information that you will have received from your website hosting company when you signed up with them (check your welcome email):
Your Host will typically be yourdomainname.com, or sometimes ftp.yourdomainname.com - your hosting company will have given you this information.
In the next box we have "Protocol". Just leave that at the default, "FTP", for the moment.
For "Logon Type" select "Normal", and then enter your username and password into the boxes below. "User" will be your main user name, but depending on your hosting provider, it might also be yourusername@yourdomainname.com, or something else. The password will have been provided by the hosting company with all the other information in your welcome email. (If you’re not sure about any of this information, take a moment to browse through the help section of your hosting company’s website. They’re bound to have a FAQ about that covers this.)
That’s all the information you need to enter for the moment; you can now click Connect to save your information and connect to your site

What you'll see next is a whole lot of text scrolling in the top window. That’s the FTP program communicating with the server. Hopefully it’ll be successful and you’ll see a whole lot of green and blue text flashing through that window, then some other windows will open in the main window on the right.

 

The window on the right represents the files and folders on your server. Depending on the features and administration tools your hosting provider has bundled with your account, you might see a range of folders here. Usually you won't need to go into them. The folder we’re really interested in is the folder that holds the files and images that actually appear on your website. It’ll typically be called "public_html", "www" or "httpdocs".
Open that directory by double-clicking it. Congratulations! You’re inside your website!
What we need to do now is get the files off your computer and into this space. The two windows on the left represent the files and folders on your computer, so you need to navigate your way to wherever you’re keeping the files you’ve got ready for your website. You can use the top window in a manner similar to Windows Explorer or Mac Finder to get to the file you want. When you click on a folder the contents of the folder will appear in the bigger window underneath.
Once you’ve found your website material (hopefully it’s all nicely organised into folders), you just need to drag and drop them into the big window on the right hand side and Filezilla will upload them. You could also right-click and select "upload". You can select multiple folders at once, and Filezilla will upload the folders and everything inside them. (Make sure that you only put things in the folders that you want to upload!)
Be aware that Filezilla will always upload into whatever directory you're currently looking at on the server, regardless of where you're looking on your own computer! So if you want to upload a single image from the "images" folder on your computer, you also need to navigate to the "images" folder on your web server so that you're looking inside it when you upload, otherwise Filezilla might upload the file somewhere completely different.
Just as an aside, it’s always a good idea to have a separate folder on your computer to keep all your website files on, so you’re not having to scramble around looking for things to upload. Not only that, but try to have the folders in this offline version organised in the same way as they’ll appear on your website - ie, make your offline version exactly the same as your online version. This makes uploading a breeze, since all you have to do is drag all the folders from one side to the other without having to go digging around, looking for files.
There's no magic "publish" button when it comes to FTP. As soon as you upload something to your website it goes live, so any files you've dragged across in the previous step should now be available on the Internet!

Making changes to your website

Once you’ve uploaded your site you might want to change something, or add new pages, new directories, whatever. The best way to do this is to make the changes to your offline version, and then upload the new files just like we did before. However, if you’ve just changed a couple of pages or added a couple of images, it’s probably not necessary to upload your entire site - hust select the files you want to upload.

A small tip

A good idea, when you're modifying pages, is to save a copy of the original page into a separate file outside of your website directory, so that if you break anything you can go back to the old version. For instance, if you’re changing your index.html file (a very important one!) save the original version in an "oldfiles" directory, and rename it to index_1969-07-20.html (or whatever your current date is.) You’re bound to have a whole lot of versions of index.html and putting the date in there is a bit more meaningful than index_2.html.

Downloading files (or your entire site)

If you want to download or backup your entire site at any stage (highly recommended!), all you have to do is make sure you’re looking at the place on your computer you want to download it to (in the left side); then, select the files you want to download from your site on the right, right-click and select "download". Filezilla will download all the files and folders to your computer.

Basic troubleshooting

If you're unable to connect to your webhost for some reason, FileZilla can give you some information to help you find the problem. The important thing to look at is the text flashing through the top of the screen when you try to connect to your site.

"Unable to connect!"

Usually means that you've entered the name of your FTP server incorrectly. Remember it should be something like example.com, or ftp.example.com. Do not enter "http://".
If you’ve only just signed up for your hosting and your domain name, you might not be able to FTP to your domain name right away since it takes between 12 and 48 hours for the information to "propagate". You can still upload things to your site, but you have to enter an IP address in this box instead of the domain name. Your hosting company should have provided you with this IP address in the welcome email, and it will probably look something like 123.45.234.90/~yourname.
The easier alternative is to just wait a little while!

"Authentication failed, sorry. Error, Unable to connect!"

This means that the server has rejected your username or password. Make sure you've entered this correctly.
If you notice that there are some files down the bottom of the screen in the upload queue that just don't seem to be uploading, or if FileZilla tells you that it has had difficulty uploading these files, the best thing to do is try again!
Right click on the files that have failed to upload (in the upload window, at the bottom of the screen) and select "Reset status". FileZilla will try to upload them again. You can also use this window to prioritize certain files or move them to the bottom of the queue.

Lesson Summary

In this lesson we've taken a look at how to upload your website to your server using FileZilla. We looked at:

• What FTP is
• What FileZilla is
• How to connect to your website
• Making changes to your website
• Backing up your website
• Basic troubleshooting

Learn something new? Share it with your friends!

thanks