All Collections
Personal websites
William Channel
Using your own domain 🌐
William - Reverse-proxy your Wiliam Blog: Cloudfront example
William - Reverse-proxy your Wiliam Blog: Cloudfront example

Cloudfront example showing how you can reverse proxy your William blog.

Gregory Claeyssens avatar
Written by Gregory Claeyssens
Updated over a week ago

⚠️ Caution: The following article assumes technical knowledge of web servers and related concepts and terminology.

In most organizations, the person who can perform the steps described in this article will be a web administrator (or similar).

This guide also assumes that you have reverse proxy capability available and set up on your website.

See this article for a general overview of reverse proxying your William blog.

Check out the CloudFront example

Step 1. Setting up your origin

The origin defines where our reverse proxy should be fetching the actual pages. The domain name should reflect your public blog link (eg

πŸ”” Note: We append a header "X-Referrer: "StoryChief" to the request so StoryChief knows to handle it as a reversed proxy domain.

Step 2. Configure the behavior

We want to trigger our behavior for each request to /blog* and forward it to our created origin. In this example, we allow all HTTP verbs, but you can safely filter it to only pass GET, HEAD, and OPTIONS too.

Notice we configured all caching options to disable caching altogether.

Lastly, we attached a lambda @edge function to the behavior to modify the Host header and URI for each request.

The Lambda function:

'use strict';

exports.handler = (event, context, callback) => {
const request = event.Records[0].cf.request;

if (request.uri === "/blog") {
request.uri = "/blog/";
request.uri = request.uri.replace(/^\/blog/,'');[0].value = '';

return callback(null, request);

This function removes the /blog prefix of each request URI before sending it to the origin as well as making sure the Host header is the origin one.

πŸ“š Next steps

Did this answer your question?