Getting files on servers

The story so far

Browsers get files from servers. You should always make subdomains for different projects, to keep all of their files separate. Each subdomain should have its own web root, that is, its own directory on the server. URLs point to a web root, and directories and files inside them. For example, https://carp.happyfishdreams.com/poetry/dark/fillingthepond.html says:

  • Find the server for the domain happyfishdreams.com.
  • Find the web root for the carp subdomain.
  • From there, go into the poetry directory.
  • Then go into the dark directory.
  • Then find the file fillingthepond.html.

The goal

Suppose you've signed up for hosting, with a domain name you like (i.e., wretchedemus.net). If you haven't done that yet, do it now.

You want to make an app to keep track of wicked fruit. Fruit like Benny Banana, who sells bogus timeshares on Nauru. Create a subdomain called wickedfruit. Make the web root for the subdomain subdomains/wickedfruit.

Creating a subdomain

I'm using the domain kieranmathieson.com. Use your own, of course. happyfishmonger.net, or whatever.

Now make a file somewhere on your PC, Mac, or whatever it is. Maybe put the file in your Documents directory. Call the file bewarebenny.html. Here's what I put in my file:

<h1>Beware Benny!</h1>
<p>Don't trust Benny Banana! He's been caught selling bogus timeshares on Nauru.</p>

Now you want to copy the file, from your computer, to your server.

How to do it? Let's look at two ways.

cPanel's file manager

This is easy, and uses only your web browser. Log in to your hosting account, and start cPanel. Then open the file manager.

File manager

cPanel's file manager works like most others. Your server's directories are on the left. Select one of the directories by clicking on it. The files in the selected directory show on the right. There are toolbars for uploading files, and other tasks.

Select the web root for your subdomain. Click on the wickedfruit directory:

Files

Here are the files in that directory:

Files

Nothing in it, except what cPanel created when it made the subdomain. Ignore them.

Click the upload button.

Upload button

Upload bewarebenny.html. You should see:

Uploaded

Sometimes the file manager gets out of sync with the server. If you don't see what you expect, use the reload button.

Reload

The file's now in the subdomain's web root. So, it should be available on the web. Go to:

http://wickedfruit.YOUR DOMAIN/bewarebenny.html

For me, that's

http://wickedfruit.kieranmathieson.com/bewarebenny.html

Woohoo!

FTP

FTP is another way to get files onto your server. FTP is a protocol, like HTTP.

When you use the web, your PC or Mac runs a client program, your browser. The client uses HTTP to talk to a server.

HTTP client/server

FTP is similar. Your PC or Mac runs a client program. The client uses FTP to talk to a server.

FTP client/server

Your web server also runs FTP software. So it's a web server, and an FTP server.

You need an FTP client. Let's use FileZilla. Install it.

It looks like this:

FTP client

You can copy files from your PC to your server, and from your server to your PC. Drag them from one region to the other.

The connection information tells FileZilla which server to connect to.

Connection information

This can be a bit tricky. The host is your domain, indifferentbats.org or whatever it is. On Reclaim Hosting, the username and password are not the same as your Reclaim login account information. Check out their FTP help page for more.

Replacing files

Here's a screen from FileZilla:

Uploading a file

To upload winner.html, you drag it from the left side to right:

Drag to upload

Since winner.html is already on the server, FileZilla will ask you whether you want to replace it:

Confirm

Now, suppose you edit files directly on the server with FileZilla:

Editing on server

I don't recommend this, unless you just want to change a few characters.

FileZilla will download the file to a temporary directory on your computer, and then open the file in an editor. When you save the file in the editor, it will be the file in the temporary directory on your computer that is saved. FileZilla will then try to upload the file. It will open the confirmation dialog, to be sure that you want to replace the existing file:

Confirm

Trouble is, you might not see that dialog! It could be covered up by the editor. So you think the new file has been uploaded, but it hasn't. You go to a browser, and reload the page, but nothing has changed. You're still getting the old file from the server.

If you use an editor in this way, when you save the file, click over to FileZilla. You'll then see the confirmation dialog.

Tricky, and frustrating.

CoolThing

As well as renting space on a hosting company's server, you can install web server software on your own computer. It will act exactly the same as a remote server, except that the URL will be http://localhost.

Exercise

Exercise: Make a subdomain with a page
Make a subdomain. Use any name you want, like eagle-hopes, middlesloths, or resilient-water. Be sure to map the subdomain to a server directory like subdomain/eagle-hopes, subdomain/middlesloths, or subdomain/resilient-water.

Encrypt the subdomain, if you are using Reclaim Hosting, or another host that has free encryption.

Make an HTML file with a dog joke. You can use the <h1> and <p> tags, like the examples you've seen.

Upload the file to the web root of your domain.

Submit the URL of the file.

(If you were logged in as a student, you could submit an exercise solution, and get some feedback.)

Summary

  • You've made a subdomain on your server. You've uploaded files from your PC to the subdomain.
  • You can use cPanel's file manager.
  • You can use an FTP client.

There are other ways to upload files as well, e.g., with your programming IDE. You can Google those.