Deploying front-end websites to S3 with CloudFront

You should have a look at AWS Amplify Console <a href="https:&#x2F;&#x2F;aws.amazon.com&#x2F;amplify&#x2F;console&#x2F;" rel="nofollow">https:&#x2F;&#x2F;aws.amazon.com&#x2F;amplify&#x2F;console&#x2F;</a> It’s specifically designed to do most of this for you. I’ve been using it for static site work recently and it’s awesome. It also does plenty more and can be used for full stack dev but it’s great if you just need static site hosting and build pipelines. No need to have the build locally and uses gitops for build and auto generates environments based off branch name patterns.

If it&#x27;s just a personal website, you might find it easier to use GitHub Pages (or GitLab&#x27;s equivalent) and Cloudflare. Both are free for any reasonable personal website usage.<p>If you don&#x27;t want to run a build of your static site generator on your computer and upload the result to GitHub every time you make a change, you can just use Jekyll and GitHub will build it for you. I think GitLab supports other static site generators as well. This technique is how <a href="https:&#x2F;&#x2F;www.snazz.xyz" rel="nofollow">https:&#x2F;&#x2F;www.snazz.xyz</a> works.

I&#x27;ve always wondered why Amazon&#x27;s own CodePipeline service could not deploy a commit of a HTML&#x2F;CSS static sites straight to S3. They can deploy from CodeCommit straight to Elastic Beanstalk easily enough, but for years I have been asking for an S3 bucket as a destination which would make deploying our static website a piece of cake.<p>As it is, we have had to use BitBucket as the repo for our website, and we use the Pipelines feature on there to deploy to S3. Would be nice not to have to use a third party service to do something that AWS&#x27;s own infrastructure makes unreasonably complex and difficult.

Configuring CORS is probably the biggest pain about this approach and is necessary if you want to send data to and from an API. This guide should probably mention it or link another guide.

If you want to do this with one command, check out <a href="https:&#x2F;&#x2F;github.com&#x2F;tobilg&#x2F;serverless-aws-static-websites" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;tobilg&#x2F;serverless-aws-static-websites</a> or, if you want to host an API with Lambda as well, <a href="https:&#x2F;&#x2F;github.com&#x2F;tobilg&#x2F;aws-fullstack-website" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;tobilg&#x2F;aws-fullstack-website</a>

Netlify (<a href="http:&#x2F;&#x2F;netlify.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;netlify.com&#x2F;</a>) works great for static sites as well!

A problem my team hits with micro projects with this is: virtual routes like `&#x2F;login` doesn’t map to a file. What can be done about that?

I just use s3_website. It works well if you have Java installed.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;laurilehmijoki&#x2F;s3_website" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;laurilehmijoki&#x2F;s3_website</a>