06: Hosting a Static Website

Learning Target

• Understand how a Linux server delivers static web content from a folder to a browser over HTTP.
• Create and manage website files inside /var/www with correct ownership and permissions.
• Configure Nginx to serve a custom site using an IP-based server configuration.
• Safely validate, enable, disable, and restart Nginx configurations using professional workflows.

Resources

W3Schools HTML Tutorial:

https://www.w3schools.com/html/

Instructions

In this lab, you will create a static website, configure Nginx to serve it using the Raspberry Pi’s IP address, and verify it works over HTTP.

Part 1: Connect to the Raspberry Pi

From Windows Terminal:

You should see:

Part 2: Create a New Website Folder

We will create a new site. Replace "mysite" with the name of your site. Do no use spaces in the folder name. Use underscores or dashes instead.

Step 1: Create the directory

Step 2: Assign Ownership

We want:

• You (the logged-in user) to edit files
• Nginx (www-data) to read files

Run:

Explanation:

• $USER = your account
• www-data = Nginx user

Step 3: Set Proper Permissions

This allows:

• Owner: full access
• Others: read and execute (required for web serving)

Step 4: Confirm Permissions

You should see:

Part 3: Create the Website Files

You will create 3 linked pages:

• index.html (Home)
• about.html
• contact.html

Step 1: Create index.html

You can start with this basic structure and then customize:

Save:

• Press Ctrl + S
• Press Enter
• Press Ctrl + X

Step 2: Create about.html

You can use the same template to get you started. Be sure to update the contents Save and exit.

Step 3: Create contact.html

You can use the same template to get you started. Be sure to update the contents Save and exit.

Part 4: Create a New Nginx Configuration

We will create a new server config using the IP address.

Step 1: Create Config File

Add:

Explanation:

• listen 80 = HTTP
• server_name _; = match any IP address (since it may change)
• root = folder of your site

Save and exit.

Part 5: Check Nginx Configuration

Before enabling a site, ALWAYS test:

You should see:

If errors appear:

• Carefully read the message
• Fix typos in the config file
• Test again

Part 6: Disable the Default Site

To disable a website in Nginx you delete the symbolic link of the default configuration that is in the enabled-sites folder. 
If Nginx finds the symbolic link in the enabled-sites folder, then it serves the site to others. If not, it doesn't.

Step 1: Remove the symbolic link

Remove the symbolic link for the default site to disable it:

Part 7: Enable Your New Site

To enable a website, you create a symbolic link of the site's configuration in the enabled-sites folder.

Step 1: Create a symbolic link

Create a new symbolic link for your custom site's configuration:

Part 8: Restart Nginx

Check status:

Look for:

Press Q or CTRL+Z to exit.

Part 9: Test the Website

On the Windows computer:

1. Open a browser
2. Go to:  http://IP_ADDRESS

You should see your homepage.

Test Navigation

Click:

• About
• Contact
• Home

All three pages should load correctly.

Part 10: Verify File Structure

Run:

You should see:

Troubleshooting

If the old Nginx page appears:

Clear browser cache or press:

If you see 403 Forbidden:

Check permissions:

It must show:

If you see 404 Not Found:

Confirm:

• File names are correct
• index.html exists
• root path in config is correct

Completion Checklist

☐ Created /var/www/mysite
☐ Set correct ownership and permissions
☐ Created 3 linked HTML pages
☐ Created new Nginx config
☐ Passed nginx -t test
☐ Disabled default site
☐ Enabled new site
☐ Restarted Nginx
☐ All 3 pages load correctly