How to Make a Serverless Website with AWS Lambda (for free)

by

Hey there! Some links on this page may be affiliate links which means that, if you choose to make a purchase, I may earn a small commission at no extra cost to you. I greatly appreciate your support!

In this tutorial, you will learn how to make a serverless static website with AWS Lambda functions. You can get 1 million free Lambda calls per month which as part of the AWS Always Free tier. This essentially equates to 1 million free page view per month.

Below are multiple examples of Lambda Python function calls that return HTML which are accessible at a public URL with HTTPS.

1. Get Started with AWS Lambda

Go to https://aws.amazon.com/lambda/ and click the orange Get started with AWS Lambda button. Sign up for an AWS account if you don’t already have one.

2. Create a Very Simple Lambda Function

Click on the orange Create Function button in the upper right corner of the AWS Lambda dashboard.

Choose a function name and runtime. I picked home and Python 3.9 respectively.

On the next screen you will see a basic Lambda function that simply returns the text “Hello from Lambda!” with a 200 status code.

import json

def lambda_handler(event, context):
    # TODO implement
    return {
        'statusCode': 200,
        'body': json.dumps('Hello from Lambda!')
    }

Let’s add a trigger so that we can exercise the function in a web browser.

Click on Add trigger. For the trigger configuration dropdown, select API Gateway. Create an API of type HTTP API with Open security. Keep all other fields the defaults.

On the next page, copy and paste the API endpoint URL into a web browser and you will see the “Hello from Lambda!” string displayed.

2. Lambda Function with HTML

Edit the lambda function with the following code to return HTML instead of JSON.

def lambda_handler(event, context):
    
    body = '''
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Homepage</title>
    </head>
    <body>
        <h1>Home</h1>
        <p>Hi! My name is Tony. I like to teach people about websites.</p>
        <img src="https://tonyteaches.tech/wp-content/uploads/2021/08/tony-teaches-tech-youtube-banner.jpg" width="500" />
        <p>Like, comment, subscribe!</p>
        <p>Check out my <a href='/blog">blog</a>.</p>
    </body>
    </html>'''
    
    response = {
        'statusCode': 200,
        'headers': {"Content-Type": "text/html",},
        'body': body
    }
    
    return response

Feel free to modify the HTML for your purposes.

Navigate to the same URL in a web browser and you will see the HTML displayed as expected.

3. Multiple Page Lambda Function Website

Create another Lambda function named blog. Replace the default lambda function with the following.

def lambda_handler(event, context):
    
    body = '''
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Blog</title>
    </head>
    <body>
        <h1>Blog</h1>
        <p>This is my blog. I haven't written any posts yet.</p>
    </body>
    </html>'''
    
    response = {
        'statusCode': 200,
        'headers': {"Content-Type": "text/html",},
        'body': body
    }
    
    return response

Deploy the function and test that the link to the blog page works.

Feel free to create a Lambda function for as many pages as you’d like.

For your convenience, the following is a detailed video walkthrough of the steps in this tutorial.

YouTube video


Meet Tony

With a strong software engineering background, Tony is determined to demystify the web. Discover why Tony quit his job to pursue this mission. You can join the Tony Teaches Tech community here.

Leave a Comment