19 ms·

Building a static serverless website using S3 and CloudFront

257 points by SanderKnape 7y ago

tobilg 7y ago
I struggled with setting up static website hosting on S3, CloudFront, Route53 and ACM, so I created https://github.com/tobilg/serverless-aws-static-websites https://github.com/tobilg/serverless-aws-static-websites to automate this via the Serverless framework
lunias 7y ago
Did the same for my personal site. Really happy with the result: https://ethanaa.com/blog/conversion-to-static-site-with-vuepress-and-aws-s3/#amazon-route53 https://ethanaa.com/blog/conversion-to-static-site-with-vuep... I also wrote follow up posts on adding document search: https://ethanaa.com/blog/document-search-with-algolia/ https://ethanaa.com/blog/document-search-with-algolia/ And continuous deployment: https://ethanaa.com/blog/continuous-deployment-with-circleci-and-s3deploy/ https://ethanaa.com/blog/continuous-deployment-with-circleci...
vagab0nd 7y ago
Why isn't this the 3rd option: Set the S3 bucket private and give CloudFront access to it. I've been using it for a while and it seems to be working.
meritt 7y ago
It's amusing to me how programmers look back with disdain at web development in the 90s and how "you just uploaded files to a FTP server" and now we've circled back to the same thing, just with a whole lot more plumbing in the middle.
- WrtCdEvrydy 7y ago
  But it's AWS-branded plumbing now!
  - znpy 7y ago
    it's in the cloud!
- awb 7y ago
  For me, Netlify is the right mix (I'm not affiliated with them). It has the 90s ease of use with modern tools and performance out of the box. It's simple to upload files or sync a repo and it it's free. I'm not sure why anyone would host a static website on the AWS stack.
  - xienze 7y ago
    > I'm not sure why anyone would host a static website on the AWS stack. Well, I do that, so I guess I'll chime in. First and foremost is the idea of not tying your site's build process and hosting to a company that could go under. Yes, Amazon could, but if I had to bet Netlify will either cease to exist, be bought out, have its free offering discontinued/changed/etc. long before that. Second is that sometimes your site's build process is more complicated than what Netlify provides. For example, my site is a static Hugo site, which Netlify supports, but there's one crucial step in the build process where I turn my "resume.html" page into "resume.pdf" -- I have to run a Docker image that starts headless Chrome in order to render the PDF properly. As far as I can tell, that can't be rigged up in Netlify. Finally, I was able to learn a lot about AWS by hosting my site this way -- setting up a Lambda to listen for GitHub commits, using the AWS API to launch an EC2 instance to build my site, how to configure S3 and CloudFront to serve up content properly, etc. And at the end of the day I get a site that I have complete control over and is approximately free to run.
    - mprev 7y ago
      Who is downvoting this? It seems to be a polite answer to the question asked.
      - meritt 7y ago
        I didn't vote on the comment but it came across to me as emblematic of what I feel is "wrong" with technology trends over the past decade. Where instead of solving business problems it's mostly building tools on top of tools or reinventing the wheel in the latest language/ecosystem. Programmers rarely produce anything of value anymore, but instead parade around their mastery of an increasingly complex toolchain that delivers the same end result.
- animalgonzales 7y ago
  and buckets of cash for amazon...
- daxfohl 7y ago
  And there seems to be a rash of "whoa I stumbled on my old site's url at {90's hosting provider} and it is still up and running after all these years" comments lately. (And loads instantaneously with no UI framework).
  - Frost1x 7y ago
    Tech suffers significantly from memory loss. To be fair, when you dive deep into complexity, it's easy to get lost in the weeds. The trick is to remember what you're doing and why you're doing it so you don't lose sight of goals while chopping through the complexity jungle.
- rolltiide 7y ago
  that is comical but doing what is described in this post in the 90s would have required load-balanced tower PCs strategically located all around the world, with another few computers acting as a load balancer, all maintaining copies of the website and cached server responses, and an expensive SSL certificate we get all that for free now or 50 cents a month, just for static websites there is almost no comparison, except for acknowledging that the plumbing sucks, all of which you can make better if you want.
- saagarjha 7y ago
  > programmers look back with disdain at web development in the 90s and how "you just uploaded files to a FTP server" Since when? I thought most people liked the simplicity and low barrier to entry…
- zeroxfe 7y ago
  It's amusing how quickly people forget how bad FTP was -- complex connection setup made it difficult to proxy, lack of encryption made it easy to sniff, managing FTP accounts was really hard without sophisticated auditing and management tools. SSH/SFTP helped a lot on the security front, but even for small companies, it's way easier to use cloud buckets than FTP.
- zelly 7y ago
  Yes but this time instead of FTP...it's a git remote! Progress!
simonw 7y ago
How is this so complicated? I shudder to think of the amount of developer hours wasted by the weirdness and complexity of AWS. Really wish they would prioritize usability and developer experience.
- deleted 7y ago
  [deleted]
- nsporillo 7y ago
  I have my personal website deployed to S3 and my DNS in Route53 with a Travis CI commit hook that will upload my files and update the permissions automatically when I push changes to Github. Only costs ~$27/year to have a domain($15) and a static website deployed to S3/R53 ($1/month), which I've found to be fairly reasonable for the level of reliability I can expect. I admit it is complicated up front but once it is setup and updates are automated it is really nice to not need to worry about self hosting, hardware, VPS', etc just for a simple website.
  - Gys 7y ago
    > push changes to Github Or create an organisation on Github and publish this website as a Page. It is simple and it is free.
    - nsporillo 7y ago
      Certainly not a bad idea, but in my case I care to own the domain because I also use it when naming Java packages for the projects I write. Since I'm already paying for the domain, I figure I might as well use it for my actual website too. I've found S3 and Route53 to be the most cost effective for my particular use case.
      - Gys 7y ago
        It is easy to connect your own domain to a Github Page ;-)
      - 7y ago
deleted 7y ago
[deleted]
mlmitch 7y ago
The complicated stuff seems predicated on this: “However, the S3 website endpoint is publicly available. Anyone who knows this endpoint can therefore also request your content while bypassing CloudFront. If both URLs are crawled by Google, you risk getting a penalty for duplicate content.” I’m curious if anyone has experienced these issues in practice.
- lawik 7y ago
  I run the setup of S3 + Cloudfront and never ran into their index problem because I'm not trying for URLs without document file extensions. I assume that's the reason for really wanting index redirect in directories. Pretty URLs, I didn't feel the need. There are other valid reasons too I'm sure. But my needs diverged from the article even earlier than SEO penalties.
  - mlmitch 7y ago
    The pretty URLs thing is confusing me now too. AWS lets you configure the buckets to do the pretty URLs. https://docs.aws.amazon.com/AmazonS3/latest/dev/HowDoIWebsiteConfiguration.html https://docs.aws.amazon.com/AmazonS3/latest/dev/HowDoIWebsit... https://docs.aws.amazon.com/AmazonS3/latest/dev/IndexDocumentSupport.html https://docs.aws.amazon.com/AmazonS3/latest/dev/IndexDocumen... I put up a Jekyll site on s3/cloudfront recently and it seems to work well. Anyway, I’m still wondering about the consequences of the naked s3 endpoint being available.
- jeffadotio 7y ago
  CloudFront has one-click direct bucket access restriction.
- tyingq 7y ago
  You can specify the canonical url in the HTML. Then it's not an issue. https://support.google.com/webmasters/answer/139066?hl=en https://support.google.com/webmasters/answer/139066?hl=en
ehonda 7y ago
Host a static website the HN way: 1. Buy the cheapest most unsustainable VPS ipv4 deal out there. 2. Make A record and WWW record and point domain to your new fangled server. 3. Configure server: apt-get install nginx goaccess cd website cp * /var/www/html Yearly maintenance required: apt-get update, apt-get upgrade reboot View traffic stats: goaccess -f /var/log/nginx/access.log
- dragonwriter 7y ago
  > Buy the cheapest most unsustainable VPS ipv4 deal out there. [...] > Yearly maintenance required: Well, presumably, find the new cheapest, most unsustainable VPS ipv4 deal, the previous one not having been sustained.
- nsporillo 7y ago
  The last time I tried to maintain a personal VPS I was using it for a Jenkins build server so users could obtain the latest artifacts of some open source programs I work on. That burned me after it got exploited using a Jenkins RCE and a bitcoin miner was installed on the VPS. Also, the cheapest VPS you can find likely won't ever achieve the level of scale your static website in S3 could achieve. In the rare event you get a lot of web traffic, you're only hosed if AWS is hosed.
  - capableweb 7y ago
    You gotta receive a ton of traffic for Nginx to stop serving static files. I'm pretty sure most of the static websites today could survive on a lite Nginx vps with minimal tuning. Also, i rather have my server go down than to receive a larger bill from aws, but that all depends on your use case obviously
    - nsporillo 7y ago
      Yeah this is probably true, I've never actually had a nginx instance be overwhelmed myself. I just don't know how much I trust VPS providers that aren't charging a premium $5+/month to deliver quality reliable performance. The best part of S3 + Route53 is your costs are basically constant. $.50 a month for the hosted zone and then you pay pennies on the dollar for GBs of data transfer. In theory your bill could balloon if you had a hefty static website or some big files left public in your buckets and someone constantly downloaded it.
dayjah 7y ago
I’ve had to do this multiple times over the past two years. It’s always a shock to me how hard it is. The Lambda@Edge functions especially. They have 4 phases they can be injected into: viewer-request, origin-request, origin-response, and viewer-response. If you put your code in the wrong place you get hard to debug issues. Additionally you cannot “annotate” a request, so a decision at say “viewer-request” cannot pass information to later stages. Also, deployments take 15 minutes at least which just further frustrates the debugging process.
- jjoonathan 7y ago
  Every AWS service is shockingly crusty. Even after spending years on AWS calibrating my expectations downwards, it regularly finds ways to surprise me. I know, I know. For developers it beats obtaining permission every time you want to spend $5/mo on some plumbing and for managers it beats getting fired because you chose Google cloud and they canceled it the next year. Still... ugh.
- loevborg 7y ago
  I totally agree. CloudFront is maddeningly anemic, with hacks required to do the most basic things. Nginx/Varnish configuration is bad but CloudFront is worse. I wonder how much better competitors like Cloudflare and Fastly are.
- eastbayjake 7y ago
  This was actually one of my most delightful experiences with Azure Functions and Microsoft's API Management solution - overhead does not make it the right fit for every serverless architecture, but it did make orchestrating functions in this way a lot easier
  - nostrebored 7y ago
    Thanks for this comment! I know what the next side tech I'll play around with will be :)
- zackbloom 7y ago
  Have you tried Cloudflare Workers and Workers Sites? I believe they fix both issues.
welder 7y ago
It's much simpler to use GitHub Pages + Cloudfront (optional).
- abstrct 7y ago
  Ya, I'm trying to understand what the downside to github pages is compared to this strategy. Can anybody elaborate on what I might be missing?
  - philistine 7y ago
    I’d rather be a paying customer and know I’m not going to lose my setup because of some reason.
    - abstrct 7y ago
      That's absolutely a valid reason. All my static sites are not generating income and don't need support. I've also got my own backups, so if GH decides I shouldn't be there I'm not losing much. If a site is important to your business then support is certainly more critical. Thanks for the very valid counterpoint!
gitgud 7y ago
What benefits does this have? in comparison to much easier solutions like; Netlify, Github Pages etc..
simlevesque 7y ago
You should use Amplify, it solves allk those problems.
- desas 7y ago
  I use AWS Amplify, it makes all of these headaches go away and it's ridiculously simple to configure. 1. Add your domain in AWS Route 53 2. Tell it which git repo & branch you want to use (including private github ones) 3. It detects the repo contains a hugo site (works for other ssg) and generates a build script So now every time I commit to my selected branch, Lambda is notified, it fires up a vm to generate the html, move it into S3 and takes care of Cloudfront, SSL & so on.
davidweatherall 7y ago
For anyone who is hosting .html files and doesn't want to have to put index files inside directories, the "trick" with s3 is to rename the file to the name without the html extension, and change the Content Type to text/html. Earlier today I modified the popular jakejarvis s3 sync github action to allow for this during my CI/CD process. https://github.com/davidweatherall/s3-sync-action https://github.com/davidweatherall/s3-sync-action
- tomcam 7y ago
  Thanks for sharing that. Nice repo! Can you explain why I wouldn't want an index file in a directory? I assume you mean index.html?
  - davidweatherall 7y ago
    I do mean index.html! Personally I prefer the url structure of example.com/about as opposed to example.com/about/ - especially when adding on anchors or parameters (example.com/about?param as opposed to /about/?param). Relative pathing can be useful depending on file structure. It avoids issues with directory / page naming conflicts. E.g. my images are stored at /assets/img/image.png - but if I wanted to create a page at example.com/assets this would require me to then place an index.html inside my assets directory - which doesn't seem logical. Overall, mostly personal preference of me disliking the index.html inside directory method - It just doesn't seem like it's the "right" way to access a page. If I have a example.com/about page - I expect them to be hitting an about.html file.
- ____hacker____ 7y ago
  I feel dumb after reading this. So easy. Thank you.
- datashaman 7y ago
  Vendor lock-in is real - why not just generate an index.html file? Then you don't need to hack anything and your files are portable. index.html will work anywhere.
svnpenn 7y ago
I see you are using Hugo 0.62.1 https://sanderknape.com https://sanderknape.com FYI starting with 0.63.0 the speed has about doubled: https://github.com/gohugoio/hugo/releases/tag/v0.63.0 https://github.com/gohugoio/hugo/releases/tag/v0.63.0
- dewey 7y ago
  Is the speed it's taking to building the static site usually a problem? I don't recall ever waiting for it to be done. Maybe my site is too minimal to see a difference (https://annoying.technology https://annoying.technology).
  - weego 7y ago
    No, circle goes from clean state to npm install, scss compile, drags content from contentful and then runs the Hugo build and upload to S3 in under 30 seconds for our site. Most of the time is npm flaffing about.
  - heinrichhartman 7y ago
    I have compile times of >30 seconds with Jekyll blog [1,2]. This is an issue. It adds a lot of friction to the edit/preview loop. BTW: I just moved it to Netlify since reading this thread. Took me ~5 minutes. [1] https://github.com/HeinrichHartmann/HeinrichHartmann.github.io https://github.com/HeinrichHartmann/HeinrichHartmann.github.... [2] https://www.heinrichhartmann.com/ https://www.heinrichhartmann.com/
    - dewey 7y ago
      FWIW I'm getting a "certificate does not match *.netlify.com" SSL error on your site.
coolsunglasses 7y ago
Here's my terraform-ization of an S3 + Cloudflare setup for SSGs. I use Zola but that's incidental. https://gitlab.com/bitemyapp/statically-yours https://gitlab.com/bitemyapp/statically-yours There's a weird bug with the `tf init` but it can be worked around by running `tf init`, deleting the providers in `.terraform`, then running again. Hashicorp has an open bug for the problem I think. I could probably clean it up more but this has been okay for a couple sites I run.
jeffadotio 7y ago
I recently wrote a detailed tutorial on dirt-cheap professional hosting with AWS. It may be useful to anyone that found this article informative. https://jeffa.io/tutorials/inexpensive_aws_hosting.html https://jeffa.io/tutorials/inexpensive_aws_hosting.html
rexreed 7y ago
Can someone please provide practical advice on moving from a site hosted on Wordpress using all the plugins to a static hosted site? It seems unbelievably complicated. My non-technical employees and partners like Wordpress. We like the plugins that make web development easy and not arcane. But we don't like the fact that every page requires basically a database read. Yes, we use WP-SuperCache, and it's ok. But why oh why is it so hard to do the editing on Wordpress and the publishing on a Static site? Anyone with some real guidance here? We want the people who come to the site to get the static experience while the people who edit the site to get the Wordpress experience.
- oconnore 7y ago
  In a previous life I worked on a site that had a private Wordpress instance that was scraped and cloned to a more or less static site. You can either do this explicitly using a small scraper tool, or implicitly using aggressive reverse-proxy caching rules.
  - rexreed 7y ago
    Sounds pretty intensive. Every page would need constant scraping as links update and sidebars change, wouldn't they?
    - oconnore 7y ago
      I think you might be overthinking it. Just drop cache after publishing. Maybe you’re doing something more complicated that isn’t amenable to pseudo-static?
- BossingAround 7y ago
  > Can someone please provide practical advice on moving from a site hosted on Wordpress using all the plugins to a static hosted site? It seems unbelievably complicated. Oh I'm sure it is. Static website is just that--static. You don't have a database, and that is a great thing, but that also means you can't store stuff like users, comments, articles to be published in the future, etc. out of the box. You can do all of that of course, but it's going to be difficult, and you're gonna plug non-static parts to your static website (such as plugging the comments part). All in all, you can't expect to have all the advantages of static websites as well as Wordpress. I personally simply took my content from Wordpress and built a new website with gatsbyjs. It's fast, clean, and entirely in React + Typescript. It has no dynamic parts, though. If you're a business and your Wordpress site is production critical, who knows, you might not want to migrate. You might also want to explore alternative solutions, like split some parts of your Wordpress blob into several static websites, and keep the main WP site with less content that's easier to manage... There are a number of possibilities.
jposer 7y ago
this was literally what I was doing today and if I'd just checked hacker news it would have saved 3 hours of faffing with Lambda
shapeshed 7y ago
Deploying static sites is the original and best candidate for engineers overengineering
manigandham 7y ago
Static sites are overrated for most cases. Often you still need a backend for editing with non-technical folks or just easier handling of media, etc so you're now running a server-side instance of some blog or CMS while adding a whole new detached frontend layer. With things like Cloud Run that can run a container on-demand for every request, it's easier to just stick with regular Wordpress or Ghost server-side stacks.
- saagarjha 7y ago
  > Static sites are overrated for most cases. Often you still need a backend for editing with non-technical folks or just easier handling of media, etc so you're now running a server-side instance of some blog or CMS while adding a whole new detached frontend layer. Not for my blog.
  - manigandham 7y ago
    most sites. If you're editing markdown files with only text and running a simple convert to html then it'll work fine, but ghost/WP in a container would work just as well.
- zelly 7y ago
  > Cloud Run that can run a container on-demand for every request People will bounce back. It will take far too long to load. The point of a static site on a CDN is speed. If your goal is to get outside visitors, then you definitely do not want to do this. I can understand Cloud Run for demoing small apps though.
  - manigandham 7y ago
    Cloud Run just pauses the CPU, the container is still fully loaded and resumes very quickly. You can also cache the pages with a CDN.
calvinmorrison 7y ago
I would like to just mention that github does static site hosting for free. I have used it for a few years. Never had a problem. Static, Free, probably not going out of business in the next 5+ years, domain is my only cost.
- saagarjha 7y ago
  And they can probably handle your traffic, too!
- JoshTriplett 7y ago
  True, but they reserve the right to prohibit sites that use up a non-trivial amount of bandwidth, or that have commercial purposes, or various other reasons. It's a great service, but I wouldn't count on it as your primary hosting.
- riffic 7y ago
  Many providers do free static hosting: https://www.slant.co/topics/2256/~best-static-website-hosting-provider https://www.slant.co/topics/2256/~best-static-website-hostin...
- tpush 7y ago
  You don't get TLS certs for both apex and www subdomain from GitHub though. https://github.com/isaacs/github/issues/1675 https://github.com/isaacs/github/issues/1675
- agumonkey 7y ago
  are there free domain name (even it exotic) still ?
k__ 7y ago
Amplify really eases the pain with this.
philfreo 7y ago
> The redirect logic provided by the S3 website endpoint can be moved to a Lambda@Edge function. The post here is using Lambda@Edge to handle pointing example.com/about/ to example.com/about/index.html However there's a lot more you can do / may want to do with Lambda@Edge if you're hosting a Cloudfront+S3 website. I just wrote up how I set up a system to make managing server-side redirects (e.g. 301s from /old-page to /new-page) easier via Lambda@Edge. https://news.ycombinator.com/item?id=22351484 https://news.ycombinator.com/item?id=22351484 https://engineering.close.com/posts/redirects-using-cloudfront-lambda-edge https://engineering.close.com/posts/redirects-using-cloudfro...
- jillesvangurp 7y ago
  I did some redirects without lambda's last year using s3 routing rules, which kind of worked. As figuring out this and several other things, I also wrote up some details on this. https://dev.to/jillesvangurp/using-cloudfront-s3-and-route-53-for-hosting-395o https://dev.to/jillesvangurp/using-cloudfront-s3-and-route-5... IMHO, Amazon should be ashamed of themselves for making it so unbelievably convoluted and hard to host a simple website on cloudfront. It's the one thing almost every website out there has to solve and they made it super painful to get this right.
heavyset_go 7y ago
Just use Netlify, it's free, you can hook it up to a GitHub repository and they'll handle your Let's Encrypt certs for you.
- oxplot 7y ago
  Just use Github pages, supports TLS, CNAME and is free.
  - heavyset_go 7y ago
    Netlify does DNS and can serve from private repos for free. Not sure if GitHub changed their policy, but last time I looked, if you wanted to serve from a private repo, you needed to have a Pro plan.
    - yyhhsj0521 7y ago
      That's not true (at least not anymore). Now that Github offers free unlimited private repos, there's no difference between public/private ones.
      - trazire 7y ago
        No, it is still true. From https://help.github.com/en/github/working-with-github-pages https://help.github.com/en/github/working-with-github-pages > GitHub Pages is available in public repositories with GitHub Free, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server. For more information, see "GitHub's products."
        yyhhsj0521 7y ago
        Ah, I guess it's because I'm on Github Student.
      - heavyset_go 7y ago
        Cool, that's good to know.
chindtooo 7y ago
Use google Cloud Run though I love Netifly.
brown9-2 7y ago
One thing that these guides on using S3 never mention is to make sure to set alerts if the cost of the bucket grows too fast, i.e. your site gets popular.
spectramax 7y ago
What's wrong with old school apache server running on a $5/month DigitalOcean droplet?
- miguelmota 7y ago
  I've been running my personal blog and many other micro-sites on a $5 DigitalOcean droplet for years. It's seriously the best bang for the buck.
chindtooo 7y ago
I prefer Google Cloud Run and it need not be 100% static though it should be stateless.
oxplot 7y ago
Still can't do the same without paying hourly for a load balancer on Google Cloud. C'moon Google!
ttoinou 7y ago
Anyone knows how I could measure website performance all over the world averaged across multiple runs both for webpage and downloading huge file (100Mo) ? To verify that the CDN is indeed faster than my current hosting solution
m82labs 7y ago
I found s3 + cloudflare to be a better combo. Cloudflare offers free ssl certs and has overall been a great experience. I also use AWS SES for my domain mail. It gets delivered to S3, then a local python script grabs it and dumps it in a mailbox file for dovecot to serve via imap. I pay $0.05/month for my hosting of my site and email. https://markw.dev https://markw.dev
- divbzero 7y ago
  Or GitHub Pages + CloudFlare. And as another comment mentions, GitHub Pages now offers HTTPS certificates [1] for custom domains, so GitHub Pages alone is sufficient for most static websites. [1]: https://github.blog/2018-05-01-github-pages-custom-domains-https/ https://github.blog/2018-05-01-github-pages-custom-domains-h...
  - m82labs 7y ago
    I started there but didn’t like having my drafts and unfinished ideas visible in the repo. I now maintain my site in a private repo and publish to S3. Not sure if that’s possible now in Github or not.
    - jorge-d 7y ago
      You can have a private repo hosting github pages, I'm using it for my personal website
      - StavrosK 7y ago
        Are you paying for it? It sounds like a great solution if it's available on the free tier.
        chipsa 7y ago
        GitHub provided private repos to everyone after Microsoft bought them. And I don't know why it'd require the repo to be public to do the pages...
pansa2 7y ago
Are there any guidelines for controlling cost when running a static website on S3+CloudFront? Say my regular bill for this setup was $5 a month. Can I at least get a notification if I have a lot of visits and the bill goes over a threshold, say $50? Also, is there any protection against things like DDoS that could quickly push the bill into the $100s and beyond?
- avip 7y ago
  aws (and all other cloud providers I've used) has a pretty elaborate cost alert system.
  - jfkebwjsbx 7y ago
    Alerts do nothing to stop a huge bill.
    - justasitsounds 7y ago
      You can use a lambda function that is triggered by a cloudwatch alarm when your bill approaches an arbitrary limit. What you do in response to such an event is entirely up to you
SkyMarshal 7y ago
What are good ways of managing your content with a static website? For example, say you want a single index.html file, with each article contained in a separate content file - "blogpost01.html", "blogpost02.html", etc. - that you somehow include in the <body></body> of your index file? Is there any way to do that with a static site, or something similar where your content is separated out into individual files?
- hunter2_ 7y ago
  Use a static site generator. The parts you touch for authoring posts will end up "included" during the build step, producing files that you don't touch which each redundantly contain the common markup. Or with an SPA generator like Gatsby, there wouldn't even be any redundancy (but client side JS is required).
  - gravitas 7y ago
    One example of the above is PyKwiki: https://github.com/nullism/pykwiki https://github.com/nullism/pykwiki
actionowl 7y ago
We've also been using S3 + Cloudfront for our static website, it's super cheap and has been low touch. We've run into two things though: - We have very little control over TLS versions and cipher settings. - We have to use a CNAME so we can't point a bare domain at it which also means we can't add our site to the HSTS preload list (I think there is a way to purchase an IP though now, if anyone knows please let me know). Overall totally worth it though.
- jbourne 7y ago
  On your point about using CNAMEs - if you have the domain set up with Route 53, you can create an A/AAAA alias record on the domain apex pointing to CloudFront.
Thorentis 7y ago
I don't work for them or anything, but I've honestly found Netlify to be the absolute easiest solution for static site hosting. And it's free! There are some paid features, but the free stuff is all you need. You can use SSL, accept form inputs through request capturing, automate deployments with Github/Gitlab hooks, auto generate static pages for most popular static site generators (Jekyll, Hugo, etc.) Absolute breeze to use. Beats any hacky AWS solution hands down imo.
- bachmeier 7y ago
  Actually came here to ask the advantage of something like this over Netlify. I gave up midway through the article because I couldn't figure out the point.
- StavrosK 7y ago
  Agreed, Netlify is fantastic. Another thing I really like, though I wouldn't really recommend it for corporate sites (but I would recommend it for personal sites because of the community/purpose) is Gitlab + Neocities. I use Gitlab CI to build my site, rclone to copy it to Neocities, and that's it. Very simple, no-hassle combination with loads of bandwidth (I think my paid account has 3 TB/mo).
  - lucasverra 7y ago
    I enjoy it so much (since 2017) that i'm going to london Jamstack !
- miguelmota 7y ago
  I love Netlify as well; it's dead simple and works out of the box. Occasionally I do run into issues where the builds get 'stuck' and never processed, so I have to manually cancel the build and re-run it. I've also had Russian users tell me that Netlify is sometimes blocked in Russia and can't access the sites but it may sporadic.
  - paranoidrobot 7y ago
    From your link: > No, netlify.com is probably not blocked in Russia. Yet. > Details: > URL http://netlify.com http://netlify.com > Domain netlify.com > IP 134.209.226.211 Is it intermittent? Also, any idea why they would be blocked, or is that part of the problem?
dave_sid 7y ago
What I’ve gleaned from this thread is that in 2020 there are a thousand easy ways to host a static website. Just take your pick and go with it.
- woutr_be 7y ago
  And for every way, there will be 10 people who will call you names for doing it this way, and that you should really do it another way. Just do whatever makes sense for you.
interestingsoup 7y ago
Great article!
misterbrian 7y ago
Since we are all sharing how to deploy static sites, here's my approach using CloudFormation to build a static site with S3, CloudFront, Certificate Manager and Route53. https://gitlab.com/verbose-equals-true/django-postgres-vue-gitlab-ecs/-/blob/develop/cloudformation/infrastructure/static-site.yaml https://gitlab.com/verbose-equals-true/django-postgres-vue-g... and here's how I deploy that site with GitLab CI. https://gitlab.com/verbose-equals-true/django-postgres-vue-gitlab-ecs/-/blob/develop/gitlab-ci/aws.yml#L29 https://gitlab.com/verbose-equals-true/django-postgres-vue-g... Also, nobody mentioned GitLab pages which offers some pretty nice static site solutions as well.
- nostrebored 7y ago
  Nice solution! If you're interested in a code based solution, this is one space where the CDK really shines. OAI, CloudFront Website Distributions, and Route53 AAAA records to the distribution are all turnkey constructs. Deployment is just executing 'cdk deploy'. If your CFN gives you headaches ever, maybe take a look
  - misterbrian 7y ago
    Thanks, I'm interested in learning a code-based solution. I like the ideas behind CDK, Pulumi and Terraform, but I feel like they all have trade-offs. CFN isn't the best, but I don't look forward to having to re-implement my entire tech stack to achieve the same result compared with what I currently have
Animats 7y ago
Why is this "serverless"? It's just rented server capacity on a shared host, right?
- travisjungroth 7y ago
  Yes. “Serverless” is an overly strong term that means you don’t even have a dedicated portion of a server.
- nostrebored 7y ago
  Serverless is an operational construct that refers to the amount of management you have over the underlying servers.
lemax 7y ago
I’ve been using S3 static hosting and CloudFront for all of my static sites recently and it’s fantastic (and nearly free). This is not a hacky solution by any means, S3 buckets support static file hosting out of the box and CloudFront sits in front caching your content across the CDN. Throw in AWS Certificate Manager and you get TLS solved too. Low traffic sites cost literally nothing. S3 runs $0.004 per 10k requests and Cloudfront comes in at $0.001 per 10K.
altrum 7y ago
I did something very similar recently with my website. With that said, I would not do it again. For doing something—seemingly so simple, the infrastructure work was a pain. Also, while I’m at it, static websites are, in my opinion, a little “gimmicky” since it’s impossible to determine the user’s browser size at build time. This means that you have to make a choice to build for either mobile or desktop first. Then, if the user is using the other device, they’ll encounter the FOUC issue (flash of unstyled content). For me, that’s big enough reason to not use static websites in the future.
- ssijak 7y ago
  Use CSS to style the same site for different device sizes
- robertoandred 7y ago
  What? Why aren’t you using media queries?
  - altrum 7y ago
    I am using media queries—while they work, they’ll flash the “unadapted” version depending on what component is rendered first. The alternative is to add some kind of loading aspect to each component but I think it’s not very scalable
    - onion2k 7y ago
      they’ll flash the “unadapted” version depending on what component is rendered first A normal CSS file is render blocking so the DOM content won't be displayed until the browser has downloaded it, parsed it, and knows what to display. If you move your main layout styles out of the component (presumably this is using styled components or similar?) and in to a CSS file that's defined as a <link> in the header of the page then that problem will go away (or a <style> tag in the header if you're worried about the additional fetch). This is how browsers have been designed to work.
superkuh 7y ago
This is hilarious. All this complicated and unneeded stuff for a static website. It completely misses not just a point but multiple points. Maybe you want a static sites so that it'll 'live' forever and not be effected by future changes in software stacks. You definitely don't get that by doing this. Maybe you want a static site so that it's simple to set up. It's not this. Maybe you want a static site for security, all the complexity and accounts here make it less secure than a random site running random php. This is just buzzword bingo for someone's resume.
- unethical_ban 7y ago
  >Maybe you want a static site for security, all the complexity and accounts here make it less secure than a random site running random php. You seem to have no idea what you're talking about. Are you claiming that a static site with Cloudfront and S3 is less secure than an arbitrary PHP website? There are clearly tradeoffs. Running your own server on your own hardware in a colo or at home is the best option if you need it to run for 30+ years and don't want to worry about "software stacks". Good job, now you have to worry about hardware stacks and backups. This solution has an instant, global CDN that mitigates low level DOS and provides better response time across the planet. But that doesn't seem important to you.
- mslate 7y ago
  No need to be cynical. Content can be both helpful information and buzzword bingo.
- joeyspn 7y ago
  Hmm you conveniently omitted comments about HA, latency or scalability... Pushing a bundle of files to a CDN it's undeniably a superior static site/SPA hosting in many ways. Maybe the article overcomplicates but with services like Netlify, Amplify or Firebase Hosting it's stupid easy and cheap, and there's no vendor lock-in.
- jorblumesea 7y ago
  Yeah, because no one can DDOS your CDN or hosting box /s
- 7y ago
firefoxd 7y ago
I know this is not a popular opinion here, but here goes: I use a digitalocean instance where I install nginx. Then I copy the static files through sftp or scp. For ssl, I install letsencrypt.
- Vesuvium 7y ago
  I have a similar setup! I use Ansible to deploy though
- clutchingstraws 7y ago
  "I saw a guy building a website today. No React. No Vue. No Ember. He just sat there. Writing HTML. Like a Psychopath." (credit to https://twitter.com/kiddbubu/status/1187120868259979269 https://twitter.com/kiddbubu/status/1187120868259979269)
- woutr_be 7y ago
  I've been doing the same, however I just SSH into it, pull my git repo and run a command to generate all static files.
bunchOfCucks 7y ago
The 90s called for their post back
nostrebored 7y ago
I don't really understand the author's claims here. const streamsBucket = new s3.Bucket(this, 'StreamsBucket', { websiteIndexDocument: 'index.html', removalPolicy: RemovalPolicy.DESTROY }) /* Create a cloudfront endpoint to make it publicly accessible */ const streamsDistributionOai = new cloudfront.OriginAccessIdentity(this, 'StreamsBucketOAI', {}); const streamsDistribution = new cloudfront.CloudFrontWebDistribution(this, 'StreamsDistribution', { originConfigs: [ { s3OriginSource: { s3BucketSource: streamsBucket, originAccessIdentity: streamsDistributionOai, }, behaviors: [ {isDefaultBehavior: true} ], } ] }); Will create a bucket that will serve index.html from a non website bucket. Three lines of cdk code. If you need to populate the bucket, add another line to create a new BucketDeployment to populate the bucket. All files are secured by OAI and not accessible over the public internet.
sandGorgon 7y ago
actually you should use Netlify or Firebase Hosting. Both have a CDN behind them. Frameworks like Nextjs Static Site export and Gatsbyjs have a lot of tooling support for firebase hosting and netlify.
vegardx 7y ago
Now you just need to configure a Lambda to take care of cache invalidation on CloudFront, based on s3:PutObject events. CloudFront also supports headers like "cache-control: public, max-age=3600, s-maxage=86400", so you can have quite aggressive caching on CloudFront where you can just invalidate it on demand anyway. Personally I just listen for any event and invalidate all objects, since that's way cheaper than issuing an invalidation request for each object, but performance wise that might not be the best option.
mathiasrw 7y ago
For static websites nothing beats the CLI experience of surge.sh - one (simple) command and its deployed. Its so smooth that I forget its there. The way the API has been designed to make the usage natural/guessable has inspired me a lot when I have made other CLI projects.
mellowhype 7y ago
This is a ridiculously complicated tutorial. Sure, S3 works if you're deploying it as safest as possible and want to pay for it too and do this on a recurrent basis, but otherwise is too big of a fuss for a personal blog, I use GitHub pages for over 4 years now with no issues, my own domain and SSL. The simplest is surge.sh, period. If you don't need a domain, a web platform and just want to deploy from your CLI, surge.sh is the solution. It's good when you want to show off a static website to someone outside your sever. Even the switching to a premium plan is done from the CLI. Other solutions are: Netlify, ZEIT Now, Aerobatic or Render. I frequently use this list from this GatsbyJS wiki to check for static website hosts, I recommend it: https://www.gatsbyjs.org/docs/deploying-and-hosting/ https://www.gatsbyjs.org/docs/deploying-and-hosting/

257 points by SanderKnape 7y ago

I struggled with setting up static website hosting on S3, CloudFront, Route53 and ACM, so I created https://github.com/tobilg/serverless-aws-static-websites https://github.com/tobilg/serverless-aws-static-websites to automate this via the Serverless framework

lunias 7y ago

Did the same for my personal site. Really happy with the result: https://ethanaa.com/blog/conversion-to-static-site-with-vuepress-and-aws-s3/#amazon-route53 https://ethanaa.com/blog/conversion-to-static-site-with-vuep... I also wrote follow up posts on adding document search: https://ethanaa.com/blog/document-search-with-algolia/ https://ethanaa.com/blog/document-search-with-algolia/ And continuous deployment: https://ethanaa.com/blog/continuous-deployment-with-circleci-and-s3deploy/ https://ethanaa.com/blog/continuous-deployment-with-circleci...

vagab0nd 7y ago

Why isn't this the 3rd option: Set the S3 bucket private and give CloudFront access to it. I've been using it for a while and it seems to be working.

meritt 7y ago

It's amusing to me how programmers look back with disdain at web development in the 90s and how "you just uploaded files to a FTP server" and now we've circled back to the same thing, just with a whole lot more plumbing in the middle.

WrtCdEvrydy 7y ago
But it's AWS-branded plumbing now!
- znpy 7y ago
  it's in the cloud!
awb 7y ago
For me, Netlify is the right mix (I'm not affiliated with them). It has the 90s ease of use with modern tools and performance out of the box. It's simple to upload files or sync a repo and it it's free. I'm not sure why anyone would host a static website on the AWS stack.
- xienze 7y ago
  > I'm not sure why anyone would host a static website on the AWS stack. Well, I do that, so I guess I'll chime in. First and foremost is the idea of not tying your site's build process and hosting to a company that could go under. Yes, Amazon could, but if I had to bet Netlify will either cease to exist, be bought out, have its free offering discontinued/changed/etc. long before that. Second is that sometimes your site's build process is more complicated than what Netlify provides. For example, my site is a static Hugo site, which Netlify supports, but there's one crucial step in the build process where I turn my "resume.html" page into "resume.pdf" -- I have to run a Docker image that starts headless Chrome in order to render the PDF properly. As far as I can tell, that can't be rigged up in Netlify. Finally, I was able to learn a lot about AWS by hosting my site this way -- setting up a Lambda to listen for GitHub commits, using the AWS API to launch an EC2 instance to build my site, how to configure S3 and CloudFront to serve up content properly, etc. And at the end of the day I get a site that I have complete control over and is approximately free to run.
  - mprev 7y ago
    Who is downvoting this? It seems to be a polite answer to the question asked.
    - meritt 7y ago
      I didn't vote on the comment but it came across to me as emblematic of what I feel is "wrong" with technology trends over the past decade. Where instead of solving business problems it's mostly building tools on top of tools or reinventing the wheel in the latest language/ecosystem. Programmers rarely produce anything of value anymore, but instead parade around their mastery of an increasingly complex toolchain that delivers the same end result.
animalgonzales 7y ago
and buckets of cash for amazon...
daxfohl 7y ago
And there seems to be a rash of "whoa I stumbled on my old site's url at {90's hosting provider} and it is still up and running after all these years" comments lately. (And loads instantaneously with no UI framework).
- Frost1x 7y ago
  Tech suffers significantly from memory loss. To be fair, when you dive deep into complexity, it's easy to get lost in the weeds. The trick is to remember what you're doing and why you're doing it so you don't lose sight of goals while chopping through the complexity jungle.
rolltiide 7y ago
that is comical but doing what is described in this post in the 90s would have required load-balanced tower PCs strategically located all around the world, with another few computers acting as a load balancer, all maintaining copies of the website and cached server responses, and an expensive SSL certificate we get all that for free now or 50 cents a month, just for static websites there is almost no comparison, except for acknowledging that the plumbing sucks, all of which you can make better if you want.
saagarjha 7y ago
> programmers look back with disdain at web development in the 90s and how "you just uploaded files to a FTP server" Since when? I thought most people liked the simplicity and low barrier to entry…
zeroxfe 7y ago
It's amusing how quickly people forget how bad FTP was -- complex connection setup made it difficult to proxy, lack of encryption made it easy to sniff, managing FTP accounts was really hard without sophisticated auditing and management tools. SSH/SFTP helped a lot on the security front, but even for small companies, it's way easier to use cloud buckets than FTP.
zelly 7y ago
Yes but this time instead of FTP...it's a git remote! Progress!

simonw 7y ago

How is this so complicated? I shudder to think of the amount of developer hours wasted by the weirdness and complexity of AWS. Really wish they would prioritize usability and developer experience.

deleted 7y ago
[deleted]
nsporillo 7y ago
I have my personal website deployed to S3 and my DNS in Route53 with a Travis CI commit hook that will upload my files and update the permissions automatically when I push changes to Github. Only costs ~$27/year to have a domain($15) and a static website deployed to S3/R53 ($1/month), which I've found to be fairly reasonable for the level of reliability I can expect. I admit it is complicated up front but once it is setup and updates are automated it is really nice to not need to worry about self hosting, hardware, VPS', etc just for a simple website.
- Gys 7y ago
  > push changes to Github Or create an organisation on Github and publish this website as a Page. It is simple and it is free.
  - nsporillo 7y ago
    Certainly not a bad idea, but in my case I care to own the domain because I also use it when naming Java packages for the projects I write. Since I'm already paying for the domain, I figure I might as well use it for my actual website too. I've found S3 and Route53 to be the most cost effective for my particular use case.
    - Gys 7y ago
      It is easy to connect your own domain to a Github Page ;-)
    - 7y ago

deleted 7y ago

[deleted]

mlmitch 7y ago

The complicated stuff seems predicated on this: “However, the S3 website endpoint is publicly available. Anyone who knows this endpoint can therefore also request your content while bypassing CloudFront. If both URLs are crawled by Google, you risk getting a penalty for duplicate content.” I’m curious if anyone has experienced these issues in practice.

lawik 7y ago
I run the setup of S3 + Cloudfront and never ran into their index problem because I'm not trying for URLs without document file extensions. I assume that's the reason for really wanting index redirect in directories. Pretty URLs, I didn't feel the need. There are other valid reasons too I'm sure. But my needs diverged from the article even earlier than SEO penalties.
- mlmitch 7y ago
  The pretty URLs thing is confusing me now too. AWS lets you configure the buckets to do the pretty URLs. https://docs.aws.amazon.com/AmazonS3/latest/dev/HowDoIWebsiteConfiguration.html https://docs.aws.amazon.com/AmazonS3/latest/dev/HowDoIWebsit... https://docs.aws.amazon.com/AmazonS3/latest/dev/IndexDocumentSupport.html https://docs.aws.amazon.com/AmazonS3/latest/dev/IndexDocumen... I put up a Jekyll site on s3/cloudfront recently and it seems to work well. Anyway, I’m still wondering about the consequences of the naked s3 endpoint being available.
jeffadotio 7y ago
CloudFront has one-click direct bucket access restriction.
tyingq 7y ago
You can specify the canonical url in the HTML. Then it's not an issue. https://support.google.com/webmasters/answer/139066?hl=en https://support.google.com/webmasters/answer/139066?hl=en

ehonda 7y ago

Host a static website the HN way: 1. Buy the cheapest most unsustainable VPS ipv4 deal out there. 2. Make A record and WWW record and point domain to your new fangled server. 3. Configure server: apt-get install nginx goaccess cd website cp * /var/www/html Yearly maintenance required: apt-get update, apt-get upgrade reboot View traffic stats: goaccess -f /var/log/nginx/access.log

dragonwriter 7y ago
> Buy the cheapest most unsustainable VPS ipv4 deal out there. [...] > Yearly maintenance required: Well, presumably, find the new cheapest, most unsustainable VPS ipv4 deal, the previous one not having been sustained.
nsporillo 7y ago
The last time I tried to maintain a personal VPS I was using it for a Jenkins build server so users could obtain the latest artifacts of some open source programs I work on. That burned me after it got exploited using a Jenkins RCE and a bitcoin miner was installed on the VPS. Also, the cheapest VPS you can find likely won't ever achieve the level of scale your static website in S3 could achieve. In the rare event you get a lot of web traffic, you're only hosed if AWS is hosed.
- capableweb 7y ago
  You gotta receive a ton of traffic for Nginx to stop serving static files. I'm pretty sure most of the static websites today could survive on a lite Nginx vps with minimal tuning. Also, i rather have my server go down than to receive a larger bill from aws, but that all depends on your use case obviously
  - nsporillo 7y ago
    Yeah this is probably true, I've never actually had a nginx instance be overwhelmed myself. I just don't know how much I trust VPS providers that aren't charging a premium $5+/month to deliver quality reliable performance. The best part of S3 + Route53 is your costs are basically constant. $.50 a month for the hosted zone and then you pay pennies on the dollar for GBs of data transfer. In theory your bill could balloon if you had a hefty static website or some big files left public in your buckets and someone constantly downloaded it.

dayjah 7y ago

I’ve had to do this multiple times over the past two years. It’s always a shock to me how hard it is. The Lambda@Edge functions especially. They have 4 phases they can be injected into: viewer-request, origin-request, origin-response, and viewer-response. If you put your code in the wrong place you get hard to debug issues. Additionally you cannot “annotate” a request, so a decision at say “viewer-request” cannot pass information to later stages. Also, deployments take 15 minutes at least which just further frustrates the debugging process.

jjoonathan 7y ago
Every AWS service is shockingly crusty. Even after spending years on AWS calibrating my expectations downwards, it regularly finds ways to surprise me. I know, I know. For developers it beats obtaining permission every time you want to spend $5/mo on some plumbing and for managers it beats getting fired because you chose Google cloud and they canceled it the next year. Still... ugh.
loevborg 7y ago
I totally agree. CloudFront is maddeningly anemic, with hacks required to do the most basic things. Nginx/Varnish configuration is bad but CloudFront is worse. I wonder how much better competitors like Cloudflare and Fastly are.
eastbayjake 7y ago
This was actually one of my most delightful experiences with Azure Functions and Microsoft's API Management solution - overhead does not make it the right fit for every serverless architecture, but it did make orchestrating functions in this way a lot easier
- nostrebored 7y ago
  Thanks for this comment! I know what the next side tech I'll play around with will be :)
zackbloom 7y ago
Have you tried Cloudflare Workers and Workers Sites? I believe they fix both issues.

welder 7y ago

It's much simpler to use GitHub Pages + Cloudfront (optional).

abstrct 7y ago
Ya, I'm trying to understand what the downside to github pages is compared to this strategy. Can anybody elaborate on what I might be missing?
- philistine 7y ago
  I’d rather be a paying customer and know I’m not going to lose my setup because of some reason.
  - abstrct 7y ago
    That's absolutely a valid reason. All my static sites are not generating income and don't need support. I've also got my own backups, so if GH decides I shouldn't be there I'm not losing much. If a site is important to your business then support is certainly more critical. Thanks for the very valid counterpoint!

gitgud 7y ago

What benefits does this have? in comparison to much easier solutions like; Netlify, Github Pages etc..

simlevesque 7y ago

You should use Amplify, it solves allk those problems.

desas 7y ago
I use AWS Amplify, it makes all of these headaches go away and it's ridiculously simple to configure. 1. Add your domain in AWS Route 53 2. Tell it which git repo & branch you want to use (including private github ones) 3. It detects the repo contains a hugo site (works for other ssg) and generates a build script So now every time I commit to my selected branch, Lambda is notified, it fires up a vm to generate the html, move it into S3 and takes care of Cloudfront, SSL & so on.

davidweatherall 7y ago

For anyone who is hosting .html files and doesn't want to have to put index files inside directories, the "trick" with s3 is to rename the file to the name without the html extension, and change the Content Type to text/html. Earlier today I modified the popular jakejarvis s3 sync github action to allow for this during my CI/CD process. https://github.com/davidweatherall/s3-sync-action https://github.com/davidweatherall/s3-sync-action

tomcam 7y ago
Thanks for sharing that. Nice repo! Can you explain why I wouldn't want an index file in a directory? I assume you mean index.html?
- davidweatherall 7y ago
  I do mean index.html! Personally I prefer the url structure of example.com/about as opposed to example.com/about/ - especially when adding on anchors or parameters (example.com/about?param as opposed to /about/?param). Relative pathing can be useful depending on file structure. It avoids issues with directory / page naming conflicts. E.g. my images are stored at /assets/img/image.png - but if I wanted to create a page at example.com/assets this would require me to then place an index.html inside my assets directory - which doesn't seem logical. Overall, mostly personal preference of me disliking the index.html inside directory method - It just doesn't seem like it's the "right" way to access a page. If I have a example.com/about page - I expect them to be hitting an about.html file.
____hacker____ 7y ago
I feel dumb after reading this. So easy. Thank you.
datashaman 7y ago
Vendor lock-in is real - why not just generate an index.html file? Then you don't need to hack anything and your files are portable. index.html will work anywhere.

svnpenn 7y ago

I see you are using Hugo 0.62.1 https://sanderknape.com https://sanderknape.com FYI starting with 0.63.0 the speed has about doubled: https://github.com/gohugoio/hugo/releases/tag/v0.63.0 https://github.com/gohugoio/hugo/releases/tag/v0.63.0

dewey 7y ago
Is the speed it's taking to building the static site usually a problem? I don't recall ever waiting for it to be done. Maybe my site is too minimal to see a difference (https://annoying.technology https://annoying.technology).
- weego 7y ago
  No, circle goes from clean state to npm install, scss compile, drags content from contentful and then runs the Hugo build and upload to S3 in under 30 seconds for our site. Most of the time is npm flaffing about.
- heinrichhartman 7y ago
  I have compile times of >30 seconds with Jekyll blog [1,2]. This is an issue. It adds a lot of friction to the edit/preview loop. BTW: I just moved it to Netlify since reading this thread. Took me ~5 minutes. [1] https://github.com/HeinrichHartmann/HeinrichHartmann.github.io https://github.com/HeinrichHartmann/HeinrichHartmann.github.... [2] https://www.heinrichhartmann.com/ https://www.heinrichhartmann.com/
  - dewey 7y ago
    FWIW I'm getting a "certificate does not match *.netlify.com" SSL error on your site.

coolsunglasses 7y ago

Here's my terraform-ization of an S3 + Cloudflare setup for SSGs. I use Zola but that's incidental. https://gitlab.com/bitemyapp/statically-yours https://gitlab.com/bitemyapp/statically-yours There's a weird bug with the `tf init` but it can be worked around by running `tf init`, deleting the providers in `.terraform`, then running again. Hashicorp has an open bug for the problem I think. I could probably clean it up more but this has been okay for a couple sites I run.

jeffadotio 7y ago

I recently wrote a detailed tutorial on dirt-cheap professional hosting with AWS. It may be useful to anyone that found this article informative. https://jeffa.io/tutorials/inexpensive_aws_hosting.html https://jeffa.io/tutorials/inexpensive_aws_hosting.html

rexreed 7y ago

Can someone please provide practical advice on moving from a site hosted on Wordpress using all the plugins to a static hosted site? It seems unbelievably complicated. My non-technical employees and partners like Wordpress. We like the plugins that make web development easy and not arcane. But we don't like the fact that every page requires basically a database read. Yes, we use WP-SuperCache, and it's ok. But why oh why is it so hard to do the editing on Wordpress and the publishing on a Static site? Anyone with some real guidance here? We want the people who come to the site to get the static experience while the people who edit the site to get the Wordpress experience.

oconnore 7y ago
In a previous life I worked on a site that had a private Wordpress instance that was scraped and cloned to a more or less static site. You can either do this explicitly using a small scraper tool, or implicitly using aggressive reverse-proxy caching rules.
- rexreed 7y ago
  Sounds pretty intensive. Every page would need constant scraping as links update and sidebars change, wouldn't they?
  - oconnore 7y ago
    I think you might be overthinking it. Just drop cache after publishing. Maybe you’re doing something more complicated that isn’t amenable to pseudo-static?
BossingAround 7y ago
> Can someone please provide practical advice on moving from a site hosted on Wordpress using all the plugins to a static hosted site? It seems unbelievably complicated. Oh I'm sure it is. Static website is just that--static. You don't have a database, and that is a great thing, but that also means you can't store stuff like users, comments, articles to be published in the future, etc. out of the box. You can do all of that of course, but it's going to be difficult, and you're gonna plug non-static parts to your static website (such as plugging the comments part). All in all, you can't expect to have all the advantages of static websites as well as Wordpress. I personally simply took my content from Wordpress and built a new website with gatsbyjs. It's fast, clean, and entirely in React + Typescript. It has no dynamic parts, though. If you're a business and your Wordpress site is production critical, who knows, you might not want to migrate. You might also want to explore alternative solutions, like split some parts of your Wordpress blob into several static websites, and keep the main WP site with less content that's easier to manage... There are a number of possibilities.

jposer 7y ago

this was literally what I was doing today and if I'd just checked hacker news it would have saved 3 hours of faffing with Lambda

shapeshed 7y ago

Deploying static sites is the original and best candidate for engineers overengineering

manigandham 7y ago

Static sites are overrated for most cases. Often you still need a backend for editing with non-technical folks or just easier handling of media, etc so you're now running a server-side instance of some blog or CMS while adding a whole new detached frontend layer. With things like Cloud Run that can run a container on-demand for every request, it's easier to just stick with regular Wordpress or Ghost server-side stacks.

saagarjha 7y ago
> Static sites are overrated for most cases. Often you still need a backend for editing with non-technical folks or just easier handling of media, etc so you're now running a server-side instance of some blog or CMS while adding a whole new detached frontend layer. Not for my blog.
- manigandham 7y ago
  most sites. If you're editing markdown files with only text and running a simple convert to html then it'll work fine, but ghost/WP in a container would work just as well.
zelly 7y ago
> Cloud Run that can run a container on-demand for every request People will bounce back. It will take far too long to load. The point of a static site on a CDN is speed. If your goal is to get outside visitors, then you definitely do not want to do this. I can understand Cloud Run for demoing small apps though.
- manigandham 7y ago
  Cloud Run just pauses the CPU, the container is still fully loaded and resumes very quickly. You can also cache the pages with a CDN.

calvinmorrison 7y ago

I would like to just mention that github does static site hosting for free. I have used it for a few years. Never had a problem. Static, Free, probably not going out of business in the next 5+ years, domain is my only cost.

saagarjha 7y ago
And they can probably handle your traffic, too!
JoshTriplett 7y ago
True, but they reserve the right to prohibit sites that use up a non-trivial amount of bandwidth, or that have commercial purposes, or various other reasons. It's a great service, but I wouldn't count on it as your primary hosting.
riffic 7y ago
Many providers do free static hosting: https://www.slant.co/topics/2256/~best-static-website-hosting-provider https://www.slant.co/topics/2256/~best-static-website-hostin...
tpush 7y ago
You don't get TLS certs for both apex and www subdomain from GitHub though. https://github.com/isaacs/github/issues/1675 https://github.com/isaacs/github/issues/1675
agumonkey 7y ago
are there free domain name (even it exotic) still ?

k__ 7y ago

Amplify really eases the pain with this.

philfreo 7y ago

> The redirect logic provided by the S3 website endpoint can be moved to a Lambda@Edge function. The post here is using Lambda@Edge to handle pointing example.com/about/ to example.com/about/index.html However there's a lot more you can do / may want to do with Lambda@Edge if you're hosting a Cloudfront+S3 website. I just wrote up how I set up a system to make managing server-side redirects (e.g. 301s from /old-page to /new-page) easier via Lambda@Edge. https://news.ycombinator.com/item?id=22351484 https://news.ycombinator.com/item?id=22351484 https://engineering.close.com/posts/redirects-using-cloudfront-lambda-edge https://engineering.close.com/posts/redirects-using-cloudfro...

jillesvangurp 7y ago
I did some redirects without lambda's last year using s3 routing rules, which kind of worked. As figuring out this and several other things, I also wrote up some details on this. https://dev.to/jillesvangurp/using-cloudfront-s3-and-route-53-for-hosting-395o https://dev.to/jillesvangurp/using-cloudfront-s3-and-route-5... IMHO, Amazon should be ashamed of themselves for making it so unbelievably convoluted and hard to host a simple website on cloudfront. It's the one thing almost every website out there has to solve and they made it super painful to get this right.

heavyset_go 7y ago

Just use Netlify, it's free, you can hook it up to a GitHub repository and they'll handle your Let's Encrypt certs for you.

oxplot 7y ago
Just use Github pages, supports TLS, CNAME and is free.
- heavyset_go 7y ago
  Netlify does DNS and can serve from private repos for free. Not sure if GitHub changed their policy, but last time I looked, if you wanted to serve from a private repo, you needed to have a Pro plan.
  - yyhhsj0521 7y ago
    That's not true (at least not anymore). Now that Github offers free unlimited private repos, there's no difference between public/private ones.
    - trazire 7y ago
      No, it is still true. From https://help.github.com/en/github/working-with-github-pages https://help.github.com/en/github/working-with-github-pages > GitHub Pages is available in public repositories with GitHub Free, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server. For more information, see "GitHub's products."
      - yyhhsj0521 7y ago
        Ah, I guess it's because I'm on Github Student.
    - heavyset_go 7y ago
      Cool, that's good to know.

chindtooo 7y ago

Use google Cloud Run though I love Netifly.

brown9-2 7y ago

One thing that these guides on using S3 never mention is to make sure to set alerts if the cost of the bucket grows too fast, i.e. your site gets popular.

spectramax 7y ago

What's wrong with old school apache server running on a $5/month DigitalOcean droplet?

miguelmota 7y ago
I've been running my personal blog and many other micro-sites on a $5 DigitalOcean droplet for years. It's seriously the best bang for the buck.

chindtooo 7y ago

I prefer Google Cloud Run and it need not be 100% static though it should be stateless.

oxplot 7y ago

Still can't do the same without paying hourly for a load balancer on Google Cloud. C'moon Google!

ttoinou 7y ago

Anyone knows how I could measure website performance all over the world averaged across multiple runs both for webpage and downloading huge file (100Mo) ? To verify that the CDN is indeed faster than my current hosting solution

m82labs 7y ago

I found s3 + cloudflare to be a better combo. Cloudflare offers free ssl certs and has overall been a great experience. I also use AWS SES for my domain mail. It gets delivered to S3, then a local python script grabs it and dumps it in a mailbox file for dovecot to serve via imap. I pay $0.05/month for my hosting of my site and email. https://markw.dev https://markw.dev

divbzero 7y ago
Or GitHub Pages + CloudFlare. And as another comment mentions, GitHub Pages now offers HTTPS certificates [1] for custom domains, so GitHub Pages alone is sufficient for most static websites. [1]: https://github.blog/2018-05-01-github-pages-custom-domains-https/ https://github.blog/2018-05-01-github-pages-custom-domains-h...
- m82labs 7y ago
  I started there but didn’t like having my drafts and unfinished ideas visible in the repo. I now maintain my site in a private repo and publish to S3. Not sure if that’s possible now in Github or not.
  - jorge-d 7y ago
    You can have a private repo hosting github pages, I'm using it for my personal website
    - StavrosK 7y ago
      Are you paying for it? It sounds like a great solution if it's available on the free tier.
      - chipsa 7y ago
        GitHub provided private repos to everyone after Microsoft bought them. And I don't know why it'd require the repo to be public to do the pages...

pansa2 7y ago

Are there any guidelines for controlling cost when running a static website on S3+CloudFront? Say my regular bill for this setup was $5 a month. Can I at least get a notification if I have a lot of visits and the bill goes over a threshold, say $50? Also, is there any protection against things like DDoS that could quickly push the bill into the $100s and beyond?

avip 7y ago
aws (and all other cloud providers I've used) has a pretty elaborate cost alert system.
- jfkebwjsbx 7y ago
  Alerts do nothing to stop a huge bill.
  - justasitsounds 7y ago
    You can use a lambda function that is triggered by a cloudwatch alarm when your bill approaches an arbitrary limit. What you do in response to such an event is entirely up to you

SkyMarshal 7y ago

What are good ways of managing your content with a static website? For example, say you want a single index.html file, with each article contained in a separate content file - "blogpost01.html", "blogpost02.html", etc. - that you somehow include in the <body></body> of your index file? Is there any way to do that with a static site, or something similar where your content is separated out into individual files?

hunter2_ 7y ago
Use a static site generator. The parts you touch for authoring posts will end up "included" during the build step, producing files that you don't touch which each redundantly contain the common markup. Or with an SPA generator like Gatsby, there wouldn't even be any redundancy (but client side JS is required).
- gravitas 7y ago
  One example of the above is PyKwiki: https://github.com/nullism/pykwiki https://github.com/nullism/pykwiki

actionowl 7y ago

We've also been using S3 + Cloudfront for our static website, it's super cheap and has been low touch. We've run into two things though: - We have very little control over TLS versions and cipher settings. - We have to use a CNAME so we can't point a bare domain at it which also means we can't add our site to the HSTS preload list (I think there is a way to purchase an IP though now, if anyone knows please let me know). Overall totally worth it though.

jbourne 7y ago
On your point about using CNAMEs - if you have the domain set up with Route 53, you can create an A/AAAA alias record on the domain apex pointing to CloudFront.

Thorentis 7y ago

I don't work for them or anything, but I've honestly found Netlify to be the absolute easiest solution for static site hosting. And it's free! There are some paid features, but the free stuff is all you need. You can use SSL, accept form inputs through request capturing, automate deployments with Github/Gitlab hooks, auto generate static pages for most popular static site generators (Jekyll, Hugo, etc.) Absolute breeze to use. Beats any hacky AWS solution hands down imo.

bachmeier 7y ago
Actually came here to ask the advantage of something like this over Netlify. I gave up midway through the article because I couldn't figure out the point.
StavrosK 7y ago
Agreed, Netlify is fantastic. Another thing I really like, though I wouldn't really recommend it for corporate sites (but I would recommend it for personal sites because of the community/purpose) is Gitlab + Neocities. I use Gitlab CI to build my site, rclone to copy it to Neocities, and that's it. Very simple, no-hassle combination with loads of bandwidth (I think my paid account has 3 TB/mo).
- lucasverra 7y ago
  I enjoy it so much (since 2017) that i'm going to london Jamstack !
miguelmota 7y ago
I love Netlify as well; it's dead simple and works out of the box. Occasionally I do run into issues where the builds get 'stuck' and never processed, so I have to manually cancel the build and re-run it. I've also had Russian users tell me that Netlify is sometimes blocked in Russia and can't access the sites but it may sporadic.
- paranoidrobot 7y ago
  From your link: > No, netlify.com is probably not blocked in Russia. Yet. > Details: > URL http://netlify.com http://netlify.com > Domain netlify.com > IP 134.209.226.211 Is it intermittent? Also, any idea why they would be blocked, or is that part of the problem?

dave_sid 7y ago

What I’ve gleaned from this thread is that in 2020 there are a thousand easy ways to host a static website. Just take your pick and go with it.

woutr_be 7y ago
And for every way, there will be 10 people who will call you names for doing it this way, and that you should really do it another way. Just do whatever makes sense for you.

interestingsoup 7y ago

Great article!

misterbrian 7y ago

Since we are all sharing how to deploy static sites, here's my approach using CloudFormation to build a static site with S3, CloudFront, Certificate Manager and Route53. https://gitlab.com/verbose-equals-true/django-postgres-vue-gitlab-ecs/-/blob/develop/cloudformation/infrastructure/static-site.yaml https://gitlab.com/verbose-equals-true/django-postgres-vue-g... and here's how I deploy that site with GitLab CI. https://gitlab.com/verbose-equals-true/django-postgres-vue-gitlab-ecs/-/blob/develop/gitlab-ci/aws.yml#L29 https://gitlab.com/verbose-equals-true/django-postgres-vue-g... Also, nobody mentioned GitLab pages which offers some pretty nice static site solutions as well.

nostrebored 7y ago
Nice solution! If you're interested in a code based solution, this is one space where the CDK really shines. OAI, CloudFront Website Distributions, and Route53 AAAA records to the distribution are all turnkey constructs. Deployment is just executing 'cdk deploy'. If your CFN gives you headaches ever, maybe take a look
- misterbrian 7y ago
  Thanks, I'm interested in learning a code-based solution. I like the ideas behind CDK, Pulumi and Terraform, but I feel like they all have trade-offs. CFN isn't the best, but I don't look forward to having to re-implement my entire tech stack to achieve the same result compared with what I currently have

Animats 7y ago

Why is this "serverless"? It's just rented server capacity on a shared host, right?

travisjungroth 7y ago
Yes. “Serverless” is an overly strong term that means you don’t even have a dedicated portion of a server.
nostrebored 7y ago
Serverless is an operational construct that refers to the amount of management you have over the underlying servers.

lemax 7y ago

I’ve been using S3 static hosting and CloudFront for all of my static sites recently and it’s fantastic (and nearly free). This is not a hacky solution by any means, S3 buckets support static file hosting out of the box and CloudFront sits in front caching your content across the CDN. Throw in AWS Certificate Manager and you get TLS solved too. Low traffic sites cost literally nothing. S3 runs $0.004 per 10k requests and Cloudfront comes in at $0.001 per 10K.

altrum 7y ago

I did something very similar recently with my website. With that said, I would not do it again. For doing something—seemingly so simple, the infrastructure work was a pain. Also, while I’m at it, static websites are, in my opinion, a little “gimmicky” since it’s impossible to determine the user’s browser size at build time. This means that you have to make a choice to build for either mobile or desktop first. Then, if the user is using the other device, they’ll encounter the FOUC issue (flash of unstyled content). For me, that’s big enough reason to not use static websites in the future.

ssijak 7y ago
Use CSS to style the same site for different device sizes
robertoandred 7y ago
What? Why aren’t you using media queries?
- altrum 7y ago
  I am using media queries—while they work, they’ll flash the “unadapted” version depending on what component is rendered first. The alternative is to add some kind of loading aspect to each component but I think it’s not very scalable
  - onion2k 7y ago
    they’ll flash the “unadapted” version depending on what component is rendered first A normal CSS file is render blocking so the DOM content won't be displayed until the browser has downloaded it, parsed it, and knows what to display. If you move your main layout styles out of the component (presumably this is using styled components or similar?) and in to a CSS file that's defined as a <link> in the header of the page then that problem will go away (or a <style> tag in the header if you're worried about the additional fetch). This is how browsers have been designed to work.

superkuh 7y ago

This is hilarious. All this complicated and unneeded stuff for a static website. It completely misses not just a point but multiple points. Maybe you want a static sites so that it'll 'live' forever and not be effected by future changes in software stacks. You definitely don't get that by doing this. Maybe you want a static site so that it's simple to set up. It's not this. Maybe you want a static site for security, all the complexity and accounts here make it less secure than a random site running random php. This is just buzzword bingo for someone's resume.

unethical_ban 7y ago
>Maybe you want a static site for security, all the complexity and accounts here make it less secure than a random site running random php. You seem to have no idea what you're talking about. Are you claiming that a static site with Cloudfront and S3 is less secure than an arbitrary PHP website? There are clearly tradeoffs. Running your own server on your own hardware in a colo or at home is the best option if you need it to run for 30+ years and don't want to worry about "software stacks". Good job, now you have to worry about hardware stacks and backups. This solution has an instant, global CDN that mitigates low level DOS and provides better response time across the planet. But that doesn't seem important to you.
mslate 7y ago
No need to be cynical. Content can be both helpful information and buzzword bingo.
joeyspn 7y ago
Hmm you conveniently omitted comments about HA, latency or scalability... Pushing a bundle of files to a CDN it's undeniably a superior static site/SPA hosting in many ways. Maybe the article overcomplicates but with services like Netlify, Amplify or Firebase Hosting it's stupid easy and cheap, and there's no vendor lock-in.
jorblumesea 7y ago
Yeah, because no one can DDOS your CDN or hosting box /s
7y ago

firefoxd 7y ago

I know this is not a popular opinion here, but here goes: I use a digitalocean instance where I install nginx. Then I copy the static files through sftp or scp. For ssl, I install letsencrypt.

Vesuvium 7y ago
I have a similar setup! I use Ansible to deploy though
clutchingstraws 7y ago
"I saw a guy building a website today. No React. No Vue. No Ember. He just sat there. Writing HTML. Like a Psychopath." (credit to https://twitter.com/kiddbubu/status/1187120868259979269 https://twitter.com/kiddbubu/status/1187120868259979269)
woutr_be 7y ago
I've been doing the same, however I just SSH into it, pull my git repo and run a command to generate all static files.

bunchOfCucks 7y ago

The 90s called for their post back

nostrebored 7y ago

I don't really understand the author's claims here. const streamsBucket = new s3.Bucket(this, 'StreamsBucket', { websiteIndexDocument: 'index.html', removalPolicy: RemovalPolicy.DESTROY }) /* Create a cloudfront endpoint to make it publicly accessible */ const streamsDistributionOai = new cloudfront.OriginAccessIdentity(this, 'StreamsBucketOAI', {}); const streamsDistribution = new cloudfront.CloudFrontWebDistribution(this, 'StreamsDistribution', { originConfigs: [ { s3OriginSource: { s3BucketSource: streamsBucket, originAccessIdentity: streamsDistributionOai, }, behaviors: [ {isDefaultBehavior: true} ], } ] }); Will create a bucket that will serve index.html from a non website bucket. Three lines of cdk code. If you need to populate the bucket, add another line to create a new BucketDeployment to populate the bucket. All files are secured by OAI and not accessible over the public internet.

sandGorgon 7y ago

actually you should use Netlify or Firebase Hosting. Both have a CDN behind them. Frameworks like Nextjs Static Site export and Gatsbyjs have a lot of tooling support for firebase hosting and netlify.

vegardx 7y ago

Now you just need to configure a Lambda to take care of cache invalidation on CloudFront, based on s3:PutObject events. CloudFront also supports headers like "cache-control: public, max-age=3600, s-maxage=86400", so you can have quite aggressive caching on CloudFront where you can just invalidate it on demand anyway. Personally I just listen for any event and invalidate all objects, since that's way cheaper than issuing an invalidation request for each object, but performance wise that might not be the best option.

mathiasrw 7y ago

For static websites nothing beats the CLI experience of surge.sh - one (simple) command and its deployed. Its so smooth that I forget its there. The way the API has been designed to make the usage natural/guessable has inspired me a lot when I have made other CLI projects.

mellowhype 7y ago

This is a ridiculously complicated tutorial. Sure, S3 works if you're deploying it as safest as possible and want to pay for it too and do this on a recurrent basis, but otherwise is too big of a fuss for a personal blog, I use GitHub pages for over 4 years now with no issues, my own domain and SSL. The simplest is surge.sh, period. If you don't need a domain, a web platform and just want to deploy from your CLI, surge.sh is the solution. It's good when you want to show off a static website to someone outside your sever. Even the switching to a premium plan is done from the CLI. Other solutions are: Netlify, ZEIT Now, Aerobatic or Render. I frequently use this list from this GatsbyJS wiki to check for static website hosts, I recommend it: https://www.gatsbyjs.org/docs/deploying-and-hosting/ https://www.gatsbyjs.org/docs/deploying-and-hosting/