<< All Posts

How to host your static S3 blog under /blog on your www domain with CloudFront

Step by step instructions on how to use CloudFront as a reverse proxy to point a subdirectory to an S3 static site.

Hosting a blog on AWS S3 using a static site generator has many advantages. S3 is cheap, fully managed, and scales infinitely - making it the perfect static site host. Simply upload your static assets (HTML, CSS, JavaScript, images, etc.) into the bucket, enable it as web server with a single click, and your in business. Front the bucket with CloudFront (CDN) to supercharge the delivery of your content to users via the 100+ edge locations around the globe.

This solution is often a more suitable choice than self-hosting a content management system such as WordPress, which requires maintenance and updates, scaling configuration, and incurring the cost of running one or more virtual machines (ie. EC2).

The challenge we faced when deciding to go the S3 static site route for this blog, was the undesirable scenario of having to point a subdomain to the bucket - https://blog.uphail.com. Using a subdomain bifurcates the website, which may have SEO implications according to the age-old subdomain vs. subdirectory debate. Evidence suggest that the subdirectory is the more desirable approach. Furthermore, subdomains add additional overhead such as separate profiles for Google Search Console and configuring cross domain tracking in Google Analytics.

Our www and apex domain - https://www.uphail.com/ point to a CloudFront distribution in front of our Elastic Loader Balancer (ELB) as our application runs on EC2 instances via Elastic Beanstalk.

The solution we implemented in order to have https://www.uphail.com/ point to our ELB and https://uphail.com/blog point to S3, is by using CloudFront multiple origins, similar to the reference architecture below:


Here are step by step instructions how we configured it:

  1. Create an S3 bucket to host your static assets. It is recommended that you keep the bucket private, and restrict access to CloudFront.

  2. Click the bucket name, followed by the Properties tab. Click on Static website hosting, then select Use this bucket to host a website and enter the text blog as the index document. Note: You can use any name of your choosing, however it must match the path pattern on step 9.

  3. Upload or deploy your website static assets to the S3 bucket. Name the index file (typically the index.html) blog without any extensions. Create a new folder named blog which will store your posts and other blog content. Note: You can use any name of your choosing, however it must match the path pattern on step 9.

  4. Click the checkbox next to the blog file and click the Actions drop down menu. Select Change metadata. Set the Content-Type key to the value of text/html.

  5. Head over to CloudFront, and click on the ID for the distribution where the origin is the Elastic Load Balancer. Make sure your domain name is listed as an alternate domain names (CNAMEs)

  6. Click on the Origin tab, and the Create Origin button. Select the S3 bucket for the blog next to Origin Domain Name. Click the Create button.

  7. You should now see the S3 bucket listed under the Origins tab.

  8. Click the Behaviors tab, and the Create Behavior button. Enter a path pattern such as blog*. The * is used to match all URLs that contain blog in the path. Select the S3 blog from the Origin drop down. Select None for Cache Based on Selected Request Headers. Click the Create button.

  9. You should now see the path pattern and S3 origin listed under the Behaviors tab.

  10. In conclusion, S3 is a great place to host a blog, and you can use the subfolder approach as we have done by using CloudFront as a reverse proxy.

    Questions, comments, feedback: info at uphail dot com.

Tags: AWS, CloudFront