Host a static site in S3 with Cloudfront and Https


I am trying to understand if the following is possible…

  • Upload a static site to S3.
  • Create a cloud formation distribution.
  • Link to a custom domain name from route 53
  • Attach a custom https certificate from Amazon’s certificate manager.

I’ve had a look at both the serverless-finch and serverless-single-page-app-plugin plugins. The former works quite nicely to upload my static site to s3 and I believe the latter will set up a cloud front distribution.

I’m struggling to understand how to connect the dots.

Firstly - is this what the serverless framework is designed to do? Or should I look at a different tool (e.g. Terraform).

If I’m in the right place I think I need to understand how to link up both my Route 53 domain and my HTTPS certificate to my cloudfront distribution.

Or is it the case that I would set these up once manually and then use serverless to manage the deploy my static site in the s3 bucket and the lambda APIs I will have for the actual site functionality?

Would be grateful for some pointers.


Go through, it gives you the instruction on how to do that.

You can jump to part of Create a New React.js App if you know serverless already.

1 Like

Have you found a way out to do it in through serverless rather using netily as mentioned in the serverless stack ?

It uses netily do complete the process that is deploying to s3 -> cloudfront and then a custom domain at route 53 . Can we do it using serverless only ?

in my experience…there are better ways to transfer your web site to S3 buckets. while i imagine there’s a way that serverless can do this…gulp is probably an easier tool - along with this add-on:

then in your gulp file:

gulp.task(‘aws-publish-dev’, function() {

var publisher = awspublish.create({
    region: 'us-west-2',
    params: {
        Bucket: '===your bucket name==='
}, {
    cacheFileName: './cache/'

return gulp.src('./dist/**')


probably should also mention there’s a cloudfront add-on which will invalidate the cache for you (a)synchronously…

gulp.task(‘invalidate-cloudfront’, function() {
var cfSettings = {
distribution: ‘===your name====’, // Cloudfront distribution ID
wait: false, // Whether to wait until invalidation is completed (default: false)
paths: [’/*’], // Configure OriginPath to be removed of file path to invalidation
indexRootPath: true // Invalidate index.html root paths (foo/index.html and foo/) (default: false)

return gulp.src('*')