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

in this video i’m going to show you how to make a very simple static website using amazon web services lambda functions now a couple things here this is something that you shouldn’t do for like a production website it’s just kind of a fun experiment to go through to get a good understanding of what lambda functions are if you’re not familiar lambda functions are essentially you have a trigger which could be an http response in this case that executes some code on the back end and then a response is returned so they’re considered serverless because you’re not actually hosting anything but you do you are able to make an http request and return a response so.

1 Million Page Views Right to You To

this is all free it’s part of the amazon web services free tier let me go through and show you exactly how to do something like this so i’m gonna go to aws.amazon.com free and in here um if you don’t have an account you can set one up but basically they have these filters by tier and we want to click on always free tier and as you’ll see here aws lambda is always free part of that tier you get 1 million free requests per month okay 1 million and and that could correspond to if you actually do this 1 million page views right to you to whatever type of static website you set up here so.

let’s go through the process of setting that up i’m going to click on that and like i said if you have an account um sign in but it’ll prompt you to do that if you don’t let’s click on get started with aws lambda here so that’s this is what the dashboard looks like for this i’m going to create a function with this orange button up here and we’re going to just call this this will be our home page right our function name is home and you can pick whatever you know language you’re most interested in most comfortable with i’m going to stick with python version 3.9 and there are some advanced settings under here but.

we won’t we won’t do anything under here we’ll just go ahead and create our function now that’ll i guess take a second to load and on the next page here you can see that the function was created it’s called home and this is what it looks like so this is the function that’s gonna exist it’s called lambda handler and it’s basically at this point returning 200 status code with the the body that says hello from lambda this doesn’t do much yet let’s add a trigger to it to allow us to go to a web browser and see this text show up so up here click on add trigger and first time in here we will.

This It’s Going to Be an Http Api

pick api gateway and this is um we will create a new api for this it’s going to be an http api and the security will be open and under additional settings we will keep these as well for the defaults so let’s add that trigger and on the next page you can see that we have an api endpoint with this url so i’m going to copy that and open up a new tab here paste that in and if everything goes good we do see hello from lambda printed out on our page so at the most basic level that is essentially a static website now this isn’t html per se let’s take it a step above and.

return some html code so if we go back here and find our function which is back here a step to our home uh let’s replace the default that they gave us this lambda handler with something that i have uh created over here and i’ll walk you through it it’s a it’s more code than this more than nine lines of code it’s 24 lines of code but essentially we’re doing the same exact thing we have a response down here that’s giving a status code it’s also giving a header that says the the content type is text html and the body looks like this body variable right here which is a multi-line string and if you’re familiar.

with html this is just simple html code so we have an html header right here and the title of that page is home page and then we have the body which has a header one element a paragraph and then an image that links out to my my website and another paragraph that says like comment subscribe so let’s deploy this and that says changes deployed so if we go back now to that same url and refresh the page we should see html returned and we do so we see exactly what we thought uh the header element the paragraph a picture that’s being loaded from my website and then another paragraph element down here so that’s really.

And That’s Going to Be a Relative Path

cool you can actually take this even a step further and have a multi-page website so let’s link out from this page let me see let me copy and paste this code here so after like comment subscribe let’s add another line here that says check out my blog right and that’s going to be a relative path slash blog okay and this doesn’t exist yet but we will create that so let’s deploy that and show you what i’m talking about so we refresh the page we now have this link to blog let’s see where that goes so we’re before i click on that we’re at default home right now click on blog and that’s going to go.

it’s going to give us an error because that page doesn’t exist but that’s going to go to slash blog okay we have the same url it’s going to go to slash blog so let’s make the blog page so back here we will go to our functions create another function this time we’ll call it blog i’m going to use the same python 3.9 and keep all of the same advanced settings so we will create that okay and on the next page we can change the default code here again i’m going to replace this all with my lambda handler and similar to before it’s going to be a body with a header element this is my blog.

Deployed So Let’s Similarly Add a Trigger To

i haven’t written any posts yet and then the same status code and header type of html so we will deploy that and our changes are deployed so let’s similarly add a trigger to this it will be also api gateway and we will use the same http api that we had before uh for deployment i don’t know if we have to specify that but for security we’ll keep it open it’ll tell us if we have to do yeah i don’t know what the difference is between let’s just try the first option here we’ll add that and now you can see that the url that we expected this to go to slash blog is indeed what we.

want so let’s go back to our home page refresh it that still loads properly check out my blog let’s click on that and it does take us to our blog page so header element this is my blog i haven’t written any posts yet so kind of a fun tutorial here you can expand on this as much as you want i just did a two-page website with some images but you can add css javascript all that stuff i won’t show you that in this tutorial because i’m going to keep it simple but have fun with it i got some other amazon web services videos to check out so look at them and if you do i’ll.

See You Over There

see you over there [Music] you.