How to Deploy HTML5 Website on a LAMP Server in Ubuntu?

Introduction

HTML5 is the fifth and latest version of Hypertext Markup Language, which is the standard language used for creating web pages and applications. Unlike its predecessors, HTML5 offers a more efficient way of coding websites, making it easier for developers to create rich and interactive content. With HTML5, developers can use new tags like video and audio to include multimedia elements on their web pages without relying on third-party plugins.

The canvas tag allows developers to create animations and graphics directly on a web page using JavaScript. Additionally, HTML5 provides better support for mobile devices by introducing responsive design techniques that optimize the layout of websites across different screen sizes.

Setting up the LAMP Server in Ubuntu

Installing Apache web server

Firstly, update the package list by running −

sudo apt update    

Next, install Apache by running−

sudo apt install apache2    

Installing MySQL database server

Firstly, update the package list by running: sudo apt update

Next, install MySQL by running −

sudo apt install mysql-server    

During installation, you will be prompted to set up a root password for MySQL. After installation, verify that MySQL is running properly by logging into the database using −

sudo mysql -u root -p    

This will prompt you to enter your root password that was set during installation.

Installing PHP scripting language

To install PHP on Ubuntu, run−

sudo apt-get install php libapache2-mod-php php-mysql    

After installing PHP, restart Apache to ensure all changes take effect with −

sudo systemctl restart apache2    

Preparing the HTML5 Website for Deployment

Creating a directory for the website files on the server

You can create a directory using either the command line or through an FTP client like FileZilla. To create a directory using the command line, log in to your server and navigate to /var/www/html/.

Once there, use the following command−

mkdir mywebsite    

This will create a new directory called "mywebsite" in /var/www/html/. You can replace "mywebsite" with any name of your choice.

Uploading the website files to the server using FTP or SCP

FTP is commonly used because it's simple and easy to use. To upload your website files using FTP, you need an FTP client like FileZilla.

To connect FileZilla with your LAMP server, enter your server's IP address in "Host" field and specify port 22. Then enter your username and password credentials and click on "Quickconnect".

Once connected, navigate through directories until you reach /var/www/html/mywebsite/ location on server. With that done, select all necessary website folders from local machine and drag them into remote server "/var/www/html/mywebsite/" folder.

If you prefer SCP instead of FTP protocol - with terminal open type −

scp -r /path/to/local/folder username@server:/path/to/server/folder    

The "-r" flag allows copies of entire directories. Replace "/path/to/local/folder" and "/path/to/server/folder" with the local and remote directory locations, respectively.

Configuring Apache for Hosting HTML5 Website

Creating a virtual host configuration file

To create a Virtual Host, navigate to Apache's "sites-available" directory by running the following command in terminal−

cd /etc/apache2/sites-available/     

Create a new Virtual Host Configuration File by running this command−

sudo nano my-website.com.conf     

Change "my-website.com" with your preferred domain name or website name.

Modifying virtual host configuration file to include website files and directories

After creating the Virtual Host Configuration File, modify it and add specific details about your website. First, add the following code at the beginning of the file −

ServerAdmin webmaster@my-website.com ServerName my-website.com 
DocumentRoot /var/www/html/my-website.com/public_html  

This code tells Apache that you are creating a new virtual host that listens on port 80 (default HTTP port), uses "my-website.com" as its name and sets "/var/www/html/my-website.com/public_html" as its document root directory.

After adding this code, save and close the file. Next, create directories for your website's content using this command−

sudo mkdir -p /var/www/html/my-website.com/public_html      

Once created, upload all necessary HTML5 files into this directory using SCP or FTP.

Restarting Apache web server

Once you have modified and saved your virtual host configuration file, restart your Apache web server for changes to take effect by running this command−

sudo systemctl restart apache2      

This command reloads the web server and applies your new Virtual Host settings.

Now that Apache is configured to host your website, it's time to set up a MySQL database for your website in section V.

Configuring MySQL Database for Website

Creating a New Database and User Account

Once logged in, click on the "Databases" tab at the top of the page. Here, you can create a new database by entering its name in the "Create database" field and selecting your desired character set from the dropdown menu.

After creating your new database, it's important to create a new user account that has appropriate privileges to access and modify it. To do this, click on the "Users" tab at the top of the page and then click "Add user".

Enter your desired username and password, select "localhost" as the host, and then assign privileges to your new user by selecting specific checkboxes or choosing "All privileges". Click "Go" to save your changes.

Importing SQL Data from Local Machine to Remote MySQL Database

Now that you have created a new database and user account in MySQL, it's time to import any necessary data from your local machine to your remote server. This can be done using various methods such as command-line tools like mysqldump or graphical tools like phpMyAdmin.

First select your newly created database from within phpMyAdmin by clicking on its name in the left-hand sidebar.

Then, click on the "Import" tab at the top of the page. Next, click on "Choose File" and select the SQL dump file you previously exported from your local machine.

Under the "Format" section, ensure that "SQL" is selected as the format type. Click "Go" to begin importing your data into your remote MySQL database.

Testing Website Deployment

After successfully deploying your HTML5 website on the LAMP server in Ubuntu, it is essential to test whether the website is accessible via a browser using an IP address or domain name. There are several ways to access your website, including using the IP address assigned to the server or domain name registered with DNS servers. To access your website via IP address, open a web browser and type in "http:///", replacing "" with the actual IP of your server.

Once you enter this URL, the browser will try to connect to your server and display the homepage of your website if everything is configured correctly. If you have set up a custom port for Apache, you must include that in the URL as well.

Accessing Website via Domain Name

Accessing your website via domain name requires some additional configuration steps compared to accessing it through an IP address. Firstly, you need to register a domain with a registrar and point it towards the IP address of your LAMP server using DNS records. Once this step has been completed, users can access your website by typing in its domain name into their browser instead of an IP address.

However, before users can access your site using its domain name for the first time, they may need to clear their DNS cache as this information may have been stored previously by their browser or ISP provider.

Conclusion

Deploying an HTML5 website on a LAMP server in Ubuntu is a crucial step towards establishing the online presence of your business or organization. In this article, we have outlined the necessary steps that one needs to take to deploy an HTML5 website on a LAMP server in Ubuntu. We have discussed setting up of the LAMP server, preparing the website files for deployment, configuring Apache and MySQL database servers for hosting and testing the website deployment.