Skip to content

Commit d57b605

Browse files
pedrosousapedrosousa
committed
Add two tutorials (origin rules and Pages / R2 with custom domain)
1 parent 36019a8 commit d57b605

File tree

2 files changed

+185
-0
lines changed

2 files changed

+185
-0
lines changed

‎src/content/docs/rules/origin-rules/tutorials/point-to-pages-with-custom-domain.mdx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
updated: 2025-04-12
3+
difficulty: Beginner
4+
pcx_content_type: tutorial
5+
title: Point to Pages with a custom domain
6+
products:
7+
- Pages
8+
- Origin Rules
9+
---
10+
11+
import { Example } from "~/components";
12+
13+
This example configures an origin rule and a DNS record to point to a Pages deployment with a custom domain.
14+
15+
The procedure will use the following example values:
16+
17+
| | |
18+
| ------------------------------------: | ------------------------------ |
19+
| URL that website visitors will access | `mycustomerexample.com/blog/*` |
20+
| Zone domain | `mycustomerexample.com` |
21+
| Cloudflare Pages subdomain | `myblog.pages.dev` |
22+
| Cloudflare Pages custom domain | `blogmirror.example.com` |
23+
24+
When configuring your Pages custom domain, use a custom domain that you do not plan to use in production (`blogmirror.example.com` in this example).
25+
26+
## 1. Configure custom domain in your Pages project
27+
28+
To add the custom domain to your Pages deployment:
29+
30+
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com) and select your account.
31+
2. Go to **Workers & Pages**. and select your Pages project.
32+
3. Go to **Custom domains**.
33+
4. Select **Set up a custom domain**.
34+
5. Enter `blogmirror.example.com` and select **Continue**.
35+
36+
When you add the custom domain to your Pages deployment, Cloudflare automatically creates a `CNAME` DNS record for the custom domain.
37+
38+
## 2. Create origin rule to rewrite host header and override DNS record
39+
40+
In your `mycustomerexample.com` zone, create an origin rule with the following configuration:
41+
42+
<Example>
43+
44+
**If incoming requests match**
45+
46+
| Field | Operator | Value |
47+
| -------- | -------- | --------- |
48+
| URI Path | wildcard | `/blog/*` |
49+
50+
If using the Expression Editor, enter the following expression:
51+
52+
```txt
53+
(http.request.uri.path wildcard "/blog/*")
54+
```
55+
56+
**Set origin parameters**
57+
58+
- Value after **Host header** > **Rewrite to**: `blogmirror.example.com`
59+
- Value after **DNS record** > **Override to**: `blogmirror.example.com`
60+
61+
</Example>
62+
63+
## 3. (Optional) Configure URL rewrite
64+
65+
In this example, the URL that website visitors will access starts with `/blog`. However, the Pages deployment does not have this initial URL segment.
66+
67+
Use a URL rewrite to remove the `/blog` segment from the URL path. Cloudflare provides a rule template in the dashboard called **Rewrite Path for Object Storage Bucket** that you can use to configure the required rewrite.
68+
69+
1. Go to **Rules** > **Overview**.
70+
2. Select **Create rule** > **URL Rewrite Rule**.
71+
3. Locate the **Rewrite Path for Object Storage Bucket** rule template, and select **Create a rule**.
72+
4. Update the rule name.
73+
5. Change the value in **Request URL** to:
74+
75+
```txt
76+
https://<YOUR_HOSTNAME>/blog/*
77+
```
78+
79+
6. Change the value in **Target path** to:
80+
81+
| Target path | Rewrite to |
82+
| ----------- | ---------- |
83+
| `blog/*` | `${1}` |
84+
85+
7. Select **Deploy**.
86+
87+
## More resources
88+
89+
- [Tutorial: Change URI Path and Host Header](/rules/origin-rules/tutorial/change-uri-path-and-host-header/)
90+
- [Cloudflare Pages: Custom domains](/pages/configuration/custom-domains/)
91+
- [DNS records](/dns/manage-dns-records/)

‎src/content/docs/rules/origin-rules/tutorials/point-to-r2-bucket-with-custom-domain.mdx‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
---
2+
updated: 2025-04-12
3+
difficulty: Beginner
4+
pcx_content_type: tutorial
5+
title: Point to R2 bucket with a custom domain
6+
products:
7+
- R2
8+
- Origin Rules
9+
---
10+
11+
import { Example } from "~/components";
12+
13+
This example configures an origin rule and a DNS record to point to an R2 bucket configured with a custom domain.
14+
15+
The procedure will use the following example values:
16+
17+
| | |
18+
| ------------------------------------: | -------------------------------- |
19+
| URL that website visitors will access | `mycustomerexample.com/images/*` |
20+
| R2 bucket custom domain | `imagesbucket.example.com` |
21+
22+
When configuring your R2 bucket's custom domain, use a custom domain that you do not plan to use in production (`imagesbucket.example.com` in this example).
23+
24+
## 1. Configure custom domain in your Pages project
25+
26+
1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account.
27+
2. Go to **R2 Object Storage** and select your bucket.
28+
3. On the bucket page, select **Settings**.
29+
4. Under **Public access** > **Custom Domains**, select **Connect Domain**.
30+
5. Enter the domain name you want to connect to — `imagesbucket.example.com` in this example — and select **Continue**.
31+
6. Review the new record that will be added to the DNS table and select **Connect Domain**.
32+
33+
Your domain is now connected. The status takes a few minutes to change from **Initializing** to **Active**, and you may need to refresh to review the status update. If the status has not changed, select the **...** next to your bucket and select **Retry connection**.
34+
35+
To view the added DNS record, select **...** next to the connected domain and select **Manage DNS**.
36+
37+
:::note
38+
The domain used must belong to the same account as the R2 bucket.
39+
:::
40+
41+
## 2. Create origin rule to rewrite host header and override DNS record
42+
43+
In your `mycustomerexample.com` zone, create an origin rule with the following configuration:
44+
45+
<Example>
46+
47+
**If incoming requests match**
48+
49+
| Field | Operator | Value |
50+
| -------- | -------- | ----------- |
51+
| URI Path | wildcard | `/images/*` |
52+
53+
If using the Expression Editor, enter the following expression:
54+
55+
```txt
56+
(http.request.uri.path wildcard "/images/*")
57+
```
58+
59+
**Set origin parameters**
60+
61+
- Value after **Host header** > **Rewrite to**: `imagesbucket.example.com`
62+
- Value after **DNS record** > **Override to**: `imagesbucket.example.com`
63+
64+
</Example>
65+
66+
## 3. (Optional) Configure URL rewrite
67+
68+
In our example, the URL that website visitors will access starts with `/images`. However, images stored in the example R2 bucket do not have this initial URL segment.
69+
70+
Use a URL rewrite to remove the `/images` segment from the URL path. Cloudflare provides a rule template in the dashboard called **Rewrite Path for Object Storage Bucket** that you can use to configure the required rewrite.
71+
72+
1. Go to **Rules** > **Overview**.
73+
2. Select **Create rule** > **URL Rewrite Rule**.
74+
3. Locate the **Rewrite Path for Object Storage Bucket** rule template, and select **Create a rule**.
75+
4. Update the rule name.
76+
5. Change the value in **Request URL** to:
77+
78+
```txt
79+
https://<YOUR_HOSTNAME>/images/*
80+
```
81+
82+
6. Change the values under **Path** to:
83+
84+
| Target path | Rewrite to |
85+
| ----------- | ---------- |
86+
| `images/*` | `${1}` |
87+
88+
7. Select **Deploy**.
89+
90+
## More resources
91+
92+
- [Tutorial: Change URI Path and Host Header](/rules/origin-rules/tutorial/change-uri-path-and-host-header/)
93+
- [Cloudflare R2: Public buckets](https://developers.cloudflare.com/r2/buckets/public-buckets/)
94+
- [DNS records](/dns/manage-dns-records/)

0 commit comments

Comments
 (0)