![How to configure Sub-folders with AWS Cloudfront on Feather](https://cdn.feather.blog?src=https%3A%2F%2Fwww.notion.so%2Fimage%2Fhttps%3A%252F%252Fprod-files-secure.s3.us-west-2.amazonaws.com%252F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%252Ff408e6df-06b2-493e-bfe0-7b83755cf4f0%252FFeather_(7).png%3Ftable%3Dblock%26id%3D2bc6d7f5-2b1a-41e6-9163-c2179a59e34e%26cache%3Dv2&optimizer=image&quality=80&width=280)
Do not index
Do not index
Whenever your site’s DNS records are hosted on AWS Route 53, this is the way to go. Any type of website can be configured using this method, the site can be in NextJS, webflow, framer,..etc, and this single method will work for all.
Our aim is to add Cloudfront in front of the site hosting setup.
Let’s say your main domain is
www.imhereonlyfortesting.com
and feather blog url is imhereonlyfortesting.feather.blog
and you are choosing to host on /blog
sub-folder. To configure following, let’s get started,1. Go to Cloudfront and click on create distribution
2. Add following configurations under “Origin”
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F81cac190-9fd6-4fe9-b910-b3c314f376c4%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F16a2d88b-c9a7-4090-a47c-a71d86fdbba8%2FCleanShot_2024-06-22_at_12.34.182x.png&optimizer=image&quality=80&width=280)
Make sure to add your feather domain in “Origin domain” field and your main domain in Header’s value field.
3. Add following configurations for Default cache behavior
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F4f157d21-5d55-42bc-bd73-6b693a83c7e8%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F45e4b966-d819-4302-bfd2-05af4885798f%2FCleanShot_2024-06-22_at_12.36.562x.png&optimizer=image&quality=80&width=280)
4. Function associations & Web Application Firewall setting will look like this
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2Ff748610e-56c7-4038-883f-ded400848413%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F14477367-9436-4054-b14a-fb2f01033489%2FCleanShot_2024-06-22_at_11.57.482x.png&optimizer=image&quality=80&width=280)
5. Add the following settings.
If you do not have a Custom SSL Certificate, you can easily get it by pressing “Request Certificate”. I’ll will show you how to do that after this setup.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2Fc2421747-3d25-4dfc-b775-c44c275acd55%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F71363c2e-88ac-4285-9fd2-c78d66d25e99%2FCleanShot_2024-06-22_at_13.00.382x.png&optimizer=image&quality=80&width=280)
Custom SSL is required! Do not proceed without it. If you do not have onc, you can easily create by following below steps.
Optional step: if you don’t have custom SSL certificate
I. Click on “Request Certificate”
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2Fb286f1d4-f992-408f-bbf3-0cc229461ea5%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F5847aa2d-abc9-42c4-a14c-cbda2048add9%2FCleanShot_2024-06-22_at_12.43.232x.png&optimizer=image&quality=80&width=280)
II. It will take you to AWS certificate manager. Select “Request a public certificate” option and press Next.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F0f712366-3416-44f4-8403-43a497d9531f%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F13b6be5d-55f9-4b96-8ae0-9e808a37fca9%2FCleanShot_2024-06-22_at_12.45.232x.png&optimizer=image&quality=80&width=280)
III. Add your main domain in “Full qualified domain name” field and press Request.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2Fdd1c967c-bb75-4c1d-93d1-3fe03bb45d45%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2Fb1b2814a-318b-4686-aae3-55e2b56d76f0%2FCleanShot_2024-06-22_at_12.48.122x.png&optimizer=image&quality=80&width=280)
IV. Certificate will get generated but you will notice it shows pending validation. To make it a success, we will have to add the generate validation record to our DNS. To do that press on “Create records in Route 53” button
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F79aae0d2-dccc-4c10-93b6-2a12ce802ab3%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F800ca911-c741-4254-82aa-7bd99aaa346f%2FCleanShot_2024-06-22_at_12.50.512x.png&optimizer=image&quality=80&width=280)
V. It will take you here and now click “Create records”
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F204b3cb8-5397-4110-a337-3c8dadc4d119%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2Fc75c3bd6-d152-4d60-9c7e-5abc001646d7%2FCleanShot_2024-06-22_at_12.53.352x.png&optimizer=image&quality=80&width=280)
VI. After you submit, you will be redirected to our certificate. After few minutes, refresh the page. It should show “Status as issued” and “Status as Success”.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F7b828ae4-cade-4661-af86-e52b67daf090%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2Fa82d012f-d8f9-43be-b642-fcf4bc3330a5%2FCleanShot_2024-06-22_at_12.57.142x.png&optimizer=image&quality=80&width=280)
You have successfully generated the certificate. You can now go back to step 5.
6. Once you finish above steps, distribution will get created and it will show such pending state for few minutes
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F628a47fd-ec87-4cba-ba56-35bd39e0b7d6%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2Faf03e62f-e2b8-4b7a-8668-b22462a37107%2FCleanShot_2024-06-22_at_13.05.432x.png&optimizer=image&quality=80&width=280)
7. Add Cloudfront distribution to hosted zone
Go to Route 53 > Hosted zones > [select your hosted zone]. Press on Create record.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2Fd82c8eb1-d530-490a-ba80-1260bd913bca%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F2ddc5081-7525-4bc1-85f7-1bc35b27aa90%2FCleanShot_2024-06-22_at_16.52.252x.png&optimizer=image&quality=80&width=280)
Select A record and enable the alias toggle then select Alias to cloudfront distribution from the dropdown. Make sure to add the Record name depending on your configuration.
Then under choose distribution, select the new distribution that you just created. Press “Create record”.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2Fa0752fab-6f97-4cc2-a89b-5895cee4afd7%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F99a13fe6-7e31-4e48-96b6-ddfb4dbce544%2FCleanShot_2024-06-22_at_16.57.352x.png&optimizer=image&quality=80&width=280)
Note if you already have an A record or a CNAME record with the same record name in the DNS, the Create records will fail. A record name can only have a single DNS configuration with that record name, it can either be A record or a CNAME record.
Chance are you will have mostly have CNAME or A record with this record name. What you can do here is point that A record or CNAME record to a different record name then in cloudfront we can configure the behaviour and get it to point it to this new record name.
This is super complicated feel free to contact support@feather.so, we will help you with this.
8. Add behaviour to cloudfront distribution
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F4054fae6-7d7f-4423-beec-a762353bc1a6%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2Fef0a50ef-6429-41bc-884d-a6e25282a1b1%2FCleanShot_2024-06-22_at_17.17.282x.png&optimizer=image&quality=80&width=280)
Add configuration for
/blog
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F4716302f-c681-49d9-807b-2752cb6ae92b%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F89adebd0-7a3c-4fe3-a635-441b57e04755%2FCleanShot_2024-06-22_at_17.24.012x.png&optimizer=image&quality=80&width=280)
Add configuration for
/_feather
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2Fc10f49f7-0c26-4918-a1ce-6198adfaef9e%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2Fa1a884a9-419b-4f93-94ac-1f615625fe84%2FCleanShot_2024-06-22_at_17.27.442x.png&optimizer=image&quality=80&width=280)
9. Create an origin that points to where your actual site is hosted
When you add cloudfront in front of the domain all the requests goes through cloudfront first. We need to configure cloudfront that for the routes other than/blog
, points to where our site is hosted.
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2Fab7549dc-c532-4147-bc76-2f49708dc8ab%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F31d303f0-936a-4851-badb-f75c4b6aa484%2FCleanShot_2024-06-22_at_17.30.242x.png&optimizer=image&quality=80&width=280)
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2Fee735af3-6303-4821-b1e3-19b219f5d7d9%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F4578143e-cf41-4dff-9d78-e972499fa8c7%2FCleanShot_2024-06-22_at_17.34.372x.png&optimizer=image&quality=80&width=280)
10. Use the origin created in above setup for default behaviour
Go to Behaviors > Select Default > Press edit
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2Fca17a995-4dee-445b-b2c2-64ff19da8066%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F8e051cd3-3bec-42a4-90eb-f947e801c300%2FCleanShot_2024-06-22_at_17.37.402x.png&optimizer=image&quality=80&width=280)
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2Fb55a4e62-28f7-4232-8990-b4762e444cca%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F94a23b36-6569-4116-818a-96d3d81894c7%2FCleanShot_2024-06-22_at_17.40.282x.png&optimizer=image&quality=80&width=280)
Press save changes. With this our Cloudfront configurations finishes. Your main domain should work as expected. (for me
www.imhereonlyfortesting.com
will work fine).
Now go to Feather. Navigate to Settings > Features and switch on “Enable Subdirectory” features.
After that go to Settings > Sub-folder management and enter the following values,
![notion image](https://cdn.feather.blog?src=https%3A%2F%2Fusenotioncms.com%2Fproxy-prod%2Fblock%2F9afa1556-be0f-4831-b8c5-6767190c00e6%2F1631a2ee-6541-4fd1-b6c5-e6268d8d6829%2F71acbf1c-f069-405a-9fdc-0bd947cf0879%2FCleanShot_2024-06-22_at_18.05.282x.png&optimizer=image&quality=80&width=280)
Make sure to replace
www.mydomain.com
with the domain you are using and blog
with whatever sub-route you plan to use.Important Note: Under the Domains section make sure that you are using Subdomain settings. If you have added a custom domain there, please remove it. Sub-folders does not require the Custom Domain configurations and if you have it, then the sub-folder will not work.
Once you do these, your sub-folder should be live. You should be able to access your feather site on
www.mydomain.com/blog
. If it’s not reach out to us at support@feather.so.