[Hyperdrive] Adding example for connecting Hyperdrive to Fly.io (#20744)

* Adding example for connecting Hyperdrive to Fly.io

* Update src/content/docs/hyperdrive/examples/fly.mdx

Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com>

* Update src/content/docs/hyperdrive/examples/fly.mdx

* Update src/content/docs/hyperdrive/examples/fly.mdx

* Update src/content/docs/hyperdrive/examples/fly.mdx

---------

Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com>
Co-authored-by: Thomas Gauvin <[email protected]>

Author: 3 people

src/content/docs/hyperdrive/examples/fly.mdx

@@ -0,0 +1,63 @@
+---
+type: example
+summary: Connect Hyperdrive to a Fly database instance.
+pcx_content_type: example
+title: Connect to Fly
+sidebar:
+  order: 1
+description: Connect Hyperdrive to a Fly database instance.
+---
+
+import { Render, Steps } from "~/components";
+
+This example shows you how to connect Hyperdrive to a Fly PostgreSQL database instance.
+
+## 1. Allow Hyperdrive access
+
+You can connect Hyperdrive to any existing Fly database by:
+
+1. Allocating a public IP address to your Fly database instance
+2. Configuring an external service
+3. Deploying the configuration
+4. Obtain the connection string, which is used to connect the database to Hyperdrive.
+
+<Steps>
+1. Run the following command to [allocate a public IP address](https://fly.io/docs/postgres/connecting/connecting-external/#allocate-an-ip-address).
+
+	```txt
+	fly ips allocate-v6 --app <pg-app-name>
+	```
+
+	:::note
+	Cloudflare recommends using IPv6, but some Internet service providers may not support IPv6. In this case, [you can allocate an IPv4 address](https://fly.io/docs/postgres/connecting/connecting-with-flyctl/).
+	:::
+
+2. [Configure an external service](https://fly.io/docs/postgres/connecting/connecting-external/#configure-an-external-service) by modifying the contents of your `fly.toml` file. Run the following command to download the `fly.toml` file.
+
+	```txt
+	fly config save --app <pg-app-name>
+	```
+
+	Then, replace the `services` and `services.ports` section of the file with the following `toml` snippet:
+
+	```toml
+	[[services]]
+		internal_port = 5432 # Postgres instance
+		protocol = "tcp"
+
+	[[services.ports]]
+		handlers = ["pg_tls"]
+		port = 5432
+	```
+
+3. [Deploy the new configuration](https://fly.io/docs/postgres/connecting/connecting-external/#deploy-with-the-new-configuration).
+4. [Obtain the connection string](https://fly.io/docs/postgres/connecting/connecting-external/#adapting-the-connection-string), which is in the form of:
+
+	```txt
+	postgres://{username}:{password}@{public-hostname}:{port}/{database}?options
+	```
+</Steps>
+
+## 2. Create a database configuration
+
+<Render file="create-hyperdrive-config" />

src/content/docs/hyperdrive/index.mdx

@@ -161,27 +161,24 @@ Deploy dynamic front-end applications in record time.
 	href="/workers/platform/storage-options/"
 	icon="document"
 >
-	Learn more about the storage and database options you can build on with
-	Workers.
+	Learn more about the storage and database options you can build on with Workers.
 </LinkTitleCard>
 
 <LinkTitleCard
 	title="Developer Discord"
 	href="https://discord.cloudflare.com"
 	icon="discord"
 >
-	Connect with the Workers community on Discord to ask questions, show what you
-	are building, and discuss the platform with other developers.
+	Connect with the Workers community on Discord to ask questions, show what you are building, and discuss the platform with other developers.
 </LinkTitleCard>
 
 <LinkTitleCard
 	title="@CloudflareDev"
 	href="https://x.com/cloudflaredev"
 	icon="x.com"
 >
-	Follow @CloudflareDev on Twitter to learn about product announcements, and
-	what is new in Cloudflare Developer Platform.
+	Follow @CloudflareDev on Twitter to learn about product announcements, and what is new in Cloudflare Developer Platform.
 </LinkTitleCard>
 
 </CardGrid>
-````
+