0Pricing
Linux Server Deployment & SSH Mastery · Lesson

Hosting Static Websites

Configure your chosen web server to serve static HTML, CSS, and JavaScript files, making your first website accessible.

Hosting Static Websites is a free Linux Server Deployment & SSH Mastery lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Linux Server Deployment & SSH Mastery learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What are Static Websites?

Welcome! In this lesson, we'll learn how to get your simple website online.

A static website is made of files like HTML, CSS, and JavaScript that are delivered to a user's browser exactly as they are stored on the server.

  • No server-side processing (like PHP or Python).
  • Fast, secure, and easy to host.
  • Perfect for portfolios, blogs, or simple informational sites.

Crafting Your First HTML File

Let's create a super simple index.html file. This will be the main page of our static website.

You would typically create this file on your server. For example, using a text editor like nano or vim.

<!DOCTYPE html>
<html>
<head>
  <title>My First Static Site</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello CoddyKit!</h1>
  <p>This is my awesome static website.</p>
  <script src="script.js"></script>
</body>
</html>

Adding CSS and JavaScript

Our HTML file references style.css and script.js. Let's create those too, to complete our basic site.

These files will live in the same directory as our index.html.

/* style.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
  text-align: center;
}
h1 {
  color: #333;
}

// script.js
document.addEventListener('DOMContentLoaded', () => {
  console.log('Website loaded!');
  alert('Welcome to my site!');
});

Setting Up Your Web Directory

We need a dedicated place on our server to store these website files. A common location is within /var/www/.

First, create a directory for your website. Then, copy your index.html, style.css, and script.js files into it.

sudo mkdir -p /var/www/mywebsite
sudo cp index.html /var/www/mywebsite/
sudo cp style.css /var/www/mywebsite/
sudo cp script.js /var/www/mywebsite/

# Set proper permissions
sudo chown -R www-data:www-data /var/www/mywebsite
sudo chmod -R 755 /var/www/mywebsite

Nginx: The Server Block Basics

Nginx uses server blocks (similar to Apache's Virtual Hosts) to define configurations for specific websites.

Each server block listens for requests on a port (like 80 for HTTP) and responds based on the domain name.

  • Usually found in /etc/nginx/sites-available/.
  • Activated by creating a symlink to /etc/nginx/sites-enabled/.

Nginx: Root & Index Directives

Inside a server block, two key directives tell Nginx where to find your files:

  • root: Specifies the absolute path to your website's files. This is where Nginx will look for content.
  • index: Defines the default file Nginx should serve when a directory is requested (e.g., when someone visits yourdomain.com/, Nginx looks for index.html).

Nginx: Full Static Site Configuration

Here's a complete Nginx server block configuration for our static site. Save this as /etc/nginx/sites-available/mywebsite.conf.

Remember to replace your_domain.com with your actual domain or server IP.

server {
  listen 80;
  listen [::]:80;

  server_name your_domain.com www.your_domain.com;

  root /var/www/mywebsite;
  index index.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

Apache: Virtual Host Equivalent

If you're using Apache, the concept is similar with Virtual Hosts. You'd create a configuration file (e.g., /etc/apache2/sites-available/mywebsite.conf).

Key directives are DocumentRoot (like Nginx's root) and DirectoryIndex (like Nginx's index).

<VirtualHost *:80>
  ServerAdmin webmaster@localhost
  ServerName your_domain.com
  ServerAlias www.your_domain.com

  DocumentRoot /var/www/mywebsite
  DirectoryIndex index.html index.htm

  <Directory /var/www/mywebsite>
    Options Indexes FollowSymLinks
    AllowOverride None
    Require all granted
  </Directory>

  ErrorLog ${APACHE_LOG_DIR}/error.log
  CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Activating & Reloading Your Server

After creating your configuration file, you need to enable it and reload your web server for changes to take effect.

  • For Nginx: Create a symlink and reload.
  • For Apache: Enable the site and reload.
# For Nginx:
sudo ln -s /etc/nginx/sites-available/mywebsite.conf /etc/nginx/sites-enabled/
sudo nginx -t # Test config syntax
sudo systemctl reload nginx

# For Apache:
sudo a2ensite mywebsite.conf
sudo apache2ctl configtest # Test config syntax
sudo systemctl reload apache2

Testing Your Live Website

Great job! Your static website should now be accessible.

Open your web browser and navigate to the IP address of your server or the domain name you configured.

You should see your "Hello CoddyKit!" message!

Quick Check: Nginx Directives

Consider the following Nginx server block snippet:

server {
  listen 80;
  server_name example.com;
  root /var/www/html/blog;
  index landing.html index.htm;

  location / {
    try_files $uri $uri/ =404;
  }
}

If a user navigates to http://example.com/, which file will Nginx attempt to serve first?

Recap: Hosting Static Sites

You've successfully learned to host a static website!

We covered:

  • Creating basic HTML, CSS, and JS files.
  • Setting up a dedicated directory for your website content.
  • Configuring Nginx server blocks (or Apache Virtual Hosts) using root/DocumentRoot and index/DirectoryIndex.
  • Activating and reloading your web server.
  • Testing your live website in a browser.

Next, we'll explore configuring virtual hosts to host multiple websites on a single server!

Frequently asked questions

Is the “Hosting Static Websites” lesson free?

Yes — the full text of “Hosting Static Websites” is free to read here on the web, and the Linux Server Deployment & SSH Mastery course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Linux Server Deployment & SSH Mastery course, upgrade to CoddyKit PRO.

What will I learn in “Hosting Static Websites”?

Configure your chosen web server to serve static HTML, CSS, and JavaScript files, making your first website accessible. You practise Linux Server Deployment & SSH Mastery with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Linux Server Deployment & SSH Mastery?

No prior experience is required. Linux Server Deployment & SSH Mastery on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Hosting Static Websites” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Linux Server Deployment & SSH Mastery lesson?

Yes. Every Linux Server Deployment & SSH Mastery lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Installing Nginx/Apache
  2. Hosting Static Websites
  3. Basic Virtual Host Configuration
  4. Enabling HTTPS with Let's Encrypt
← Back to Linux Server Deployment & SSH Mastery