Lesson 7.2: Website Configuration

Now that Nginx is installed, let's configure it to serve your own website. You'll learn about Nginx configuration files and how to set up a proper web server structure.

Configuration Skills: Understanding Nginx configuration is valuable for web development. These skills apply to other web servers and help you troubleshoot web applications.

Understanding Nginx Configuration

Nginx uses a hierarchical configuration system:

Main Configuration File

The main configuration file is /etc/nginx/nginx.conf. Let's examine it:

$ sudo cat /etc/nginx/nginx.conf user www-data; worker_processes auto; pid /run/nginx.pid; include /etc/nginx/modules-enabled/*.conf; events { worker_connections 768; } http { sendfile on; tcp_nopush on; keepalive_timeout 65; types_hash_max_size 2048; include /etc/nginx/conf.d/*.conf; include /etc/nginx/sites-enabled/*; }

Site Configuration Files

Individual websites are configured in separate files:

/etc/nginx/sites-available/: Available site configurations
/etc/nginx/sites-enabled/: Enabled site configurations (symlinks)
Default site: /etc/nginx/sites-available/default

Creating Your Website Directory

Let's create a directory structure for your website:

Create Project Directory

$ cd ~ $ mkdir my-website $ cd my-website $ pwd /home/valente/my-website

Create Website Structure

$ mkdir -p css images $ ls -la total 16 drwxr-xr-x 3 valente valente 4096 Dec 10 15:45 . drwxr-xr-x 5 valente valente 4096 Dec 10 15:45 .. drwxr-xr-x 2 valente valente 4096 Dec 10 15:45 css drwxr-xr-x 2 valente valente 4096 Dec 10 15:45 images

Creating Basic HTML Pages

Let's create the three pages for your website:

Home Page (index.html)

$ nano index.html

Add this content to index.html:




    
    
    My First Website
    


    
        Welcome to My Website
        This is my first website running on Nginx!
    
    
    
        
            Home
            About
            Contact
        
    
    
    
        
            About This Project
            This website is part of my Linux 101 course where I learned how to set up a web server using Nginx on Ubuntu.
        
    
    
    
        © 2024 My Website. Built with Linux and Nginx.

About Page (about.html)

$ nano about.html

Add this content to about.html:




    
    
    About - My Website
    


    
        About This Website
    
    
    
        
            Home
            About
            Contact
        
    
    
    
        
            About Me
            I'm learning Linux and web development through the Linux 101 course. This website demonstrates my skills in:
            
                Linux system administration
                Web server setup (Nginx)
                HTML and CSS
                File management and permissions
            
        
    
    
    
        © 2024 My Website. Built with Linux and Nginx.

Contact Page (contact.html)

$ nano contact.html

Add this content to contact.html:




    
    
    Contact - My Website
    


    
        Contact Me
    
    
    
        
            Home
            About
            Contact
        
    
    
    
        
            Get In Touch
            Feel free to reach out if you'd like to learn more about my Linux journey!
            
            
                Email: learning@linux101.com
                Course: Linux 101
                Skills: Linux, Nginx, Web Development
            
        
    
    
    
        © 2024 My Website. Built with Linux and Nginx.

Creating CSS Styles

Let's add some basic styling to make your website look better:

$ nano css/style.css

Add this CSS to css/style.css:

/* Basic CSS for my website */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #2c3e50;
    color: white;
    padding: 1rem;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2rem;
}

nav {
    background-color: #34495e;
    padding: 0.5rem;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

nav li {
    margin: 0 1rem;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #4CAF50;
}

main {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

section {
    background-color: white;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h2 {
    color: #2c3e50;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.5rem;
}

footer {
    background-color: #2c3e50;
    color: white;
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
}

.contact-info {
    background-color: #ecf0f1;
    padding: 1rem;
    border-radius: 4px;
    margin-top: 1rem;
}

.contact-info p {
    margin: 0.5rem 0;
}

Configuring Nginx for Your Website

Now let's create a custom Nginx configuration for your website:

Create Site Configuration

$ sudo nano /etc/nginx/sites-available/my-website

Add this Nginx configuration:

server {
    listen 80;
    listen [::]:80;
    server_name localhost;
    
    root /home/valente/my-website;
    index index.html;
    
    location / {
        try_files $uri $uri/ =404;
    }
    
    location ~* \.(css|js|jpg|jpeg|png|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    error_page 404 /404.html;
}

Enable Your Site

Create a symbolic link to enable your site:

$ sudo ln -s /etc/nginx/sites-available/my-website /etc/nginx/sites-enabled/ # Disable default site $ sudo rm /etc/nginx/sites-enabled/default

Test Configuration

Always test Nginx configuration before reloading:

$ sudo nginx -t nginx: the configuration file /etc/nginx/nginx.conf syntax is ok nginx: configuration file /etc/nginx/sites-available/my-website test is successful

Reload Nginx

Apply the new configuration:

$ sudo systemctl reload nginx

Setting File Permissions

Ensure Nginx can read your website files:

Check Current Permissions

$ ls -la ~/ drwxr-xr-x 15 valente valente 4096 Dec 10 15:45 . drwxr-xr-x 3 root root 4096 Dec 10 15:40 .. drwxr-xr-x 3 valente valente 4096 Dec 10 15:45 my-website $ ls -la ~/my-website/ total 20 drwxr-xr-x 4 valente valente 4096 Dec 10 15:45 . drwxr-xr-x 3 valente valente 4096 Dec 10 15:45 .. -rw-r--r-- 1 valente valente 1821 Dec 10 15:45 about.html -rw-r--r-- 1 valente valente 2145 Dec 10 15:45 contact.html -rw-r--r-- 1 valente valente 1654 Dec 10 15:45 index.html drwxr-xr-x 2 valente valente 4096 Dec 10 15:45 css drwxr-xr-x 2 valente valente 4096 Dec 10 15:45 images

Fix Permissions

Give Nginx read access to your website files:

$ sudo chown -R www-data:www-data ~/my-website $ sudo chmod -R 755 ~/my-website $ sudo chmod -R 644 ~/my-website/*.html $ sudo chmod -R 644 ~/my-website/css/*

Testing Your Website

Let's verify that your website is working correctly:

Test with Curl

$ curl localhost My First Website

Welcome to My Website

This is my first website running on Nginx!

Test in Browser

Open your web browser and navigate to http://localhost. You should see your styled website!

Test All Pages

Verify that all three pages work:

http://localhost/ - Home page
http://localhost/about.html - About page
http://localhost/contact.html - Contact page

Troubleshooting Configuration Issues

Common problems and solutions:

403 Forbidden Error

$ curl -I localhost HTTP/1.1 403 Forbidden # Check file permissions $ ls -la ~/my-website/ $ sudo chown -R www-data:www-data ~/my-website

404 Not Found Error

$ curl localhost/nonexistent.html 404 Not Found # Check configuration $ sudo nginx -t $ sudo systemctl reload nginx

Configuration Test Failed

$ sudo nginx -t nginx: [emerg] invalid number of arguments in "root" directive # Fix syntax errors $ sudo nano /etc/nginx/sites-available/my-website

Practice Exercises

Exercise 1: Complete Website Setup

Create all three HTML pages
Create CSS file with styling
Create Nginx configuration
Set correct file permissions
Test all pages in browser

Click for solution

# Create files (as shown above) $ nano index.html about.html contact.html $ nano css/style.css $ sudo nano /etc/nginx/sites-available/my-website $ sudo chown -R www-data:www-data ~/my-website $ sudo chmod -R 755 ~/my-website $ sudo nginx -t && sudo systemctl reload nginx

Exercise 2: Configuration Management

Test Nginx configuration
Reload Nginx service
Check service status
View error logs if needed
Practice enabling/disabling sites

Click for solution

$ sudo nginx -t $ sudo systemctl reload nginx $ sudo systemctl status nginx $ sudo journalctl -u nginx -f $ sudo ln -s /etc/nginx/sites-available/my-website /etc/nginx/sites-enabled/ $ sudo rm /etc/nginx/sites-enabled/my-website

What's Next?

Excellent! Your Nginx server is configured and serving your website. Next, we'll enhance your website with additional features and practice more advanced file management.

Continue to Creating Your Website

Key Takeaways

Nginx configuration is in /etc/nginx/
Sites are configured in sites-available/ and enabled in sites-enabled/
Always test configuration with nginx -t before reloading
Set proper file permissions for web content (755 for directories, 644 for files)
www-data user needs ownership of web files
Use systemctl reload to apply configuration changes