What you will learn:
- How to set up an account for file transfer
- How to upload a website
- How to transfer files using FireFTP
What is FTP?
An FTP program is a program that allows you to transfer files from your computer to a remote server. You will recall from our definitions in the Beginning chapter that remote files are files that we have transferred to the internet. So a remote server is one that grants access of your site files to those who are seeking your website on the internet. What we're really saying, then, is that remote files are those files that we have transferred to a remote server, specifically to your hosting service's server. An FTP program acts as the portal for pull this off. In order to use an FTP program to transfer your files, you will need the username and password for your site. This is the username and password that you set up with your host. So have them ready.
Setting Up FireFTP
Start by opening the Firefox web browser. Then, under "tools", go ahead and click on "FireFTP". This should open a new tab. Click on this tab, and you will now see FireFTP. In the top left corner of this window is a drop-down menu that, right now, should be blank. Click on the drop-down, and you will see a selection called "Create an account". Go ahead and click on this. Now, you will have a window that asks for a few things:
- Account Name: this is an arbitrary name that you set up simply for your own reference. It is how you will identify your site, once it's set up, in the drop-down menu for FireFTP.
- Category: Like the "Account Name" this is for your own reference, if you choose to use it.
- Host: this is the first important blank. It is referring to the domain name of your site, minus the "www" part. In place of "www", you will put "ftp". So, for example: "www.best-site-ever.com" would become "ftp.best-site-ever.com". Really, pretty simple. You do not need the "http://" or anything else.
- Login: This is whatever username you set up with your hosting service.
- Password: Again, this is whatever password you set up with your host.
Once you have filled in all of this information, you can click "OK" and your set up is complete. You can leave the other tabs in this window alone, as well as the "anonymous" checkbox.
Transferring Files
With your website set up in FireFTP, you should now be able to find it in FireFTP's drop-down menu. Go ahead and select it from there, and then click on "connect" located right next to the drop-down menu. Waiting for the brief connection process, you will know that all is well when your "remote server" files show up in the right hand column. If all you see is a file with a backslash in front of it, then you're still OK. This is called your "root folder." Your root folder is where all of your files will go. So, go ahead and double-click this folder, and you will see everything that's inside of it. It will probably be blank. But if it isn't, then the files inside of it were put there by your host, and these are the files that should never be erased, because they are files that your host needs for your site to work properly. Otherwise, lets start putting your website files in, shall we?
Uploading Your Files
In the left window is a browser which allows you to locate your local files, or the "files on your computer." Go ahead and use this to find your website folder. This would be the folder that you created to store all of your files, as you created your site. Once you have found them, you can begin transferring your files. To do this, highlight the local file that you want to move, and then make sure that the location on the remote server, or the right-side window, has the appropriate folder highlighted. Then, simply click the arrow in the middle pointing "right" or towards the remote location. The file will begin transferring immediately. In fact, you will see information be regurgitated at you in the bottom-most window. I personally prefer to click the "Queue" tab, rather than viewing the "Log" one, because it's simply a more familiar way of viewing what's going on.
Continue this process until all of your files are transferred. Remember to include all of the files that you created including your images and CSS folders. And keep the integrity of your file structure as you set it up within your local website folder—translation: keep everything in the same place when you move them to the server. Otherwise, the file paths that you set for your images and such will be broken, and your site will not show up properly.
Once all of your files are transferred, your website is done! Go ahead and navigate to your web address and check it out. Once files are transferred they should show up almost immediately. If it doesn't wait a few minutes, then try it again (it shouldn't take longer than this for your server to refresh.) It should look just as you envisioned it. If it doesn't, then you will need to do some testing and troubleshooting to fix it. Start by making sure that your file paths are accurate for all of your images including those in your CSS. The most common mistake that I make is changing my CSS paths to absolute paths, so that my stylesheet—located in its own folder—can find the images within the "images" folder outside of the "css" folder.
If it's something else, however, then start asking yourself what would be causing the problem and begin back-tracking through your code until you find the problem. Don't be afraid of tweeking your code, reloading the file, and then testing it again until you find a solution. If all else fails, you can always reload the files. Just make sure that you have a backup copy at all times.
But if everything turned out just fine, then, congrats! You just made your very first website! You should be very proud of yourself. In fact, here's your reward: a gold star!
[Next]
