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
.
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.
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:
Here are the files in that directory:
Nothing in it, except what cPanel created when it made the subdomain. Ignore them.
Click the upload button.
Upload bewarebenny.html
. You should see:
Sometimes the file manager gets out of sync with the server. If you don't see what you expect, use the reload button.
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.
FTP is similar. Your PC or Mac runs a client program. The client uses FTP to talk to a 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:
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.
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:
To upload winner.html
, you drag it from the left side to right:
Since winner.html
is already on the server, FileZilla will ask you whether you want to replace it:
Now, suppose you edit files directly on the server with FileZilla:
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:
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
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.