Description

Static HTML site generated by Hugo site generator. When the content directory in S3 is changed, a Lambda function will trigger Hugo to update.

Tools used in this project

Prerequisites

  • A domain name (example.com)

Setup the Domain Name

  • Route 53
  • Create Hosted Zone > Domain Name > Public Hosted Zone
  • Add Name Servers to your registrar

Create S3 Buckets

  • example.com - Main public site
  • www.example.com - Redirects to main public site
  • example.com.assets - Contains the assets used in the static site. Will be used by CloudFront
  • example.com.updates - Contains the Hugo site files to be generated. Lambda function will trigger from a change in this folder.
  • example.com.lambda - Contains the zip file that will be used by Lambda

Setup Site

  • Upload an index.html file to the example.com bucket.
  • In the bucket properties for example.com, choose “Static Website Hosting” > Enable website hosting > Index Document: index.html > Save
  • Back in Route 53, create a new recordset for example.com > A - IPv4 address > Alias: Yes
  • Choose the example.com s3 bucket from the Alias Target drop down list (bucket and domain must match.)
  • Save and go to example.com to view your website.

Create CloudFront

  • Create distribution
  • Web > Get Started
  • Complete Form:
    • Origin Domain Name: Amazon S3 Bucket > example.com.assets.s3.amazonaws.com
    • Origin Path: /
    • Origin ID: S3-example.com.assets
    • Restrict Bucket Access: Yes
    • Viewer Protocol Policy: HTTP and HTTPS
    • Allowed HTTP Methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
    • Alternate Domain Names (CNAMEs): cdn.example.com
    • All other fields leave as the default settings.
  • Copy the domain name listed for the Distribution.
  • Go back to Route 53 and Create a Record Set in the Hosted Zone for cdn.example.com CNAME with the Value of the copied CloudFront Distribution domain name.
  • Upload something to the S3 bucket and once the Distribution is ready, try to access the file with the domain name.

Setup Hugo Locally

Upload Hugo files to S3

  • Upload the Hugo files to the S3 bucket example.com.updates

Prepare Lambda zip file

  • Download hugo_0.15_linux_amd64.tar.gz or hugo_0.16_linux-64bit.tgz from https://github.com/spf13/hugo/releases.
  • Uncompress the downloaded file and rename the Hugo binary to “hugo”.
  • In the same directory, download the runHugo.py file.
  • Open the runHugo.py file and replace: asset_bucket, src_bucket, dest_bucket and theme_name.
  • Zip the files by selecting all and compressing. Do not compress the files using the parent folder.
  • Upload the zip file to the example.com.lambda bucket.
  • Click the file just uploaded and in properties, copy the Link of the file.

Create the Lambda Function

  1. Create a new Lambda Function; skip selecting blueprint.
    • Name the function and choose Python 2.7.
    • Choose “Upload a file from Amazon S3”
    • Paste the Link copied from the previous section into “S3 link URL” textbox.
    • Use the Lambda_basic_execution Role (existing or create new.)
    • Change the timeout to 10 seconds.
    • Leave the rest of the settings default. You can choose your own VPC, but I’m choosing “No VPC” in this configuration.
    • Review and Create.
  2. Once it’s created, click the “Event Sources” tab > Add Event Source.
  3. Choose “S3” for the “Event source type”.
  4. Complete the form:
    • Bucket: example.com.update
    • Event type: Object Created > PUT
    • Prefix: content
    • Suffix: md
    • Enable event source: Check
    • Submit
  5. This will create a trigger event for when a .md file is uploaded to the content directory of the example.com.update bucket.

Try it!

  • Create a new post locally. When done, upload the file to the example.com.update/content bucket and folder. Wait a few seconds and check your site. It should have your latest post created.

AWS Costs for creating this project

  • AWS provides a lot of services for free for the first 12 months of sign up and beyond. More information can be found on AWS pricing pages.
  • Cost should be less than $1 to create this project. If you decide to keep this project up and running it could cost as low as $5-10/month depending on how much storage is used, frequency of updates, and traffic to your site.
  • Lambda pricing cost - Doesn’t start to charge until you’ve made 1 million requests and gone over 400,000 GB-Seconds (each billed separately.)
  • Route 53 pricing cost - Cost $.50 a month to host a domain and $0.40 per 1,000,000 queries for the first 1 Billion queries.
  • CloudFront pricing cost - Depending on the region your user is coming from and the number of requests will determine the cost.
  • S3 pricing cost - Depends on region, for Oregon, first 1 TB / month is $0.0300 per GB.

Resources