DEV Community

folashade oluwaseun
folashade oluwaseun

Posted on

How I Deployed WordPress on an Azure VM with Nginx and PHP – With a Custom Welcome Page

#nginx #wordpress #devops #beginners

In this guide, I’ll walk you through how I set up WordPress on an Ubuntu server on Azure using Nginx and added a custom welcome page to make the site more personal.

Architectural Diagram

Image description

Below are the steps I Took:

1. Installed Nginx, PHP, and MySQL

I installed the core components needed to serve WordPress:

sudo apt update sudo apt install nginx php php-mysql mysql-server -y
Enter fullscreen mode Exit fullscreen mode

2. Downloaded and Set Up WordPress

I downloaded WordPress and extracted it into /var/www/html:

wget https://wordpress.org/latest.tar.gz tar -xvzf latest.tar.gz sudo mv wordpress/* /var/www/html/
Enter fullscreen mode Exit fullscreen mode

3. Configured Nginx

I edited the Nginx default configuration to support PHP and WordPress:

sudo nano /etc/nginx/sites-available/default
Enter fullscreen mode Exit fullscreen mode

I made sure to set the index directive like this:

index index.html index.htm index.php;
Enter fullscreen mode Exit fullscreen mode

This ensures my custom index.html is shown before WordPress’s index.php

4. Created a Custom Welcome Page

Inside /var/www/html/, I created an index.html file:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Welcome</title> </head> <body style="text-align: center; font-family: sans-serif; padding: 50px;"> <h1>Welcome to Folashade's Core Dev Test!</h1> <p>This is a personal test environment where WordPress is installed.</p> <a href="/wp-login.php" style="display: inline-block; padding: 10px 20px; background: #0073aa; color: white; text-decoration: none; border-radius: 5px;">Login to WordPress</a> </body> </html>
Enter fullscreen mode Exit fullscreen mode

5. Restarted Nginx

To apply the changes:

sudo systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

Then I go to http://<server-ip> , I see a clean, welcoming landing page.

Clicking the link takes me to the full WordPress setup.

Image description

This setup gives me a simple branded homepage while keeping full access to WordPress in the background.

Top comments (0)