How to Build a Serverless Static Rendered Website

What is static rendering?

Static rendering is the process of generating a single HTML file for every user-accessible page ahead of time. Because everything is pre-built, statically rendered pages load much faster. This is a huge benefit and one of the biggest advantages of building a static rendered website.

As one of Highland’s Senior Application Developers, I’ve found that building websites this way also allows us to reduce latency further by setting up a CDN to cache these files. This feature makes static rendering a good choice for things like product pages, blog posts, etc. However, static rendering isn’t a sensible choice in every case. For example, it wouldn’t be reasonable to build a set of statically rendered pages for every possible result of a user search.

For this tutorial, I will show how to set up a small serverless static rendering function with AWS Lambda, which saves HTML files to an S3 bucket. We will be using Python 3.7 core string formatting to put our final HTML file together.

Want more tips on serverless systems? This tutorial will show how to create data visualizations with the AWS Lambda service and store them in an S3 Bucket.

Serverless Data Visualizations | *Note: this technique works for AWS Lamba’s Python 3.7 runtime at the time of the article creation.*journal.highlandsolutions.com

The Set-Up

The first step is to set up an S3 bucket. Open the S3 service and click Create Bucket. For this exercise, I called my bucket static-rendered-site-example.

Press Next, leave these options as-is and press Next again. On this page, we can set our bucket to public to make our pages accessible in our web browser.

You can leave the rest of the settings as is and finish setting up the bucket.

Next, we’ll need to configure our new bucket as a website. Click on the bucket and click the Properties tab. Expand the Static website hosting card and click the top radio button. Go ahead and enter index.html in the first input. (For this basic example we’ll leave the error portion blank.) Hit Save.

Take note of the Endpoint on the top of this card.

We’ll need this again later to access our website. You can always revisit this card again to find the URL.

Note: if you try to access your bucket via the bucket URL, things will not load properly.

Next, we will need to create a role that will give our Lambda function permission to save files to S3. To do this:

1. Visit the IAM service and select Roles from the left-hand navigation.
2. Create a new role.
3. Select Lambda and hit Next.
4. Search for S3 and select AmazonS3FullAccess and hit Next again.
5. Give it some tags (this step is optional) and hit Next one more time.
6. Give your role a name. I named mine LambdaS3FullAccess.

Now we’re ready to set up our Lambda function. Navigate to the Lambda service and hit Create function. Leave it on Author from scratch, give it a name, and select Python 3.7 for your runtime.

Inside your Lambda function go ahead and right-click the file tree in the IDE and add a folder called views and create 3 new files: header.html, body.html, footer.html.

Then, go ahead and copy the following code snippets into each file respectively.

Your final code setup should look like this:

The Python code will open each of the HTML files and append the contents into a list (we’re also using a hardcoded list to simulate a list of page content from the database). It will then iterate over the page content and put the HTML partials together along with it. Lastly, it will create a new folder for each page in your S3 bucket and save the complete rendered HTML into an index.html file.

Next, we need to give our function permission to write to our S3 bucket using the role we created earlier.

Finally, we need to add our bucket name to our environment variables.

Now we’re ready to test

Go ahead and Save click the Test button on the top of the page. (The first time you click it you will need to give your test a name and save—the values don’t matter for this part.)

Now, if everything worked as expected, we should see some new objects in our S3 bucket.

If we visit the URL from the Static website hosting card and append /page-1/ to the end of it, we should see something like this in our browser.

That’s all there is to it! This was just a basic example, but we could have included more HTML partials, CSS files, Javascript files, etc.

Happy coding!