Absolute beginner's guide to publishing a website using FTP.
One of the problems with many of the FTP tutorials I've encountered, is the assumption that the reader already knows something about FTP and the directory structure of hosted web accounts. So they leave out some of the basic stuff like how you know what web address to use in the FTP client, and where exactly do you upload your files.
Let me first make it clear, I am not going into how you create all the documents that make up a website. All I'm covering here is the mechanics of actually using FTP to move a web document or program from your desktop computer to your hosted web account where all the world can see it. Consider this the barebones basics of FTP for total noobs. So here goes.
Creating a test file to upload.
First off, we need something to upload that we can then bring up in our browser to see if we were successful in publishing something to our website. So we're going to create a simple text file that we'll treat as our website home page. Open Windows Notepad (click Start, then RUN, then type in notepad and hit enter, or you can usually find notepad listed under Accessories on your Star t> All Programs menu). Type I'm famous, baby! or whatever you want, then click Save > go to whatever directory you want to use for testing > and type in file name index.html
That's it, we now have something that we can actually see in our browser after we publish it to the web. Keep in mind, that this is not a proper html file (it's not even close to a proper html file), but as I already stated, this is not an html tutorial, we just need something to upload to test the ftp transfer. We named the file index.html because when you go to a website the web server will automatically look for a file called index with a file type of html (or htm, or php or some other stuff, but you don't need to know that now. For more info, you can see http://en.wikipedia.org/wiki/Webserver_directory_index ).
Setting up an FTP client.
Update: I no longer recommend using a desktop FTP client like Filezilla. A few years back, I had one of my websites hacked and ended up with a bunch of spammy pages loaded into it. The best I could figure was it was related to using FTP. After I did some research, I found out FTP was not secure, so I stopped using it (actually I temporarily still used it but changed my password after each use. The alternative to using something like Filezilla is a web-based file manager tool provided by your web host. Fortunately most web hosting services provide these now, and generally they are free as part of an overrall control panel. The site I had that got hacked was on a host I had used for 20 years and it only offered a web-based file manager at an additional cost, so I have since changed hosts for that site. to one that doesn't nickel-and-dime you for every additional tool.
Anyway, I recommend only hosting with companies that provide a web-based file manager tool (preferable at no extra charge). Not only is it safer, but it's a lot more convenient to just log into your hosting account and upload files.
I'm leaving the information below on Filezilla (in italics), but I'd suggest you skip it and move on to the next section on directories.
Next we need an FTP client. Many web hosts will include a web-based FTP client as part of a control panel for your website. It may be listed as FTP in your control panel or it may be part of a File Manager program. When you opened your hosting account, your host should have provided information on how you get to your control panel. But, we're going to ignore your control panel for now. Primarily because they all tend to work a little differently, and also because they tend to mask part of the FTP process. So we're going to use a desktop FTP client application. More specifically, we're going to use FileZilla, because it's a Free open-source program that works great and is available for just about any operating system. So go to http://filezilla-project.org and download and install the FileZilla program. If you prefer to use another FTP client, that's fine, it should work similarly.
Now that you have your FTP client installed, open it up and prepare to connect to your website. In the menu bar, there is a place where you need to enter the address of your website. All you need to do here is enter ftp.yoursite.com (where you type the name of your actual site in place of "yoursite.com"). So, in the case of this site (myotherstuff.com), I type in ftp.myotherstuff.com. Then you need your ftp login username and password. When you opened a hosting account with your web host, they should have provided you with your ftp username and password. Note, this may not be the same as the username and password you created when you set up your account with them or the same as the username and password that you use to access your control panel (though it sometimes is). They generally send you this information in an email after you open your account. You may also have the ability to create additional ftp user accounts from your control panel. If so, you can go to your control panel and just create a new ftp account and password.
Once you enter your web address, username, and password, hit ENTER or click the [Quickconnect] button on the toolbar. If your connection is successful, your screen should look something like the image below (though not exactly). If your connection was unsuccessful, you will probably see an error. The most likely problem would be that you mistyped your ftp web address or you have entered the wrong username or password.
In FileZilla, you have several panes of information. The pane on the top is your connection information (not particularly important unless you get an error). The two panes on the left side represent the files on your computer. The pane on the right side represents the directory structure and files on your hosting account.
Finding the directory to upload your file.
This is where it gets just a little bit confusing since every web host seems to have their own way of setting up the directory structure for their accounts. The basic idea is that there is a specific directory (folder) that represents the root directory of your web site (not necessarily the root directory of your account). As I said, this will vary from host to host, but there is sort of a pattern. I happen to have sites hosted with several hosts, so here are some examples. On my Godaddy account, the website root directory is actually the root directory of my ftp account. In other words, once you log into your ftp account, you will already be in the root directory of your website, so you can just upload your files there. However, most hosting accounts (in my experience) will bring you to a level above your website root directory. In these cases, you need to find the root directory of your site. Here are some examples of the directories on my other hosts that represent the root of my site.
- public_html
- www
- Httpdocs
- htdocs
As you can see, the directory names vary from host to host, but I think public_html is the more common one. In addition to your site's root directory you will also see a variety of other directories like cgi-bin, ftpdocs, error_docs, anonftp, webstats, mail, that are used for various other purposes related to your hosting account. If you are not sure which directory is the root for your site, you will generally find that your host already included an index.html (or index.htm, or welcome.html) file in it, so just open each directory to see if it has an index.html file in it. Double-clicking on the directory will open it to view the contents (don't double-click on any files though). To go back up to the next higher level directory, click the folder at the top of the list (the one with the two dots . . next to it).
Once you're in your site's root directory, if it already has an index.html , you should rename it otherwise you will overwrite it with your test file.Right-click on the file, then click [Rename] , and change the name to something like indexold.html. This way you can change it back later to restore your site back to the way it was before we started playing around with it.
Uploading your files.
Most of these file managers these days will have an upload button on the menu bar where after clicking on it you can find the file on your computer you want to upload. Some of them just let you drag and drop the file(s) from you desktop file explorer directly to the web-based file manager.
That's all there is to it. Recheck your site's root directory to make sure the file ended up where you wanted it to, then go to your browser and enter in your website's URL, and you should see I'm famous, baby! (or whatever you typed in the test file).
A Note on File Caching.
Some hosts have built in file caching, and it's often turned on by default. This can be a royal pain in the ass when you're setting up your site and testing things. For example, when you check you site after uploading your new index.html file, you may see whatever was in the old file provided by your web host. You can typically turn file caching off in your control panel and clear the contents. This is recommended until you have your site up and running, then you can turn it back on. File caching makes the site faster, especially with database-driven websites. Remember, most browsers also cache pages, so you may need to clear that cache as well when testing.
