Javascript required
Skip to content Skip to sidebar Skip to footer
Home / How to Upload a Page to a Website

How to Upload a Page to a Website

How do you upload your files to a spider web server?

This article shows you how to publish your site online using file transfer tools.

Summary

If you take built a simple web page (run across HTML basics for an case), you will probably want to put it online, on a web server. In this article we'll discuss how to do that, using diverse available options such equally SFTP clients, RSync and GitHub.

SFTP

In that location are several SFTP clients out there. Our demo covers FileZilla, since it's free and available for Windows, macOS and Linux. To install FileZilla go to the FileZilla downloads page, click the big Download push button, so install from the installer file in the usual way.

Note: Of class there are lots of other options. Run across Publishing tools for more than information.

Open the FileZilla application; you should see something like this:

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 only opened an business relationship and received this info from them:

Congratulations for opening an business relationship at Case Hosting Provider.

Your account is: demozilla

Your website will be visible at demozilla.examplehostingprovider.net

To publish to this business relationship, please connect through SFTP with the following credentials:

  • SFTP server: sftp://demozilla.examplehostingprovider.cyberspace
  • Username: demozilla
  • Countersign: quickbrownfox
  • Port: 5548
  • To publish on the spider web, put your files into the Public/htdocs directory.

Permit's starting time look at http://demozilla.examplehostingprovider.net/ — equally you can see, so far in that location is nothing in that location:

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

Annotation: Depending on your hosting provider, most of the fourth dimension y'all'll see a page saying something similar "This website is hosted by [Hosting Service]." when you first go to your web address.

To connect your SFTP client to the distant server, follow these steps:

  1. Cull File > Site Manager... from the main carte.
  2. In the Site Manager window, press the New Site button, and then fill in the site proper name as demozilla in the provided space.
  3. Fill in the SFTP server your host provided in the Host: field.
  4. In the Logon Type: driblet downwards, choose Normal, and so make full in your provided username and password in the relevant fields.
  5. Fill up in the correct port and other information.

Your window should wait something similar this:

Now press Connect to connect to the SFTP server.

Note: Brand sure your hosting provider offers SFTP (Secure FTP) connection to your hosting space. FTP is inherently insecure, and you shouldn't utilize it.

Here and there: local and remote view

Once continued, your screen should look something like this (nosotros've connected to an instance of our ain to give you lot an idea):

Allow'due south examine what you're seeing:

  • On the heart left pane, you run across your local files. Navigate into the directory where you store your website (e.1000. mdn).
  • On the heart right pane, you lot run across remote files. We are logged into our distant FTP root (in this instance, users/demozilla)
  • You can ignore the bottom and top panes for now. Respectively, these are a log of messages showing the connexion status between your figurer and the SFTP server, and a live log of every interaction between your SFTP client and the server.

Uploading to the server

Our case host instructions told the states "To publish on the web, put your files into the Public/htdocs directory." Y'all need to navigate to the specified directory in your correct pane. This directory is effectively the root of your website — where your index.html file and other assets will get.

Once you lot've found the right remote directory to put your files in, to upload your files to the server you need to drag-and-drop them from the left pane to the right pane.

Are they really online?

So far, and then good, but are the files really online? You lot can double-check past going dorsum to your website (due east.grand. http://demozilla.examplehostingprovider.net/) in your browser:

Here we go: our website is live!

And our website is alive!

Rsync

Rsync is a local-to-remote file synchronizing tool, which is generally available on nearly Unix-based systems (similar macOS and Linux), but Windows versions exist too.

It is seen as a more avant-garde tool than SFTP, because past default it is used on the command line. A basic control looks like this:

                                  rsync                  [-options]                  SOURCE user@x.x.ten.10:DESTINATION
  • -options is a dash followed past a i or more messages, for case -v for verbose error messages, and -b to make backups. You tin can meet the full list at the rsync homo page (search for "Options summary").
  • SOURCE is the path to the local file or directory that you desire to copy files over from.
  • user@ is the credentials of the user on the remote server you lot want to re-create files over to.
  • ten.x.10.x is the IP address of the remote server.
  • DESTINATION is the path to the location you want to copy your directory or files to on the remote server.

You'd need to get such details from your hosting provider.

For more than data and further examples, see How to Use Rsync to Copy/Sync Files Between Servers.

Of course, information technology is a adept idea to utilize a secure connection, as with FTP. In the case of Rsync, y'all specify SSH details to make the connection over SSH, using the -e option. For example:

                                  rsync                  [-options]                  -due east                  "ssh [SSH DETAILS GO HERE]"                  SOURCE user@x.ten.x.x:DESTINATION

You tin find more details of what is needed at How To Re-create Files With Rsync Over SSH.

Rsync GUI tools

GUI tools are bachelor for Rsync (for those who are not as comfortable with using the command line). Acrosync is one such tool, and it is available for Windows and macOS.

Again, you would take to go the connection credentials from your hosting provider, simply this mode you'd have a GUI to enter them in.

GitHub

Other methods to upload files

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

  • Web interfaces. An HTML interface acting equally front-terminate for a remote file upload service. Provided by your hosting service.
  • WebDAV. An extension of the HTTP protocol to allow more than advanced file direction.

cadellchaved.blogspot.com

Source: https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server