#serverless #static #hosting

If you have a blog or a static website, you can combine a bunch of tools to provide a super-fast solution that costs less than a cup of coffee a month.

Hosting is always a compromise of reliability, scalability, pricing, and tech buzz. The good news is that Amazon provides file storage called S3, moreover, it allows you yo host your static website on S3. It is rumoured that static is the new dynamic, so here you go.

I use this approach, combining a few additional tools:

  • S3 is a way to store files in the cloud
  • Route 53 is a DNS service to bridge your domain with your content
  • CloudFront to distribute your site over HTTPS

Prerequisites

  • Buy domain name – Google Domains, GoDaddy, or any other provider
  • Create an AWS Account
  • Setup the AWS CLI

Amazon AWS has tutorials for setting almost everything up. Official instructions for configuring the AWS CLI are available here.

Install the Ghost and run it locally

Follow this tutorial from ghost platform. You’ll be able to see your blog with this link http://localhost:2369

Generate a static version of your blog

You have to generate assets for static website from your localhost ghost blog. I found several solutions to do this:

  • HTTrack – not well maintained, but works good tho, except thumbnails images, they need to be set explicitly.
  • Buster – completely abandoned, I’d rather skip it.
  • Ghost-static-site-generator – my current working solution, allows to parse your site with one command:
gssg --url https://yourdomain.com

Create S3 bucket

You can create the S3 bucket for your site using CLI or AWS Console. Name it youdomain.com, enable "Static website hosting" in bucket’s properties, set index.html as the default index document, allow all public access and set the following bucket

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadForGetBucketObjects",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.rezamousavi.com/*"
        }
    ]
}

Also, save you bucket pathname, you’ll need it later http://yourdomain.com.s3-website.eu-central-1.amazonaws.com/

Then create the second bucket and name it www.yourdomain.com. This bucket should redirect requests to your fist one. Set bucket website endpoint to the path of your first bucket.

Upload our blog static files to the S3 bucket

It’s relatively easy with AWS CLI:

aws s3 sync static_site_folder s3://yourdomain.com --acl public-read --delete

Now by checking the URL of your first bucket you’ll see your static website.

Create CloudFront distribution for our S3 bucket

Create a web distribution using HTTPS with CloudFront. Add you first bucket URL in the “Origin Domain Name”. Redirect HTTP to HTTPS. Set custom SSL certificate, which you can obtain with AWS Certificate Manager. After the distribution has been deployed, you’ll get the URL like *.cloudfront.net. You can access your website by visiting it.

Update our domain DNS records

The last thing is to route your domain and CloudFront URL. Unfortunately, Google Domains doesn’t support CNAME-like functionality at the zone apex, but you can have Google Domains forward your root domain to your www CNAME. I go for AWS Route 53 instead.

In Route 53 console create a new hosted zone for your domain. Set Alias Target to your CloudFront distribution URL.

Additionally, create one more record with www.yourdomain.com and list it in the alternate domain name in distribution preferences.

Update newly obtained DNS in your domain provider console/admin panel.

Important notice

CloudFront caches your s3 files for one day. If you like to update your website instantly, you should invalidate your objects in CloudFront distribution cache and push new changes. Watch out free tier limits. Learn more on AWS knowledge center.

Ready to go. Happy hosting and blogging!