Amazon web services CloudFront with subdirectory

Well, this is my second post after Jekyll for static website scenario. Jekyll is perfect and what it does is just generate set of static files (i.e. html linking to certain stylesheets and / or javascript files or CDNs). Nice one! So check this out if you have not yet.

There are several ways of hosting and distributing its files across global network (of course Github pages), self-owned VPS (i.e. AWS Lightsail or DigitalOcean). This time I have another way to do this. Amazon web services (AWS) with S3 bucket and further with CloudFront distribution.

Set up S3 bucket with static site

The very fist thing we need to do is to enable our S3 bucket serving our content out for global network. To do this we need to go to bucket properties and enable «Static Website Hosting». The most important part here is to set what default file should be root for certain folder. The problem is that CloudFront does not inherit this this for folders other than root. Basically what I want to enable is to have my content served as example.com/my-content1 or example.com/my-content2 for better SEO. And, to be honest I think that having .html in web-site address at the end is such a bad practise and smell 90s :)

S3 bucket configuration

It is not important (if you plan CloudFront) how your bucket available (permissions). I just disallowed all. Ok this is 50% of the challenge.

CloudFront distribution for web site

Now we almost ready for further set up. We need to create new distribution and add origin. Origin is the content. And my workaround is not to select the bucket itself (which is given as default option when you set origin by autocomplete), but bucket endpoint.

S3 static website endpoint

Why this is important? Well, if you really need to solve the challenge that I had (access subfolders with index.html files that Jekyll can generate when you set config.yml permalink as for example :slug/, what means it builds static post in it subfolder naming slug and pasting index.html inside).
Once CloudFront configured, you need to wait a bit ~ 10-15 minutes for caching across all selected edge locations of Amazon (look for "In progress" status, once it's gone, you can check).


In short, this is about:
#cloudfront
#amazon s3
#amazon

Start discussion:
Related articles:
122 what is possible with aws free tier preview
I made light talk on one of our recent #AWSRus community gathering in Moscow and decided to discover this topic with further series of posts in my blog covering various AWS services. ... more
81 mount aws s3 bucket to your el capitan preview
Learn how to mount S3 bucket to your Mac OS ... more
120 ec2 user data script example preview
Launching AWS EC2 can be supplied by something what is known as "user data" and it helps to have things ready before you access it. ... more
111 data backup and disaster recovery with aws preview
CloudAcademy webinar: how to use AWS services for Backup and DR challenges. I am presenter! ... more
118 how to send sms using amazon sns and python preview
Send text messages (SMS) with few lines of Python code using Amazon SNS and boto3 SDK. ... more
79 mount aws s3 bucket to your debian preview
In this very short tutorial we are going to mount S3 bucket from AWS to the local folder of Debian. ... more
88 amazon solutions architect associate exam preview
August, 9th, 2016 - passed my Amazon CSAA. Few tips I'd love to share here. ... more
101 aws ec2 linux backup preview
Amazon Web Services (AWS) has its own AWS Linux AMI (also free tier). There are several reasons you want to use this AMI for your projects. ... more
110 awsrus russian st petersburg user group for aws preview
AWSRus — Official AWS User Group Russia (St. Petersburg). ... more
116 aws efs windows preview
AWS Elastic File System is scalable file system in the cloud, requires NFSv4.1 client and does not support Windows at the moment. However let's see what we can do.. ... more
119 smtp server for notifications preview
AWS SES supports SMTP settings for sending through it-self. This is really helpful if we want to configure personal outbound server. ... more
117 seo friendly aws static website with ssl preview
It's been written many times, however there is no consistency how to make static web site with SSL and SEO friendly urls (301 redirect). Pure AWS based services static website ahead, check details inside! ... more
121 aws ec2 user data script windows preview
How to pre-deploy App using user data script for Windows OS with powershell powered script in EC2? Example inside. ... more