
Hosting your static site with AWS S3, Route 53, and CloudFront for free - startupflix
https://vickylai.com/verbose/aws-static-site/
======
Zaheer
This isn't really free - it's just free for first year until your free tier
runs out. It's still super cheap though. I host several sites with this setup
and never have a bill over $2 / month. Benefit of this setup over github pages
/ netlify / etc is it uses standard primitives and will always exist. I used
to use Heroku to host several sites and had to go through a massive migration
when they stopped offering a free tier.

~~~
billrobertson42
The odds are good that it will "always" exist, not really always of course but
long enough that we don't care. However, Amazon may come to the decision that
it's not worth keeping this low spending tier of customer and price them out
of the service.

Hopefully, it's a good enough of a hook to get you started on AWS that it is
worth it to keep it cheap like it is now.

~~~
Zaheer
>Amazon may come to the decision that it's not worth keeping this low spending
tier of customer and price them out of the service.

Given the downward pricing trends of cloud providers for past few years as
well as increased competition (Azure & GCP primarily) I think we can safely
assume pricing tiers will remain reasonable.

------
flother
The article's from December 2017 and you can see from the response headers
that it's hosted on GitHub Pages again.

There are plenty of gotchas when serving a static site via CloudFront. Let's
say you have a page at example.com/foo/index.html. If you want it serve it
from example.com/foo/ then you need to write a Lambda@Edge request function to
handle the directory index — the article implies that CloudFront's default
root objects handle this, but they don't. That's for the domain root only.

There's also the case of redirecting example.com/foo to example.com/foo/
(adding the trailing slash). That requires a Lambda@Edge response function.
It's all a lot of fun to get working, but you do start to wonder if your
static site really is static.

~~~
fallenhitokiri
Both problems you mentioned are solved by using S3 configured to serve the
buckets contents as static site as origin for CloudFront.

While it’s not strictly CloudFront only doing the work, it’s still a static
site.

~~~
flother
Ah, that explains it. I store my websites in private S3 buckets, and give
CloudFront access using an IAM policy. I must need to jump through extra hoops
because of that.

------
roadbeats
If this post gets very popular, we might see a second post from same author
titled "How CloudFront charged me 300$ in one day?" :)

~~~
kostarelo
"Lessons learned from hosting my personal website on AWS"

------
alban23
Nice post. You can go one step further and automate most of the process with
CloudFormation [1].

I also switched some time ago from Gitlab to CloudFront and S3 because it lets
me optimize things that get you to 100% at Pagespeed Insights [2] such as
Cache Control.

[1]
[https://correctme.ifiamwrong.com/posts/cloudfrontcloudformat...](https://correctme.ifiamwrong.com/posts/cloudfrontcloudformation/)
[2]
[https://developers.google.com/speed/pagespeed/insights/?hl=e...](https://developers.google.com/speed/pagespeed/insights/?hl=en)

------
dewey
Or just use Netlify or Github pages that also do that for free now and are as
simple as pushing to your linked repository.

~~~
tootie
I'm using Firebase hosting right now and it's super easy. Connected my own
domain and adding a cert is just a checkbox. They don't do the DNS though, but
that part is pretty simple. Just register on namecheap and add some A records.

------
always_good
I liked CloudFront until I realized that getting DDoSed also DDoSes your
wallet.

~~~
derefr
.

~~~
andrewaylett
CloudFront is AWS's CDN product, and is charged on volume. CloudFlare is a
separate company that sits in a similar place in your service map, but is very
differently priced.

~~~
derefr
Oops, I misread, sorry!

------
amingilani
Shameless plug, but if you're trying to avoid eating into your free tier, I
documented GitHub pages + Cloudflare for the same effect. Just turn your
Cloudflare cache to super high, and GitHub shouldn't ever get any real load.

I gave an example of running a React app[1]

[1]: [https://www.toptal.com/github/unlimited-scale-web-hosting-
gi...](https://www.toptal.com/github/unlimited-scale-web-hosting-github-pages-
cloudflare#contract-just-respected-software-architects)

------
erncl
Sorry, these are terrible instructions. It would be good if someone with more
experience could take another stab at this.

~~~
Blackstone4
Check out the Servless Stack guide. I used it to deploy my React app.

[https://serverless-stack.com/chapters/deploy-the-
frontend.ht...](https://serverless-stack.com/chapters/deploy-the-
frontend.html)

------
davidjnelson
If you use cloudflare instead of cloudfront and route53, you don’t have to pay
the $.50/mo for dns, but much more importantly you get free bandwidth from
cloudflare, and will pay next to nothing in s3 costs if you cache liberally
with cloudflare at the cdn level.

------
bitmapbrother
Requires a credit card to setup and you will be charged if your usage exceeds
the free tier limit.

 _Please type your payment information so we can verify your identity. We will
not charge you unless your usage exceeds the AWS Free Tier Limits._

------
scarface74
Your website doesn't have to be static to host it for free on AWS. You can do
server side stuff with Lambda and if you can get away with the 128MB instance
(easy enough to do for one function) you get 1 million request a month for
free and 888 hours of processing time.
([https://aws.amazon.com/lambda/pricing/](https://aws.amazon.com/lambda/pricing/)).
The free tier for Lambda doesn't expire.

The only free hosted database that I am aware of is Mongo Atlas a 3 Node
cluster with 500MB oh storage.

~~~
CSDude
But wouldn't ApiGateway will be more expensive than Cloudfront+S3?

~~~
scarface74
Good point, API Gateway is $3.50 per 1 million requests after the first year.
Data out is .09 - .12 per gigabyte depending on the region.

------
joobus
This setup isn't free. The title is misleading.

------
andrewkslv
Why this stuff so complicated? Previously AWS has a link on the homepage where
you could run a static website in couple clicks [1]. Now they removed it.

[1] [https://console.aws.amazon.com/quickstart-
website/home](https://console.aws.amazon.com/quickstart-website/home)

------
fsiefken
If it's low bandwidth and you have your own ip address you could also host on
your own internet connection.

~~~
bdcravens
Ignoring the party that is keeping your server up etc, don't most ISPs block
80/443?

~~~
Zekio
I think that depends highly on which country you are in, I've never
experienced this in Denmark before

EDIT: and I've used pretty much all the ISPs we have around

~~~
StudentStuff
Same here stateside, neither Comcast, Centurylink, Cox, Charter, Wave, Verizon
or Frontier blocks port 80 or 443. Some do block mail ports 25 & 587, Comcast
& Centurylink leaves these mail ports open unless you do some spamming (then
you have to call and have 'em unblock them).

~~~
jdofaz
Cox has blocked port 80 for residential customers for a long time, probably
since around when @home went away.

[https://www.cox.com/residential/support/internet-ports-
block...](https://www.cox.com/residential/support/internet-ports-blocked-or-
restricted-by-cox.html)

They don't block 443 though

------
xz0r
Also make sure to set X-Frame-Options appropriately to avoid clickjacking! It
is not set by default.

------
minicoolva
I'm using firebase hosting and netlify

