XQA
Back to Python
2026-02-067 min read

Host a Static Website (Python Programming)

Learn Host a Static Website (Python Programming) step by step with clear examples and exercises.

Title: Host a Static Website (Python Programming)

Why This Matters

A static website is an essential tool for showcasing your portfolio, blog, or small business online. Python offers a simple and efficient way to create these websites without requiring extensive knowledge of web development. You'll learn how to host a static website using Python, delving into practical examples, common mistakes, and interview-ready one-liners.

By the end of this tutorial, you'll be able to:

  1. Understand the basics of hosting a static website with Python.
  2. Create and serve a simple static website using Python's built-in HTTP server module.
  3. Troubleshoot common issues that may arise when setting up your static website.
  4. Expand your static website by adding additional content, styles, and functionality.
  5. Deploy your static website on a real domain.
  6. Optimize your static website for better performance.
  7. Add interactivity to your static website using JavaScript or jQuery.
  8. Implement user authentication and authorization for private sections of your static website.
  9. Integrate social media sharing buttons on your website.
  10. Add Google Analytics to track visitor statistics and improve your marketing efforts.

Prerequisites

To follow along with this tutorial, you should have:

  1. Basic knowledge of Python syntax (variables, functions, loops, and conditional statements).
  2. Familiarity with HTML and CSS for creating the content and design of your static website.
  3. A text editor or Integrated Development Environment (IDE) such as Visual Studio Code, PyCharm, or Jupyter Notebook.
  4. Python installed on your system.
  5. Basic understanding of JavaScript or jQuery (for adding interactivity to your website).
  6. Familiarity with web hosting and domain registration (for deploying your static website).
  7. Knowledge of Google Analytics (for tracking visitor statistics).

Core Concept

Python's built-in HTTP server module allows you to serve files from the current directory and its subdirectories over the network as a simple web server. This is an excellent way to host static websites without needing extensive knowledge of web development or setting up complex servers.

Here's an example of how to create a basic static website:

  1. Create a new folder for your project, e.g., my_static_website.
  2. Inside the folder, create two files: index.html and about.html. These files will contain the HTML content for your homepage and about page, respectively.
  3. Open a terminal or command prompt in the project folder.
  4. Run the following Python command to start the web server:
python -m http.server 8000

This will start the HTTP server on port 8000, making your static website accessible at http://localhost:8000 in your web browser.

Directory Structure and File Organization

For a more organized project structure, you can create subdirectories for different sections of your website. For example:

  • my_static_website/ (root directory)
  • css/ (CSS files)
  • img/ (image files)
  • js/ (JavaScript files)
  • index.html
  • about.html
  • contact.html

Worked Example

Let's create a simple static website with an index page, an about page, and a contact form using HTML, CSS, JavaScript, and Python.

  1. Create a new folder named my_static_website.
  2. Inside the folder, create three files:
  • index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Static Website</title>
<link rel="stylesheet" href="css/styles.css">
<script src="js/main.js"></script>
</head>
<body>
<h1>Welcome to My Static Website!</h1>
<p>This is a simple static website created using Python.</p>
<a href="about.html">About Us</a> | <a href="contact.html">Contact Us</a>
</body>
</html>
  • about.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Us</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h1>About My Static Website</h1>
<p>This static website was created using Python.</p>
</body>
</html>
  • contact.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact Us</title>
<link rel="stylesheet" href="css/styles.css">
<script src="js/main.js"></script>
</head>
<body>
<h1>Contact My Static Website</h1>
<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="10" cols="30" required></textarea><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
  1. Create a new file called styles.css in the css/ directory:
body {
font-family: Arial, sans-serif;
}
h1 {
color: #446b82;
}
a {
color: #007acc;
text-decoration: none;
}
  1. Create a new file called main.js in the js/ directory:
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();

// Collect form data
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const message = document.getElementById('message').value;

// Send form data to server (e.g., using AJAX)
fetch('/submit_contact_form', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name, email, message })
})
.then(response => response.json())
.then(data => console.log('Form submitted successfully!'))
.catch(error => console.error('Error submitting form:', error));
});
  1. Create a new file called submit_contact_form in the root directory of your project (this will handle the contact form submission on the server-side):
import json

def application(environ, start_response):
if environ['REQUEST_METHOD'] == 'POST':
data = json.loads(environ['wsgi.input'].read().decode())

// Save form data to a file or database

start_response('200 OK', [('Content-Type', 'application/json')])
response_body = json.dumps({'status': 'success'})
return [response_body.encode()]

Common Mistakes

  1. Forgetting to start the HTTP server by running python -m http.server 8000 in the terminal or command prompt.
  2. Not specifying the correct port number (e.g., using 8001 instead of 8000).
  3. Incorrectly formatting the HTML files, causing syntax errors.
  4. Not saving the HTML files after making changes.
  5. Running the HTTP server in a different directory than the static website files.
  6. Failing to include the appropriate CSS file links in your HTML files.
  7. Not handling the /submit_contact_form request properly on the server-side (if using a contact form).
  8. Forgetting to add the required attributes for form elements (e.g., required for input fields and textarea).
  9. Failing to validate or sanitize user inputs in your contact form (for security reasons).
  10. Failing to properly implement JavaScript or jQuery functions that interact with the static website.

Practice Questions

  1. What is the purpose of Python's built-in HTTP server module?
  2. How can you create a more organized project structure for your static website using subdirectories?
  3. What are some common mistakes to avoid when setting up a static website with Python?
  4. How can you add interactivity to your static website using JavaScript or jQuery?
  5. What steps should you take to deploy your static website on a real domain?
  6. Explain how to implement user authentication and authorization for private sections of your static website.
  7. Describe the process of integrating social media sharing buttons on your website.
  8. How do you add Google Analytics to track visitor statistics on your static website?

FAQ

What is the purpose of Python's built-in HTTP server module?

Python's built-in HTTP server module allows you to serve files from the current directory and its subdirectories over the network as a simple web server. This is an excellent way to host static websites without needing extensive knowledge of web development or setting up complex servers.

How can you create a more organized project structure for your static website using subdirectories?

To create a more organized project structure, you can create subdirectories for different sections of your website. For example:

  • my_static_website/ (root directory)
  • css/ (CSS files)
  • img/ (image files)
  • js/ (JavaScript files)
  • index.html
  • about.html
  • contact.html

What are some common mistakes to avoid when setting up a static website with Python?

Some common mistakes to avoid when setting up a static website with Python include:

  1. Forgetting to start the HTTP server by running python -m http.server 8000 in the terminal or command prompt.
  2. Not specifying the correct port number (e.g., using 8001 instead of 8000).
  3. Incorrectly formatting the HTML files, causing syntax errors.
  4. Not saving the HTML files after making changes.
  5. Running the HTTP server in a different directory than the static website files.
  6. Failing to include the appropriate CSS file links in your HTML files.
  7. Not handling the /submit_contact_form request properly on the server-side (if using a contact form).
  8. Forgetting to add the required attributes for form elements (e.g., required for input fields and textarea).
  9. Failing to validate or sanitize user inputs in your contact form (for security reasons).
  10. Failing to properly implement JavaScript or jQuery functions that interact with the static website.
Host a Static Website (Python Programming) | Python | XQA Learn