Skip to content

Commit 5c79e3c

Browse files
ethanpalmethanpalm
committed
upadte formatting
1 parent b373cfe commit 5c79e3c

File tree

1 file changed

+110
-101
lines changed

1 file changed

+110
-101
lines changed

‎advanced/subpath/cloudflare.mdx‎

Lines changed: 110 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -5,137 +5,146 @@ description: "Host documentation at a /docs subpath using Cloudflare Workers"
55

66
## Create Cloudflare Worker
77

8-
Navigate to the `Workers & Pages > Create application > Create worker`. You
9-
should be presented with the following screen where you can create a new
10-
Cloudflare worker.
8+
1. In Cloudflare, navigate to the **Create an application** page in the **Workers & Pages** settings.
9+
2. Select **Create worker**.
1110

1211
<Frame>
13-
<img alt="Create a Cloudflare worker" src="/images/cloudflare/worker.png" />
12+
<img alt="The Cloudflare Workers & Pages settings page with the Create Worker button emphasized." src="/images/cloudflare/worker.png" />
1413
</Frame>
1514

16-
<Warning>
17-
Keep in mind: If your DNS provider is Cloudflare you should not use proxying for the CNAME record.
18-
</Warning>
19-
20-
### Add custom domain
21-
22-
Once the worker is created, click `Configure worker`. Navigate to the worker
23-
`Settings > Triggers`. Click on `Add Custom Domain` to add your desired domain
24-
into the list - we recommend you add both the version with and without `www.`
25-
prepended to the domain.
15+
## Add custom domain
16+
17+
1. Select **Configure Worker**.
18+
2. Navigate to **Triggers** section of the Settings tab.
19+
3. Select **Add Custom Domain**.
20+
4. Add your domain to the list. We recommend that you add your domain both with and without `www.` prepended.
2621

2722
<Frame>
2823
<img
29-
alt="Cloudflare worker custom domain"
24+
alt="The Cloudflare Triggers settings page with Add Custom Domain emphasized."
3025
src="/images/cloudflare/custom-domain.png"
3126
/>
3227
</Frame>
3328

34-
If you have trouble setting up a custom subdirectory,
35-
[contact our support team](https://mintlify.com/docs/support) and we'll walk you through
36-
upgrading your hosting with us.
29+
<Warning>
30+
If your DNS provider is Cloudflare, you should not use proxying for the CNAME record.
31+
</Warning>
32+
33+
## Configure routing
3734

38-
### Edit Worker Script
35+
Choose a setup option based on whether you are hosting other content at your root domain:
3936

40-
Click on `Edit Code` and add the following script into the worker's code.
37+
* **Docs-only**: Serve documentation at `/docs` with no other content at your domain.
38+
* **Multiple origins**: Serve documentation at `/docs` while hosting your main site at the root domain.
4139

42-
<Frame>
43-
<img alt="Cloudflare edit code" src="/images/cloudflare/edit-code.png" />
44-
</Frame>
40+
### Docs-only setup
41+
42+
1. Select `Edit Code` and add the following script into the Worker's code.
4543

46-
<Tip>
47-
Edit `DOCS_URL` by replacing `[SUBDOMAIN]` with your unique subdomain and
48-
`CUSTOM_URL` with your website's base URL.
49-
</Tip>
44+
<Frame>
45+
<img alt="Edit Code button emphasized in the Cloudflare user interface." src="/images/cloudflare/edit-code.png" />
46+
</Frame>
5047

51-
```javascript
52-
addEventListener("fetch", (event) => {
53-
event.respondWith(handleRequest(event.request));
54-
});
48+
<Tip>
49+
Replace `[SUBDOMAIN]` with your unique subdomain and `[YOUR_DOMAIN]` with your website's base URL.
50+
</Tip>
5551

56-
async function handleRequest(request) {
57-
try {
58-
const urlObject = new URL(request.url);
59-
// If the request is to the docs subdirectory
60-
if (/^\/docs/.test(urlObject.pathname)) {
61-
// Then Proxy to Mintlify
62-
const DOCS_URL = "[SUBDOMAIN].mintlify.dev";
63-
const CUSTOM_URL = "[YOUR_DOMAIN]";
52+
```javascript
53+
addEventListener("fetch", (event) => {
54+
event.respondWith(handleRequest(event.request));
55+
});
6456

65-
let url = new URL(request.url);
66-
url.hostname = DOCS_URL;
57+
async function handleRequest(request) {
58+
try {
59+
const urlObject = new URL(request.url);
60+
// If the request is to the docs subdirectory
61+
if (/^\/docs/.test(urlObject.pathname)) {
62+
// Then Proxy to Mintlify
63+
const DOCS_URL = "[SUBDOMAIN].mintlify.dev";
64+
const CUSTOM_URL = "[YOUR_DOMAIN]";
6765

68-
let proxyRequest = new Request(url, request);
66+
let url = new URL(request.url);
67+
url.hostname = DOCS_URL;
6968

70-
proxyRequest.headers.set("Host", DOCS_URL);
71-
proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL);
72-
proxyRequest.headers.set("X-Forwarded-Proto", "https");
69+
let proxyRequest = new Request(url, request);
7370

74-
return await fetch(proxyRequest);
71+
proxyRequest.headers.set("Host", DOCS_URL);
72+
proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL);
73+
proxyRequest.headers.set("X-Forwarded-Proto", "https");
74+
75+
return await fetch(proxyRequest);
76+
}
77+
} catch (error) {
78+
// If no action found, serve the regular request
79+
return await fetch(request);
7580
}
76-
} catch (error) {
77-
// If no action found, play the regular request
78-
return await fetch(request);
7981
}
80-
}
81-
```
82+
```
83+
2. Select `Deploy` and wait for the changes to propagate, which can take up to a few hours.
8284

83-
Click on `Deploy` and wait for the changes to propagate (it can take up to a few
84-
hours).
85+
### Multiple origins setup
8586

86-
### Routing multiple origins
87+
If you use a website builder, like Webflow or Squarespace, or another hosting provider for your main site, configure multiple origins to also host your docs at a `/docs` subdirectory. This setup requires a staging environment because the Worker will proxy all non-docs traffic to your main site.
8788

88-
If you're using a website builder, like Webflow or Squarespace, or another hosting provider for your main site and want to host your docs at a `/docs` subdirectory:
89-
1. Set up a staging domain for your main site like `staging.yoursite.com`.
90-
2. Update any absolute URLs in your main site to be relative.
91-
3. Use the enhanced worker script below that routes between both origins.
89+
1. With your hosting provider, set up a staging domain for your main site like `staging.yoursite.com`.
90+
2. Deploy your main to the staging domain. This ensures that your main site remains accessible while you configure the Worker.
91+
3. Update any absolute URLs in your main site to be relative to avoid conflicts.
92+
4. In Cloudflare, select **Edit Code** and add the following script into the Worker's code.
93+
<Frame>
94+
<img alt="Edit Code button emphasized in the Cloudflare user interface." src="/images/cloudflare/edit-code.png" />
95+
</Frame>
9296

93-
<Warning>
94-
Make sure your main site is set up on a staging domain before deploying this worker, or visitors to your main site will see errors.
95-
</Warning>
97+
<Tip>
98+
Replace `[SUBDOMAIN]` with your unique subdomain, `[YOUR_DOMAIN]` with your website's base URL, and `[STAGING_DOMAIN]` with your staging domain URL.
99+
</Tip>
96100

97-
```javascript
98-
addEventListener("fetch", (event) => {
99-
event.respondWith(handleRequest(event.request));
100-
});
101-
102-
async function handleRequest(request) {
103-
try {
104-
const urlObject = new URL(request.url);
105-
106-
// If the request is to the docs subdirectory
107-
if (/^\/docs/.test(urlObject.pathname)) {
108-
// Proxy to Mintlify
109-
const DOCS_URL = "[SUBDOMAIN].mintlify.dev";
110-
const CUSTOM_URL = "[YOUR_DOMAIN]";
111-
112-
let url = new URL(request.url);
113-
url.hostname = DOCS_URL;
114-
115-
let proxyRequest = new Request(url, request);
101+
```javascript
102+
addEventListener("fetch", (event) => {
103+
event.respondWith(handleRequest(event.request));
104+
});
105+
106+
async function handleRequest(request) {
107+
try {
108+
const urlObject = new URL(request.url);
116109

117-
proxyRequest.headers.set("Host", DOCS_URL);
118-
proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL);
119-
proxyRequest.headers.set("X-Forwarded-Proto", "https");
110+
// If the request is to the docs subdirectory
111+
if (/^\/docs/.test(urlObject.pathname)) {
112+
// Proxy to Mintlify
113+
const DOCS_URL = "[SUBDOMAIN].mintlify.dev";
114+
const CUSTOM_URL = "[YOUR_DOMAIN]";
115+
116+
let url = new URL(request.url);
117+
url.hostname = DOCS_URL;
118+
119+
let proxyRequest = new Request(url, request);
120+
121+
proxyRequest.headers.set("Host", DOCS_URL);
122+
proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL);
123+
proxyRequest.headers.set("X-Forwarded-Proto", "https");
124+
125+
return await fetch(proxyRequest);
126+
}
120127

121-
return await fetch(proxyRequest);
122-
}
123-
124-
// For multiple origins: route everything else to main site
125-
const MAIN_SITE_URL = "[STAGING_DOMAIN]"; // example: staging.yoursite.com
126-
if (MAIN_SITE_URL && MAIN_SITE_URL !== "[STAGING_DOMAIN]") {
127-
let mainSiteUrl = new URL(request.url);
128-
mainSiteUrl.hostname = MAIN_SITE_URL;
128+
// Route everything else to main site
129+
const MAIN_SITE_URL = "[STAGING_DOMAIN]";
130+
if (MAIN_SITE_URL && MAIN_SITE_URL !== "[STAGING_DOMAIN]") {
131+
let mainSiteUrl = new URL(request.url);
132+
mainSiteUrl.hostname = MAIN_SITE_URL;
133+
134+
return await fetch(mainSiteUrl, {
135+
method: request.method,
136+
headers: request.headers,
137+
body: request.body
138+
});
139+
}
129140

130-
return await fetch(mainSiteUrl, {
131-
method: request.method,
132-
headers: request.headers,
133-
body: request.body
134-
});
141+
} catch (error) {
142+
// If no action found, serve the regular request
143+
return await fetch(request);
135144
}
136-
137-
} catch (error) {
138-
// If no action found, play the regular request
139-
return await fetch(request);
140145
}
141-
}
146+
```
147+
4. Select `Deploy` and wait for the changes to propagate, which can take up to a few hours.
148+
<Warning>
149+
Make sure your main site is set up on a staging domain before deploying this worker, or visitors to your main site will see errors.
150+
</Warning>

0 commit comments

Comments
 (0)