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

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

First, update the package list by running

sudo apt update

Next, install Apache by running

sudo apt install apache2

Installing MySQL Database Server

Install MySQL by running

sudo apt install mysql-server

After installation, secure MySQL and set up a root password

sudo mysql_secure_installation

Verify that MySQL is running properly by logging into the database

sudo mysql -u root -p

Installing PHP Scripting Language

To install PHP on Ubuntu, run

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

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

sudo systemctl restart apache2

Preparing the HTML5 Website for Deployment

Creating a Directory for Website Files

Create a directory for your website in Apache's document root. Navigate to /var/www/html/ and create a new directory

cd /var/www/html/
sudo mkdir mywebsite

Set proper ownership and permissions

sudo chown -R www-data:www-data /var/www/html/mywebsite
sudo chmod -R 755 /var/www/html/mywebsite

Uploading Website Files to the Server

You can upload files using SCP or FTP. For SCP, use the following command

scp -r /path/to/local/website/* username@server_ip:/var/www/html/mywebsite/

For FTP, use an FTP client like FileZilla. Connect to your server using its IP address, port 22 (for SFTP), username, and password. Navigate to /var/www/html/mywebsite/ and upload your HTML5 files.

Configuring Apache Virtual Host

Creating Virtual Host Configuration File

Navigate to Apache's sites-available directory

cd /etc/apache2/sites-available/

Create a new virtual host configuration file

sudo nano mywebsite.conf

Configuring the Virtual Host

Add the following configuration to the file

<VirtualHost *:80>
    ServerAdmin webmaster@mywebsite.com
    ServerName mywebsite.com
    ServerAlias www.mywebsite.com
    DocumentRoot /var/www/html/mywebsite
    
    <Directory /var/www/html/mywebsite>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
    
    ErrorLog ${APACHE_LOG_DIR}/mywebsite_error.log
    CustomLog ${APACHE_LOG_DIR}/mywebsite_access.log combined
</VirtualHost>

Save the file and enable the virtual host

sudo a2ensite mywebsite.conf
sudo a2dissite 000-default.conf
sudo systemctl reload apache2

Configuring MySQL Database (Optional)

If your HTML5 website requires a database, create one using MySQL command line

CREATE DATABASE mywebsite_db;
CREATE USER 'website_user'@'localhost' IDENTIFIED BY 'secure_password';
GRANT ALL PRIVILEGES ON mywebsite_db.* TO 'website_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;

To import existing SQL data

mysql -u website_user -p mywebsite_db < /path/to/your/database.sql

Testing Website Deployment

Accessing via IP Address

Test your website by opening a web browser and navigating to your server's IP address

http://your_server_ip

If everything is configured correctly, your HTML5 website should display properly.

Accessing via Domain Name

For domain name access, you need to

• Register a domain name with a domain registrar

• Point the domain's DNS A record to your server's IP address

• Wait for DNS propagation (can take up to 48 hours)

Once DNS propagation is complete, users can access your website using the domain name in their browsers.

Conclusion

Deploying an HTML5 website on a LAMP server involves setting up Apache, MySQL, and PHP, creating proper directory structures, configuring virtual hosts, and testing accessibility. This setup provides a robust foundation for hosting modern web applications with multimedia content and responsive design features that HTML5 offers.