how to play with your website :: FTP demystified

Code for Crafters, Resources, Wordpress

After a short search, I am flabbergasted to find not a single easy-to-understand explanation of FTP – file transfer protocol. Now you might say, “Maybe that’s cause it’s not easy.” But I beg to differ.

Understanding and using FTP for basic tasks when maintaining and organizing your website is essential. And it’s pretty darn simple.

Why should I learn this FTP nonsense? Working with your site via FTP gives you direct access to what’s under the hood. You can keep your files neatly organized, make quick changes, overwrite existing files so you don’t need to change code, etc… Once you start to understand how FTP & your website works, you have the basic knowledge needed to take things to the next step.

And you can impress all your friends.

How Your Website Works

At the heart of every website is it’s files. While on your browser’s surface, you may jump from page to page, seeing text & images combine seamlessly, underneath everything it’s just a jumble of files. Using HTML, CSS, PHP and all sorts of other crazy letter combinations, these files talk to one another. They figure out amongst themselves how to render into a web page and appear as a cohesive unit.

But just below the surface, you can see these files at work. For instance, right click (or command + click for Macs) on my banner at the top of this page and click “view image.” You’ll see that that image – and that image alone – appears in your browser. You may also notice that the URL in your browser has changed to the specific URL for that image. It’s just a file in a folder in my website. So how did that image get there? How did it get its own URL? How does it get accessed by the other files?

Understanding how these files are organized can be understood by checking out the file manager of your own computer (image above). First, you’ve got a hard drive, then inside your hard drive there are many folders to organize parts of your machine at a very high level, inside those folders are more folders, and inside those folders are files, programs, and applications. At each level, the organization becomes more precise.

Your website’s file organization works exactly the same way. There are top level folders (or directories), then folders inside those folders, and then images & files of all different types within those. Wanna see?

Each file & folder corresponds to a unique url. Everytime you see a “/example/” you can rest assured that “example” is a folder.

http://exampledomain.com/folder/folder/file.html

Accessing those bad boys.

Feel better? I hope so. So how do all those files & folders get there?

First, let’s get connected to your web host‘s server using a FTP client. As I said in my tutorial on backing up your WordPress website, I use Fetch (exclusively for Mac) but there are plenty of other great free or low cost apps out there.

You’ll need some information from your web host: the host name you’re connecting to, the username you need to access it, and your password. Sometimes, this is as simple as your domain name & the information you use to log into your web host with. Other times, it’s a bit more complicated. Your web host should have this information easily available for you – just search for information on how to connect via FTP (example images below).

Back to those pesky files & folders and how they got there.

If you’re using a piece of software like WordPress (don’t forget to get on the list for the early scoop on my Website Kick Start ecourse!), those files & folders are created when you install the software to your web host’s server. If you’re using an application like Dreamweaver to build your website, then the application actually connects with your web host’s server using FTP to upload the appropriate files & folders that you’re creating visually. Either way, you don’t have to stop there.

When I’m creating a website using WordPress, I let WP do its thang creating the core files & folders. Then I create extra folders to store my auxiliary files (images, downloads, etc…) to keep my site neat & tidy – to the surprise of my husband. It goes a little something like this:

• To create a folder, hit “New Folder” – most likely a large button on the main screen of your FTP client.
• To add a file to that folder, simply click on the folder to open it (as you would on your computer’s file manager).
• Then hit “Put” or “Upload” to open your local file manager to select the file. Select your file from your hard drive and save it to the site.
• You can now access that file at it’s unique URL or call it your code.

Some Cautions

Working with your site using FTP is quite a blessing. You can do all sorts of things (like moving your entire website) very very quickly. It’s great for keeping things organized and easy to access.

But it’s also just a little dangerous. You are working with the actual files on your actual site. If you delete one, it’s gone. If you upload a file with the same file name as one on your site, you overwrite it (this is actually handy most of the time!). If you drag & drop something into a different part of the site, its location changes.

When working with your site using FTP, be mindful of what you’re doing. Double-check your work as you go. Always be aware of what folder you’re in and what files you’re working with.

And always, back up your site.

If you find this nifty little piece of tech helpful, don’t forget to sign up to get the first notice of my Website Kick Start ecourse. We’ll be building a WordPress website from start to finish, learning how to import your existing content, and filling in informational pages. You’ll also learn my tips & tricks for styling your site & improving your conversions. It’s likely to sell out (I can only take so many students!) and you’ll get a pretty great discount for being the first to know, too!