Setup Local File System and Configure FileZilla
Hi and welcome to the second part of Lesson 4 of the Start Building Your Website Here Tutorial Series. In this part of the lesson, we will create a local file structure and we’ll configure FileZilla to connect to your web server. The first part of this is to create a local file structure that mimics the structure of your website. This is Rick’s personal philosophy on how to organize a file system. This system is easy to coordinate with the files on your webserver, easy to keep track of and easy to back up. While there are other ways you could do this, Rick’s system is a good place to start.
We’ll start by creating the local file system. Let’s go ahead and open up “Windows Explorer” and go to (name of folder). Here we’ll create a folder called “My Business Website”. Right click, select “new folder” and type in “My Business Website”. Inside of the My Business Website folder, we’ll create 3 more folders.
The first folder will hold all of our graphics. (Name the folder “Graphics”). The second folder will handle our text (Name the folder “Text”). The third folder will handle our WordPress stuff. (Name the folder “WordPress”). In the WordPress folder, we’ll create two more folders. The first one is “wp-content”. This needs to be spelled EXACTLY the same as the wp-content folder on your webserver. Thus it should be all lower case letters and should include a hyphen.
The second folder, we’ll name “Downloads”. In our new wp-content folder, we’ll create two more folders. We’ll create a folder called “themes”, and then another folder called “plugins”. Again, both of these folders MUST be spelled exactly the same as their corresponding folders on your web server. They need to be ALL lower case letters because the synchronization won’t work if the names aren’t exactly the same.
This should look familiar to you because you will have seen these folders, wp-content, plugins and themes, as part of the file structure of your WordPress installation in the earlier tutorial. This is the part of your local file structure that we’ll be synchronizing with your website. Now that the folders are created on your computer we need to connect them to the folders on your webserver. To do that we need to get some information from HostGator.
Let’s go over to HostGator. So here we are at our Control Panel and we will scroll down to the files section and under files, we will select FTP accounts. We’re not going to create a new FTP account, we’ll simply scroll down here and choose from these existing FTP accounts. Select the main account which gives you access to the root directory and the select “configure FTP client”. Here, under manual settings is the information we need in order to setup FileZilla to connect to HostGator. Let’s open FileZilla now by double clicking on this icon. Next we go to “File”, and select “Site Manager” . Here at the Site Manager we’ll select “New Site”. We’ll name this new site “tailor”.
In the “General Tab” the first field to fill out is “Host”. We’ll get this information from HostGator. So we switch back to HostGator. In the “host” field we will enter the FTP server. FTP Server” is a synonym for “Host” in FileZilla. So we”ll select this and Ctrl C to copy, go back to FileZilla. For “Port” let’s Go back to Hostgator and look at the FTP server port which is “21” . You don’t need to do anything with “Protocol” or “Encryption” but under “Logon Type” select “Normal”. For “User” We’ll go back to HostGator and grab the FTP username. Ctrl C. Select the User and, Ctrl V to paste. For “Password” use the same password that you use to login to HostGator and hit ok and connect.
And now we will connect to our server by going to the drop down arrow right beside the site manager icon and then select “tailor”. You can see that there is a lot of activity at the top part of the screen, it just tells you everything that’s happening. It ends up by saying that “Directory listing successful”. On the left hand side of the Filezilla window is your local computer. Filezilla refers to it as your “Local Site, it is also referred to as your local machine. These are the files and folders that Filezilla sees on the computer in front of you.
On the right had side is your webserver on HostGator. Filezilla refers to this as your “Remote Site”. You’ll also hear it referred to as your “remote server” and your “host”. Here are all the files and folders that Filezilla can see at HostGator. It’s important to understand the difference so if you have trouble remembering think of “Left for Local and Right for Remote”. Right now on your remote site you can see all of the contents of your “root directory”. You can probably remember that WordPress is installed in the public_html folder. If we double click on the public_html folder it opens up and you can see the wp-admin, wp-content and wp-includes folders that we looked at before. In fact, you can also see all of the other additional files that are included with WordPress. These are all of the files that are currently loaded on your domain.
That brings us to the end of Part 2 of this Lesson. In Part 3, we will download files from your remote server to your local machine.