Offensive Security Researcher & Quantum Cryptography Analyst

How to Create a Basic HTML Page on Apache

Abdul Wahab Junaid
How to create a basic HTML page on Apache

After getting Apache installed and running, the natural next step I take is putting an actual web page on it. It sounds almost too simple to write a whole guide about, but there are a few details around file placement, permissions, and directory structure that trip up a lot of beginners. In this guide, I’ll walk through exactly how I create and serve a basic HTML page using Apache.

Understanding Apache’s Document Root

The “document root” is the directory Apache treats as the root of your website. Any file placed there becomes accessible through your domain or IP address. On Ubuntu, the default document root is:

/var/www/html

Whatever file is named index.html inside that directory is what visitors see when they navigate to your site’s root URL.

Prerequisites

Step 1: Navigate to the Document Root

I start by moving into the default web directory:

cd /var/www/html

I take a look at what’s already there:

ls -la

On a fresh install, you’ll typically see a default index.html file that displays the “Apache2 Ubuntu Default Page.” I usually remove or rename this before adding my own content.

sudo mv index.html index.html.backup

Step 2: Create a New HTML File

Now I create my own index.html file:

sudo nano /var/www/html/index.html

And I add some basic HTML content:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Apache Page</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            text-align: center;
            padding-top: 100px;
        }
        h1 {
            color: #2c3e50;
        }
        p {
            color: #555;
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first HTML page served by Apache on Ubuntu.</p>
</body>
</html>

I save the file (in nano, that’s Ctrl+O, then Enter, followed by Ctrl+X to exit).

Step 3: Set Correct File Permissions and Ownership

This is a step I never skip, because incorrect permissions are one of the most common reasons a page fails to load with a “403 Forbidden” error.

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

Step 4: Test the Page in a Browser

With the file in place and permissions set, I open a browser and navigate to:

http://your_server_ip

or, if testing locally:

http://localhost

I should see my custom “Hello, World!” page rendered exactly as written.

Step 5: Verify with curl (Optional but Useful)

If I’m working purely from the terminal without a GUI browser handy, I confirm the page loads correctly using curl:

curl http://localhost

This should print the raw HTML content of my page directly to the terminal.

Creating Additional Pages

A single index.html is a great start, but most sites need more than one page. I create additional HTML files in the same directory:

sudo nano /var/www/html/about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>About This Site</title>
</head>
<body>
    <h1>About</h1>
    <p>This page describes what this website is about.</p>
</body>
</html>

This page becomes accessible at:

http://your_server_ip/about.html

I can link between pages using standard HTML anchor tags:

<a href="/about.html">About</a>

Organizing Static Assets

As my site grows beyond a single page, I organize things into subdirectories to keep everything tidy:

sudo mkdir -p /var/www/html/css
sudo mkdir -p /var/www/html/images
sudo mkdir -p /var/www/html/js

Then I reference them in my HTML like this:

<link rel="stylesheet" href="/css/style.css">
<img src="/images/logo.png" alt="Logo">
<script src="/js/main.js"></script>

Apache serves static files from any subdirectory under the document root automatically, without any additional configuration needed.

Common Mistakes When Creating an HTML Page on Apache

Security Best Practices

Performance Optimization Tips

Troubleshooting Common Issues

Page shows “It works!” or the default Apache page instead of mine: This usually means my file wasn’t actually placed in /var/www/html, or there’s a leftover index.html.backup file that Apache is still serving instead (double check the exact filename).

“403 Forbidden” error: Almost always a permissions issue. Re-run the ownership and permission commands above.

“404 Not Found” for a linked page: Double-check the filename and path referenced in your HTML links match the actual files exactly, including capitalization, since Linux filesystems are case-sensitive.

Frequently Asked Questions

Do I need to restart Apache after adding an HTML file? No, static HTML files are served immediately without needing a restart, since Apache reads them fresh on every request.

Can I use a different directory instead of /var/www/html? Yes, by setting up a custom virtual host with a different DocumentRoot directive, which I cover in my separate guide on creating virtual hosts in Apache.

Why does my CSS or JavaScript file not load? Double-check the file path in your <link> or <script> tag matches the actual location relative to the document root, and confirm the file has appropriate read permissions.

Does Apache support HTML5 features out of the box? Yes, Apache simply serves the raw file content; any HTML5 features work exactly as they would on any other web server, since rendering is handled entirely by the visitor’s browser.

Summary and Key Takeaways

Creating a basic HTML page on Apache comes down to placing a properly named file inside the correct document root, usually /var/www/html, and making sure the file permissions and ownership are set correctly so Apache can actually serve it. From there, organizing additional pages and static assets into a clean folder structure sets you up nicely for building out a full website.

References

Exit mobile version