ButlerCC Webhosting

FileZilla is a free, open source, cross-platform FTP client that provides easy and intuitive access to FTP servers. Download FileZilla and install the appropriate version for your operating system. Windows users should select the appropriate .exe file for your platform. If you're using a portable drive on a Windows system, download FileZilla Portable and run the .paf.exe file to install to your portable drive.

Note: If you didn't use the download link above, and ended up on the page shown below, please do not click the big green Download Now button. The installer contains bundled programs you do not want and are not required to install. If you choose to proceed with this installer, please read carefully during installation so you can omit installing unnecessary bloatware.

After you have completed the FileZilla installation, you are almost ready to upload files to the server. But first, you will need to know your web account credentials. ButlerCC Web Dev students shoud check the posted Web Account Information for the class and write down the following three pieces of information:

• Subdomain (similar to this: jdoe.butlerccwebdev.net -- most subdomains are your first initial and last name)
• Account username (usernames require the first 8 characters be unique, so yours may differ from your subdomain)
• Account password (this is the password you chose in your cPanel)

While these instructions are provided for Butlercc Webhosting accounts, the process is similar for many other webhosts and can be easily adapted for use with other webhosting accounts. However, you will need to register a domain name and purchase a Web hosting account before you can use FileZilla to upload files.

To setup an FTP connection

You will only need to setup your connection one time. FileZilla retains connection settings until you choose to delete them.

1. Open Filezilla and choose File > Site Manager.
2. Click New Site button and enter a name for the connection (can be anything that uniquely describes this connection).
3. On the General tab, choose the same pull down menu options shown in the screen shot below, and enter your web account credentials. Check the posted Web Account Information for your class and make sure you have written down your subdomain URL, username and password.
   
   1. Host box: Enter yoursubdomain.butlerccwebdev.net (something like jdoe.butlerccwebdev.net -- most subdomains are your first initial and last name).
   2. User box: Enter your account username (the same one you use to login to your cPanel).
   3. Password box: Enter your password (the one you previously chose in your cPanel).
   4. Encryption box: Use explicit FTP over TLS if available - Note: In Butler labs, select Only use plain FTP
4. Select the Advanced tab, and enter /public_html in the Default remote directory box.
   If you omit this step, FileZilla will connect to the home directory much higher up in the directory structure. This increases the chance that files may be uploaded outside the public_html directory where they will not be accessible to your users.
   
5. For the Default Local Directory, you normally want to set this path to the folder you are working out of. ID 124 HTML and CSS students, will point it to the site folder. Click Browse and select the site folder on your hard drive, portable drive, or cloud storage. You can omit this step, but you will have to manually select the folder you are working out of each time you upload files in the future.
6. To save and test your connection, click Connect button. (The OK button saves the connection but does not attempt to connect.)
7. If all your account information was entered correctly, Filezilla will now connect to the public_html directory of your account on the remote Web server. If you get an "Unknown Certificate" message just click the box "Always trust this certificate in future sessions" and hit Ok.

To upload files to your web server

1. If already connected to the web server, proceed to step 2. Otherwise, choose File > Site Manager (or click Open the Site Manager button on the toolbar), select your connection and click Connect.
2. Notice that FileZilla displays your local computer in the Local site pane on the left, and your web server in the Remote site pane on the right. When you connect to a site, it will open the folder you pointed it to in the advanced settings. If you don't set a folder, it will leave it open to the last local folder you opened. If you are in ID 124 and followed the setup instructions, FileZilla should have selected the site folder (root folder for this site) on your computer in the Local site pane, and the public_html directory on the web server in the Remote site pane. Any existing files and directories are listed in the boxes below.
   
3. If you omitted steps 4 and 5 earlier, manually select the folder you are working out of (the root folder for the site) in the Local site pane (left). Then manually select the public_html directory in the Remote site pane (right).
4. There will be a cgi-bin directory in the Remote site pane. Do not delete this directory or upload any files to this directory. It contains hidden files you will need later on.
5. If you have a .htaccess file in the Remote site pane, do not delete or move this file. It is an Apache configuration file for your server.
6. In the Local site pane, select the files you want to upload. If you are setting up your site for the first time, select your index.html. Hint! Press CTRL + click each file/folder you want to upload.
7. Drag the selected files/folders to the remote site pane and drop in the public_html directory. Alternatively, you can right-click on a selection and choose Upload from the shortcut menu. Make sure you drag your files into an empty part of the pane. If you drag them over one of the folders, it will upload your files to that folder and not public_html.
8. Wait while Filezilla copies the selected files to the Web server. When the process is finished, you should see the files/directories listed in the public_html folder. Click Disconnect to indicate you are finished.

Open your home page in a browser

1. In a browser, enter your subdomain URL in the Address bar (something like http://jdoe.butlerccwebdev.net/)
2. The remote Web server should return the index.html file, which should be your portfolio page.
3. Bookmark the URL to make it easier to return later.
4. Whenever you add new files, test them on your live site. Do this even if they seemed to work on your local machine.
5. If you have uploaded new files and nothing seems to have updated, do a hard refresh (ctrl/cmd+F5) on the page. Sometimes the browser will save files in the cache so the page loads faster. A hard refresh forces the browser to make a new request to the server.
6. If a hard refresh doesn't solve the issue, look at the last modified date on the file in the remote pane. Verify that you uploaded your files to the correct place. If errors are still occurring, open the afflicted files in your editor and make any needed corrections. If it is your links not working, make sure you typed the file paths extactly as the file names are written. A server is case sensitive. So if you wrote the file path as fileName.html but the file is called filename.html, then your link will work on your local computer but won't work when you upload it.
7. Whenever you need to update your site, upload only the updated files to your web server. When prompted, choose to overwrite the existing files on the server. Note: It is not necessary to upload files again that were not modified. You may need to open a lower directory in both panes to upload a single updated file. (See screen shot below)
   

That's it--you now have an official web site!