GatsbyJS: Hosting a Gatsby Site in AWS using S3 and Cloudfront

In this video, I go step by step through the process of setting up hosting for a website built with GatsbyJS on an AWS S3 bucket and a Cloudfront distribution. I use the Gatsby framework in this video to build my website, but the solution that I setup in this video can also be used for any statically generated website..

Links:

Timestamps:
0:00 - Introduction
1:08 - Configuring the S3 bucket.
3:13 - Configuring the Cloudfront distribution.
4:30 - Preparing and uploading the files to the S3 bucket.

Connect:

#gatsbyjs #staticwebsitehosting #s3bucketwebsite

[Darklor_WCF]

This has been the most efficient and concise tutorial on setting up Gatsby this way. I was able to pretty much follow along and set everything up in "real time".

There have been changes to the layout of the cloudfront and S3 interfaces in the past 9 months - which are superficial except for the link for the s3 bucket is not viewable in the bucket creation page, but is viewable in the dashboard after selecting the bucket.

Thank you for making this series!

[jakewalker]

Thanks Phil. This has helped me today.

[dopetag]

Nice one! I'm just getting started. It showed me the way 😉

Thank you!

[nagnathbhat]

you made my learning process simple, thank you

[michaelmcgory]

So good. I hope you keep making videos. I was worried about deploying to AWS, but this video made it simple. But also, I agree with the comment above, please zoom in a little more.

[joshuajones]

Thank you, amazing video! Lot's of value!

[kirky]

Thanks the video was really helpful. Would be even better if the tutorial showed how to deploy to the s3 bucket using gatsby-plugin-s3.

[ranopriyo]

It will be great if you make a video to add Authentication using Cognito and hosting on Amplify for Gatsby.

[tallfescue]

Thanks for the great tutorial! It helped me a lot!

As a viewer, I felt it would be easier to follow if you slow down just a little bit, and get a better audio setup.

[TahaCrafter]

Thanks for this awesome video, very helpful...
I have one question, I don't have experience with aws, so my question is: How much bandwidth you can get for free per month when using s3 and cloudfront? and how does aws charge you? is it per bucket/bandwith/GB/etc... ?

[lovegovindasat]

This works but leaves the bucket open to indexing. It is my understanding that it is better to use the REST endpoint. Please advise. Thank you!

[fedegoeswoods]

thanks, very interesting! just a suggestion... could you zoom in your windows a little bit more? would be nice to see better :)

[jasonhan]

since static sites don't need servers, isn't it easier to hose it on github/netlify? Are there any reason to use AWS? Also, don't you need to pay for hosting if you do it on AWS?

[tensazangetsu]

When I try to upload the files into my bucket it doesnt upload folders only the files within my folders but I have like a hundred folders and can just click through each? Solution?

[dopetag]

I've been getting "403 permission denied". Solved it with
Principal: "*"
in
Policy Editor.

[muhammadshahzadali]

Hey I'm facing the issue with the urls.
routes working fine but after refreshing the page cloudfront return the some sort of XML page
e.g "app.com" and I go to on contact "app.com/contact" it's working ok but when I refresh the page it's not working

[michaelmcgory]

Hello Phil, I have followed this amazing tutorial to upload a few gatsby sites on AWS. Recently, I got a message from AWS something about AWS migrating some of their services. Does this affect how you have deployed in the tutorial? The first paragraph from AWS is below:

"This is a reminder that Amazon Simple Storage Service (S3) and Amazon CloudFront are both migrating their services’ certificates from DigiCert to Amazon Trust Services starting March 23, 2021. If you do not send HTTPS traffic directly to your S3 bucket, or only use custom domains like www.example.com with your CloudFront distribution, then there is no impact and you can disregard this message. If you do send HTTPS traffic directly to your S3 bucket, or use CloudFront domains covered by *.cloudfront.net, please continue reading and review the FAQ below on which certificates are migrating."

[mateuszgruzla]

How do you set CSP headers in AWS for Gatsby site?

[josephmiller]

Hey great video, i'm having an issue where any route results in an access denied error. I tried setting the error pages to redirect back to index.html as was suggested by some tutorials, but no luck then an route like mysite.com/new-page redirects back to the home page. Any ideas?