-
Notifications
You must be signed in to change notification settings - Fork 157
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Documentation edits made through Mintlify web editor
- Loading branch information
1 parent
d8103b9
commit 569c671
Showing
57 changed files
with
768 additions
and
3,070 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,46 +7,20 @@ import SubpathGatingSnippet from "/snippets/custom-subpath-gating.mdx"; | |
|
||
<SubpathGatingSnippet platform="Cloudflare" /> | ||
|
||
## Create Cloudflare Worker | ||
## Quick Setup Guide | ||
|
||
Navigate to the `Workers & Pages > Create application > Create worker`. You | ||
should be able to presented with the following screen where you can create a new | ||
Cloudlfare worker. | ||
1. Create a new Cloudflare Worker at `Workers & Pages > Create application > Create worker` | ||
|
||
<Frame> | ||
<img alt="Create a Cloudflare worker" src="/images/cloudflare/worker.png" /> | ||
</Frame> | ||
2. Configure custom domain: | ||
- Go to `Settings > Triggers` | ||
- Click `Add Custom Domain` | ||
- Add your domain (with and without `www.`) | ||
|
||
### Add custom domain | ||
|
||
Once the worker is created, click `Configure worker`. Navigate to the worker | ||
`Settings > Triggers`. Click on `Add Custom Domain` to add your desired domain | ||
into the list - we recommend you add both the version with and without `www.` | ||
prepended to the domain. | ||
|
||
<Frame> | ||
<img | ||
alt="Cloudflare worker custom domain" | ||
src="/images/cloudflare/custom-domain.png" | ||
/> | ||
</Frame> | ||
|
||
If you have trouble setting up a custom subdirectory, | ||
[contact our support team](mailto:[email protected]) and we'll walk you through | ||
upgrading your hosting with us. | ||
|
||
### Edit Worker Script | ||
|
||
Click on `Edit Code` and add the following script into the worker's code. | ||
|
||
<Frame> | ||
<img alt="Cloudflare edit code" src="/images/cloudflare/edit-code.png" /> | ||
</Frame> | ||
|
||
<Tip> | ||
Edit `DOCS_URL` by replacing `[SUBDOMAIN]` with your unique subdomain and | ||
`CUSTOM_URL` with your website's base URL. | ||
</Tip> | ||
3. Add the worker script: | ||
- Click `Edit Code` | ||
- Copy the script below | ||
- Replace `[SUBDOMAIN]` and `[YOUR_DOMAIN]` with your values | ||
- Click `Deploy` | ||
|
||
```javascript | ||
addEventListener("fetch", (event) => { | ||
|
@@ -56,29 +30,26 @@ addEventListener("fetch", (event) => { | |
async function handleRequest(request) { | ||
try { | ||
const urlObject = new URL(request.url); | ||
// If the request is to the docs subdirectory | ||
if (/^\/docs/.test(urlObject.pathname)) { | ||
// Then Proxy to Mintlify | ||
const DOCS_URL = "[SUBDOMAIN].mintlify.dev"; | ||
const CUSTOM_URL = "[YOUR_DOMAIN]"; | ||
|
||
let url = new URL(request.url); | ||
url.hostname = DOCS_URL; | ||
|
||
let proxyRequest = new Request(url, request); | ||
|
||
proxyRequest.headers.set("Host", DOCS_URL); | ||
proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL); | ||
proxyRequest.headers.set("X-Forwarded-Proto", "https"); | ||
|
||
return await fetch(proxyRequest); | ||
} | ||
} catch (error) { | ||
// if no action found, play the regular request | ||
return await fetch(request); | ||
} | ||
} | ||
``` | ||
|
||
Click on `Deploy` and wait for the changes to propagate (it can take up to a few | ||
hours). | ||
<Note> | ||
Changes may take a few hours to propagate. For setup assistance, [contact our support team](mailto:[email protected]). | ||
</Note> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,139 +7,46 @@ import SubpathGatingSnippet from "/snippets/custom-subpath-gating.mdx"; | |
|
||
<SubpathGatingSnippet platform="AWS Services" /> | ||
|
||
## Create Cloudfront Distribution | ||
## Setup Steps | ||
|
||
Navigate to [Cloudfront](https://aws.amazon.com/cloudfront) inside the AWS console and click on `Create distribution` | ||
### 1. Create Cloudfront Distribution | ||
1. Go to [Cloudfront](https://aws.amazon.com/cloudfront) and click `Create distribution` | ||
2. Set Origin domain to `[SUBDOMAIN].mintlify.dev` | ||
3. Select `Caching Optimized` for Cache key and origin requests | ||
4. Enable security protections in WAF | ||
5. Create the distribution | ||
|
||
<Frame> | ||
![Cloudfront Create Distribution](/images/cloudfront/create-distribution.png) | ||
</Frame> | ||
|
||
For the Origin domain, input `[SUBDOMAIN].mintlify.dev` where `[SUBDOMAIN]` is the project's unique subdomain. Click on `Use: [SUBDOMAIN].mintlify.dev` | ||
|
||
<Frame>![Cloudfront Origin name](/images/cloudfront/origin-name.png)</Frame> | ||
|
||
For **Cache key and origin requests**, select `Caching Optimized`. | ||
|
||
<Frame> | ||
![Cloudfront Caching policy](/images/cloudfront/caching-policy.png) | ||
</Frame> | ||
|
||
And for **Web Application Firewall (WAF)**, enable security protections | ||
|
||
<Frame> | ||
![Cloudfront Caching | ||
policy](/images/cloudfront/enable-security-protections.png) | ||
</Frame> | ||
|
||
The remaining settings should be default. Click `Create distribution`. | ||
|
||
## Add Default Origin | ||
|
||
After creating the distribution, navigate to the `Origins` tab. | ||
|
||
<Frame>![Cloudfront Origins](/images/cloudfront/origins.png)</Frame> | ||
|
||
We want to find a staging URL that mirrors where the main domain (example.com). This is highly variant depending on how your landing page is hosted. | ||
|
||
<Info> | ||
For instance, if your landing page is hosted on Webflow, you can use the | ||
Webflow's staging URL. It would look like `.webflow.io`. | ||
|
||
If you use Vercel, you use the `.vercel.app` domain available for every project. | ||
|
||
</Info> | ||
<Note> | ||
|
||
If you're unsure on how to get a staging URL for your landing page, [contact | ||
support](mailto:[email protected]) and we'd be happy to help | ||
|
||
</Note> | ||
|
||
Once you have the staging URL, ours for instance is [mintlify-landing-page.vercel.app](https://mintlify-landing-page.vercel.app), create a new Origin and add it as the **Origin domain**. | ||
|
||
<Frame> | ||
![Cloudfront Default Origins](/images/cloudfront/default-origin.png) | ||
</Frame> | ||
|
||
By this point, you should have two Origins - one with `[SUBDOMAIN].mintlify.app` and another with with staging URL. | ||
|
||
## Set Behaviors | ||
|
||
Behaviors in Cloudfront enables control over the subpath logic. At a high level, we're looking to create the following logic. | ||
|
||
- **If a user lands on /docs**, go to `[SUBDOMAIN].mintlify.dev` | ||
- **If a user lands on any other page**, go the current landing page | ||
|
||
We're going to create three behaviors by clicking on the `Create behavior` button. | ||
|
||
### `/docs/*` | ||
|
||
The first behavior should have a **Path pattern** of `/docs/*` with **Origin and origin groups** pointing to the `.mintlify.dev` URL (in our case `acme.mintlify.dev`) | ||
|
||
<Frame>![Cloudfront Behavior 1](/images/cloudfront/behavior-1.png)</Frame> | ||
|
||
For **Cache policy**, select `CachingOptimized` and create behavior. | ||
|
||
### `/docs` | ||
|
||
The second behavior should be the same as the first one but with a **Path pattern** of `/docs` and **Origin and origin groups** pointing to the same `.mintlify.dev` URL. | ||
|
||
<Frame>![Cloudfront Behavior 2](/images/cloudfront/behavior-2.png)</Frame> | ||
|
||
### `Default (*)` | ||
|
||
Lastly, we're going to edit the `Default (*)` behavior. | ||
|
||
<Frame> | ||
![Cloudfront Behavior Default 1](/images/cloudfront/default-behavior-1.png) | ||
</Frame> | ||
|
||
We're going to change the default behavior's **Origin and origin groups** to the staging URL (in our case `mintlify-landing-page.vercel.app`). | ||
|
||
<Frame> | ||
![Cloudfront Behavior Default 2](/images/cloudfront/default-behavior-2.png) | ||
</Frame> | ||
|
||
Click on `Save changes`. | ||
|
||
## Preview Distribution | ||
|
||
You can now test if your distribution is set up properly by going to the `General` tab and visiting the **Distribution domain name** URL. | ||
|
||
<Frame> | ||
![Cloudfront Preview | ||
distribution](/images/cloudfront/preview-distribution.png) | ||
</Frame> | ||
|
||
All pages should be directing to your main landing page, but if you append `/docs` to the URL, you should see it going to the Mintlify documentation instance. | ||
|
||
## Connecting it with Route53 | ||
|
||
Now, we're going to bring the functionality of the Cloudfront distribution into your primary domain. | ||
### 2. Configure Origins | ||
1. Navigate to `Origins` tab | ||
2. Add a second origin with your landing page staging URL (e.g., `.webflow.io` or `.vercel.app` domain) | ||
|
||
<Note> | ||
For this section, you can also refer to AWS's official guide on [Configuring | ||
Amazon Route 53 to route traffic to a CloudFront | ||
distribution](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/routing-to-cloudfront-distribution.html#routing-to-cloudfront-distribution-config) | ||
Need help finding your staging URL? [Contact support](mailto:[email protected]) | ||
</Note> | ||
|
||
Navigate to [Route53](https://aws.amazon.com/route53) inside the AWS console, and click into the `Hosted zone` for your primary domain. Click on `Create record` | ||
### 3. Set Behaviors | ||
Create three behaviors to control routing: | ||
|
||
<Frame> | ||
![Route 53 create record](/images/cloudfront/route53-create-record.png) | ||
</Frame> | ||
1. **`/docs/*` behavior** | ||
- Origin: `[SUBDOMAIN].mintlify.dev` | ||
- Cache policy: CachingOptimized | ||
|
||
Toggle `Alias` and then **Route traffic to** the `Alias to CloudFront distribution` option. | ||
2. **`/docs` behavior** | ||
- Same settings as `/docs/*` | ||
|
||
<Frame> | ||
![Route 53 create record alias](/images/cloudfront/create-record-alias.png) | ||
</Frame> | ||
3. **`Default (*)` behavior** | ||
- Origin: Your staging URL | ||
- This handles all other routes | ||
|
||
Click `Create records`. | ||
### 4. Connect with Route53 | ||
1. Go to Route53 and select your domain's Hosted zone | ||
2. Create a new record | ||
3. Enable `Alias` and select `Alias to CloudFront distribution` | ||
4. Remove any existing A record if present | ||
|
||
<Note> | ||
You may need to remove the existing A record if one currently exists. | ||
For detailed Route53 setup, see AWS's [official guide](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/routing-to-cloudfront-distribution.html#routing-to-cloudfront-distribution-config) | ||
</Note> | ||
|
||
And voila! You should be able to have your documentation served at `/docs` for your primary domain. | ||
## Verification | ||
Test your setup by visiting the Distribution domain name URL in the `General` tab. The `/docs` path should show your Mintlify documentation, while other paths should show your main landing page. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.