How do you upload files to a web server?

This article shows how to publish your site online with FTP tools.

Prerequisites:	You must know what a web server is and how domain names work. You must also know how to set up a basic environment and how to write a simple webpage.
Objective:	Learn how to push files to a server using FTP.

Summary

Now that you have built a simple page, you will want to put it online on some web server. We'll discuss how to do that using FTP.

Active Learning

There is no active learning available yet. Please, consider contributing.

Dig deeper

Getting to grips with an FTP client: FireFTP

There are several FTP clients out there. Our demo covers FireFTP, since it's quite easy to set up in Firefox. If you use Firefox, just go to FireFTP's addons page and install FireFTP.

Of course there are lots of other options. See Publishing tools: FTP clients for more information.

Open FireFTP in a new tab. Two ways to do so in Firefox:

Firefox menu ➤ ➤ FireFTP
Tools ➤ Web Developer ➤ FireFTP

Now you should see something like this:

FireFTP : the interface, not connected to a server

Logging in

For this example, we'll suppose that our hosting provider (the service that will host our HTTP web server) is a fictitious company "Example Hosting Provider" whose URLs look like this: mypersonalwebsite.examplehostingprovider.net.

We have just opened an account and received this info from them:

Congratulations for opening an account at Example Hosting Provider.

Your account is: demozilla

Your website will be visible at demozilla.examplehostingprovider.net

To publish to this account, please connect through FTP with the following credentials:

FTP server: ftp://demozilla.examplehostingprovider.net

User: demozilla

Password: quickbrownfox

To publish on the web, put your files into the Public/htdocs directory.

Let's first look at http://demozilla.examplehostingprovider.net/ — as you can see, so far there is nothing there:

Our demozilla personal website, seen in a browser: it's empty

Note: Depending on your hosting provider, most of the time you'll see a page saying something like “This website is hosted by [Hosting Service].”

To connect your FTP client to the distant server, press the "Create an account..." button and fill in the fields with the information furnished by the hosting provider:

FireFTP: creating an account

Here and there: local and remote view

Let's now connect with this newly-created account:

The FTP interface, once logged

Let's examine what you're seeing:

On the left, you see your local files. Navigate into the directory where you store your website (in this case, mdn).
On the right, you see remote files. We are logged into our distant FTP root (in this case, users/demozilla)
You can ignore the bottom zone for now. It's a live log of every interaction between your FTP client and the server.

Uploading to the server

As you remember, our hosting provider told us that our files have to be stored in the Public/htdocs directory, so navigate there in your right pane:

Changing to the htdocs folder on the remote server

Now, to upload your files to the server, drag-and-drop them from the left pane to the right pane:

The files show in the remote view: they have been pushed to the server

Are they really online?

So far, so good, but double-check by going to http://demozilla.examplehostingprovider.net/ in your browser:

Here we go: our website is live!

And voilà! Our website is live!

Other methods to upload files

The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:

Web interfaces. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.
GitHub (advanced). Upload through git with a combination of commit/push methods. See our Publishing your website articles from our Getting started with the Web guide.
Rsync (advanced). A local-to-remote file synchronizing system.
WebDAV. An extension of the HTTP protocol to allow more advance file management.

Next steps

Well done, you're almost finished. The last important task is to make sure your web site is working properly.