MyOtherStuff

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.

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 through FileZilla, 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. 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. In FileZilla, 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. In FileZilla, 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 file.

In the left pane, you need to navigate to the directory on your computer where you saved the index.html file you created earlier.  Now you can just click on the index.html file in the left pane and drag-and-drop it to the proper location in the right pane.

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).