FTP Tutorial | Upload Webpages with File Transfer Protocol

Understanding FTP

File Transfer Protocol (FTP) is a network protocol used to transfer files between computers, commonly allowing website files to be uploaded from a local computer to a web server.

When creating a website, you usually work with HTML, CSS, images, and other files on your computer before publishing them online. An FTP client or another secure file-transfer method can connect to your web hosting account so you can upload those files to the server where visitors can access them.

Why Use FTP?

HTML files created on your computer are considered local files. Other people normally cannot access those files through the web until they are placed on a web server that is configured to make them available online.

FTP and related file-transfer technologies provide a way to move website files between your computer and a web server. They can also be used to download files from the server, create directories, rename files, and perform other basic file-management tasks.

A typical website publishing process might look like this:

Create or edit the website files on your computer.
Test the webpages locally in a web browser.
Connect to the web server using an FTP client or another publishing method.
Upload the files to the appropriate website directory.
Open the website in a browser and verify that everything works correctly.

This allows you to develop and test files locally before making them available to visitors.

FTP Clients

An FTP client is software that provides an interface for connecting to a server and transferring files. Many FTP clients display files on your local computer and files on the remote server side by side, making it easier to move files between them.

Some code editors and web development applications also include built-in file-transfer features, allowing website files to be uploaded without opening a separate FTP program.

Regardless of the software you use, the basic purpose is the same: connect to the server, locate the correct directories, and transfer files between the local and remote locations.

FTP Connection Information

Before connecting to a web server, you need connection information provided by your web hosting company or server administrator. The exact settings depend on the hosting service and the type of connection being used.

Common connection information includes:

Host - the hostname or server address.
Username - the account name used to access the server.
Password - the password associated with the account.
Port - the network port used by the selected transfer protocol.
Protocol - such as FTP, FTPS, or SFTP.

Your hosting provider may also supply a starting directory or other settings required to reach your website files.

Passwords and other login credentials should be kept private and should never be placed inside publicly accessible HTML files.

Local & Remote Files

When working with an FTP client, you will often see the terms local and remote. Understanding the difference is important when uploading or downloading website files.

Local files are files stored on your computer.
Remote files are files stored on the web server.

Uploading transfers a file from the local computer to the remote server, while downloading transfers a file from the remote server to the local computer.

Local Computer                     Web Server

index.html       ─── upload ───▶   index.html

index.html       ◀── download ──   index.html

Before transferring a file, make sure you know which version is newer. Uploading an older local file over a newer server file can accidentally replace recent changes.

Files, Directories & the Website Root

Before uploading a website, it is important to understand how files and directories are organized. A directory is a location used to organize files and other directories. The term folder is commonly used to describe the same thing, so you will often see the words folder and directory used interchangeably.

A file is an individual item stored within a directory. Website files can include HTML documents, CSS stylesheets, JavaScript files, images, PDFs, and many other types of resources.

Understanding the Website Root

The website root, also called the document root, is the top-level directory from which a web server makes files available for a website. Files and directories placed directly inside the document root are at the first level of the website.

On many web hosting accounts, the document root is named public_html, although other servers may use names such as www, htdocs, or a directory specifically assigned to the domain.

A simple website might have the following hierarchy:

public_html/                         ← website root
│
├── index.html                       ← first-level file
├── about.html                       ← first-level file
├── contact.html                     ← first-level file
│
├── css/                             ← first-level directory
│   └── style.css                    ← file inside css
│
├── images/                          ← first-level directory
│   ├── logo.png                     ← file inside images
│   └── photo.jpg                    ← file inside images
│
└── tutorials/                       ← first-level directory
    ├── index.html                   ← file inside tutorials
    └── html-basics.html             ← file inside tutorials

In this example, public_html is the website root. The files index.html, about.html, and contact.html are stored directly in the root, while css, images, and tutorials are directories located at the first level of the website.

The Default Index File

Web servers are commonly configured to look for a default document when a visitor requests a directory without specifying a filename. A common default document is index.html, although servers can also be configured to use files such as index.htm or index.php.

For example, if index.html is the default document for the website root, these addresses can display the same page:

https://www.example-web.site/

https://www.example-web.site/index.html

The first address does not mean that the webpage has no filename. The browser requests the website root, and the web server can automatically serve its configured default document, such as index.html.

The same idea can apply to directories within the website. If the tutorials directory contains its own index.html file, the server may allow:

https://www.example-web.site/tutorials/

https://www.example-web.site/tutorials/index.html

Understanding the document root and directory hierarchy becomes especially important when creating links, referencing images and stylesheets, and deciding where files should be uploaded on the web server.

Uploading Website Files

After connecting to the server, locate the website's document root or the directory where the files belong. You can then transfer the appropriate files from your local website folder to the corresponding location on the server.

Maintaining the same directory structure on the server is important because HTML documents may contain links and references to other files.

For example:

<link rel="stylesheet" href="css/style.css">

<img src="images/logo.png" alt="Example Web logo">

If the css or images directories are missing, renamed, or uploaded to the wrong location, the browser may not be able to find those resources.

After uploading your files, open the website using its web address and test the pages, links, images, stylesheets, and other resources to make sure they were transferred to the correct locations.

FTP, FTPS & SFTP

Although the term FTP is often used generally when discussing website file transfers, several different protocols can be used to transfer files to and from a server.

FTP

Traditional FTP transfers data without the encryption provided by modern secure transfer methods. Because usernames, passwords, and transferred data can be exposed on an unprotected connection, plain FTP should generally be avoided when a secure alternative is available.

FTPS

FTPS adds TLS security to FTP, allowing the connection and transferred information to be protected with encryption.

SFTP

SFTP, or SSH File Transfer Protocol, provides file transfer over an SSH connection. Despite its similar name, SFTP is a different protocol from FTP.

When your hosting provider supports SFTP or another secure transfer method, use the secure option rather than an unencrypted FTP connection.

FTP Best Practices

Careful file management can prevent many common problems when publishing and maintaining a website.

Use SFTP, FTPS, or another secure transfer method when supported.
Keep server usernames and passwords private.
Verify the remote directory before uploading files.
Keep backup copies of important website files.
Maintain a consistent directory structure locally and remotely.
Be careful when overwriting existing server files.
Use consistent file and directory names, including capitalization.
Test the website after uploading changes.

A well-organized local copy of your website also makes publishing easier because the local and remote directory structures can closely match one another.

Summary

FTP and related file-transfer technologies allow website files to be transferred between a local computer and a web server. An FTP client can be used to connect to a hosting account, navigate local and remote directories, and upload or download HTML, CSS, images, and other website resources.

When publishing a website, make sure files are uploaded to the correct document root, preserve the required directory structure, protect your login credentials, and use a secure transfer method such as SFTP or FTPS when available.