Introduction
When beginning web development you will learn how to code up a website with HTML, CSS, JavaScript and possibly a backend programming language such as PHP locally on your PC. You will get to a point where you want to put a website you worked on online so it's available on the internet for everyone to see. This guide will show you multiple ways on how you can transfer your website files to a web server.
FTP Client
If you are relatively new to working with web servers then to begin with the best option for you to transfer a website is to use an FTP client. An FTP client will allow you to move your website files to any file location in the web server.
FTP stands for File Transfer Protocol which is used to upload, download and manage files between the web server and your local PC.
Filezilla
Filezilla is a popular FTP client application which happens to be a free and open-source application. It's available for Microsoft Windows, MacOS and Linux operating systems.
Installation
Go to the download page and click the Download Filezilla Client button.
You may get a pop-up showing the different versions of Filezilla.
Select the Filezilla option and click the Download button, ignore Filezilla Pro as that's the paid version and you don't need it for general FTP operations.
After downloading the installer file open the installer to begin the installation. Once the setup window has shown up then accept the License Agreement in the first step and click the I Agree button.
Decline the optional offer to have the anti-malware software installed.
Select whether you want every PC user to have access to Filezilla or only yourself.
The default options can be left as is if you want, click the Next button to continue.
Customize the install directory if you want and press the Next button.
Leave the Start menu name and click the Install button to start the installation.
Connecting to a web server
When opening Filezilla for the first time you will only have access to files on your local PC as shown below in the left side panel of the Filezilla window. The right side panel is used to show files and folders of the web server you connect to.
Click on File in the top menu and then select the Site Manager... option in the drop-down menu.
The Site Manager is where you set up the connection details for web servers.
Click the New site button, and a server icon will be added below the My Sites folder. Give it a name to represent the web server you want to connect to and press the Enter key to apply the new name.
On the right-hand side under the General tab is where you set your details. The following options are used to access an example Amazon AWS web server which will be similar to options you may use for your web server.
- Protocol: SFTP
- Host: The IP address of the web server you want to connect to.
- Logon Type: Key file - This represents using a private key to authenticate access to the web server.
- User: The name of the default user created when an Amazon server is created
- Key file: The full file path to where the pem file is located on the PC.
After filling in the details click the Connect button to connect to the web server.
If the connection is successful then the right-hand panel in the main Filezilla window will show the files and folders for the web server you've just logged into.
Edit files on the web server
Filezilla makes it easy to edit files on your web server, locate any file you want to open right-click on it, and then click the View/Edit option.
A pop-up may show requesting the type of application to use when opening a file, select the second option to use the default editor or the third option to select a text editor to use. Press the OK button after selecting the option to open the file.
The application will open with the file within the web server loaded into it where you can edit the code and save the file which will then upload the updated file back to the web server.
Copy files to web server
You can drag files and folders from the local PC (left) to the web server (right), it's a matter of simply dragging and dropping files/folders between the two panels.
As an example after dragging the devsites folder shown in the screenshots then all its contents will be uploaded to the web server.
SCP
Secure Copy Protocol (SCP) is a Unix command to use in the command line terminal, this option is more suited if you use Mac OS or Linux as your operating system.
Keep in mind you can also still use Filezilla on Mac OS or Linux if you prefer as that application is available on both as well. The SCP command is more suited to users who like to use the terminal.
You can use this command to transfer files by providing the full directory path to the file you want to send, the server IP and the server file directory you want to upload the file to.
The following is the format of the scp command, replace the square brackets with the actual details...
scp [target file path] [user name]@[server ip]:[destination filepath]The following is an example of how to use the SCP command to transfer files.
scp ~/dev/site/main.js [email protected]:~/filesIf you want to authenticate the user with a private key you can use the -i option followed by the file path to the private key file. This example uses the the lightsail.pem private key file to authenticate the bitnami user.
scp -i ~/Documents/lightsail.pem ~/dev/site/main.js [email protected]:~/filesGit
This option doesn't directly transfer the files from your local PC to the web server but rather you would transfer website files through the use of Git. So on your local PC, you would upload your files via Git to a website that hosts your files as Git projects such as GitHub and when you log in to the web server you would use Git on the web server to download the files from GitHub to it.
There will be cases where you would need to use the FTP client or SCP option instead of Git to transfer your files though as it is not best practice to store sensitive data (environment variables, passwords etc) or large media files (images, videos, music) directly in GitHub.
Conclusion
You now know how to transfer a website developed locally on your PC / laptop over to a web server using either an FTP client or the SCP command.
Of course, transferring files is just one small step required to make your website available online as there are other tasks required such as domain setup, software installation, web server setup etc.
However, it's still an important step nonetheless to learn about as it's also useful for server maintenance when you need to perform a specific task with your website on the server.