Before we dive deep into the fun stuff (making websites), it’s important we understand a few key concepts. By the end of this lesson, you will be familiar with servers and uploading to the server.
Saving things “locally” versus on the server
When you save files, images, etc. on your computer or to your Dropbox account, you are the only one who has access to those files. You must be able to log in to that particular computer or Dropbox account to access those files.
In your personal life, when you shared files with your friends and family, you probably created a shared link in your Google Drive, sent them an email attachment, or Air Drop’ed them a file. For websites, the file sharing process works a little differently.
Throughout the course of the semester, you will be creating web pages. The only way you can share these files (files here referring to webpages, which are just fancy files) is to upload them to a server.
When you save a file on your computer, you’re basically saving it locally—think about putting a leftover slice of Automatic pizza in your personal fridge at home. Can you access that leftover pizza from your friend’s fridge in her apartment on the other side of town? Nope. Now, if you uploaded that (hypothetical) pizza to the server, you could access it wherever you wanted.
What’s a server?
A server is a computer designed to store web files. Servers are computers, but they’re huge, high-powered computing machines; think of the server as the mitochondria of computers (in other words, the powerhouse of computers). This isn’t your grandma’s Macbook.
The server—this massive, behemoth computer machine—doesn’t just store files. It pushes and pulls data from the Internet. When we type in a URL, such as https://www.uga.edu/, the server looks for that particular file (because webpages are just fancy files!) and pushes it back to us.
Your desktop is to you, as the server is to your website. If you’re the only one that needs to see cutedog392084.jpg, you keep that file on your computer. If you need the world to see cutedog392084.jpg, you upload it to the server.
Also, if you’d like to pass this class, for your teacher to grade your work, it must be on the server. I will not grade email attachments. To turn in your work, you’ll be putting it on your website.
How do I put files on the server?
That’s a good question! That’s where our FTP (File Transfer Protocol) client comes in handy. With an FTP client (in our case, we’re using one called Cyberduck, although there are hundreds) we can log in to the server that houses our website. We can exchange files and organize the file structure. The FTP client gives us a window into the server. It’s basically the way we upload and save files to our websites. Once a file is on the server, you can access it online.
Take note: once a file is in the server, and you make a change to that file, you have to save it back to the server.
In other words, an FTP client (again, Cyberduck), is the application we use to access the server. We log in with a certain set of credentials, and we’re able to see all the files saved on the server. It is our window to the server. Repeat: the FTP client is our window to the server.
The server is the file structure of our websites. The FTP client (Cyberduck) is how we access and organize those file structures.
When you’re told to upload a file called index.html to your website, that means you need to drag index.html from your Dropbox (assuming you are saving it there) into your server. How? Through the FTP client (Cyberduck).
If you’re told “FTP it” that means the same thing as uploading; put it on your website. Which means—put it on the server. Which means—open Cyberduck, and drag that file into the server.
How to upload
- Save your file to your flash drive.
- Drag the file from your flash drive to Cyberduck
- Double-check you saved it in the right location—is it in the folder it should be in?
- Navigate to your website. Can you access that file? If not, you probably FTP’d it in the wrong place. Repeat Step
Troubleshooting
If you’ve tried uploading your files to your server but it isn’t working there are several common mistakes that might be giving you trouble.
- Make sure you are looking for your file in the right place! For example, if you want to see if project one uploaded successfully you’ll want to make sure that you’re typing in the correct URL:
yoursite.com/webdev/project-one
- Caching! Try a hard reload to see if you’re having a caching problem. Check out this caching lesson for instructions.
- File path errors can cause a lot of trouble. Double-check that your file paths in Dropbox and on the server are identical. Also, make sure your home pages are named index.html. Need a refresher: check out this lesson on homepages and the course file structure.
- Still not working? Make sure that your files and folders are named consistently and following best practices. A small mistake with capitalization or spacing can lead to a lot of frustration. Check out this lesson on file and folder names and double-check your work carefully.
- If, after trying all of the above tips, you are still having a problem it’s time to call in reinforcements. Check out this resource for the most efficient ways to ask for help.
Resources:
Read more on FTP’ing: this article by Wired.