Apache2 Web Deployment Tutorial #9: Upload Website Files to Server

In the previous article, we discussed how to enable and disable essential Apache2 modules to ensure the server correctly handles various types of requests. In this article, we focus on uploading website files to the server—an essential step in the entire deployment process. Without properly uploading your files, your website will not function as expected.

Preparing for Upload

Before uploading your website files, ensure that you have already built your site locally and are familiar with the structure of the files and folders you intend to upload. A typical static HTML website might have the following directory layout:

/my-website
│
├── index.html
├── css
│   └── styles.css
└── js
    └── scripts.js

You may optionally use development tools (e.g., Webpack, Gulp) to build your project before uploading.

Choosing an Upload Method

Several methods exist for uploading website files to your server. Below, we outline three common approaches:

1. Using FTP/SFTP Clients

FTP (File Transfer Protocol) or SFTP (Secure File Transfer Protocol) is a widely used method for transferring files to servers. Popular FTP/SFTP clients include:

• FileZilla — An open-source, cross-platform FTP/SFTP client.
• WinSCP — An SFTP client for Windows.
• Cyberduck — An FTP/SFTP client available for macOS and Windows.

As an example, here’s how to upload using FileZilla:

1. Download and install FileZilla.
2. Launch FileZilla, and locate the connection fields at the top of the interface.
3. Enter your server’s IP address or domain name (e.g., ftp://example.com) in the Host field.
4. Provide your server’s FTP username and password in the respective fields.
5. Click Quickconnect. Once connected, navigate in the right-hand panel to your target server directory—typically /var/www/html.
6. Drag and drop the contents of your local my-website folder (left-hand panel) into the target directory (right-hand panel) to complete the upload.

2. Using Command-Line Tools

If you’re comfortable with the terminal, you can use the scp command over SSH to transfer files securely from your local machine to the remote server—provided SSH access has already been configured and tested.

scp -r /path/to/my-website username@server_ip:/var/www/html

• -r: Recursively copies the entire directory.
• /path/to/my-website: The local path to your website files.
• username@server_ip: Your remote server’s SSH username and IP address.
• /var/www/html: The destination directory on the server.

After running the command, you’ll be prompted to enter the remote server’s password. Upon successful authentication, the file transfer begins automatically.

3. Using Version Control Systems

If your website code resides in a Git (or other VCS) repository, you can directly clone or pull it onto the server. For instance, if your site is hosted on GitHub, run the following commands on the server:

cd /var/www/html
git clone https://github.com/username/my-website.git .

This pulls your repository contents directly into /var/www/html.

Verifying the Upload

After uploading, verify that files and directories appear exactly as expected. You can inspect the remote filesystem using either SSH (ls, tree, etc.) or your FTP/SFTP client.

Example

Suppose you’ve uploaded your website folder and now list the contents of /var/www/html:

$ ls -l /var/www/html
total 8
-rw-r--r-- 1 user user  1234 Oct 10 12:00 index.html
drwxr-xr-x 2 user user  4096 Oct 10 12:00 css
drwxr-xr-x 2 user user  4096 Oct 10 12:00 js

In this output, index.html, along with the css and js subdirectories, are confirmed present and correctly placed.

Summary

In this article, we covered three practical methods for uploading website files to an Apache2 server: via FTP/SFTP clients, command-line tools (scp), and version control systems (e.g., Git). After uploading, always double-check that file structure and content match your expectations.

In the next article, we’ll discuss configuring file permissions and ownership—critical steps to ensure your website runs securely and reliably.

Before proceeding, be sure to review and back up your uploaded files to prevent unintended issues during subsequent configuration steps.