diff --git a/lib/web/screens/web_website_detail_screen.dart b/lib/web/screens/web_website_detail_screen.dart index b2d9fd1..6e0799a 100644 --- a/lib/web/screens/web_website_detail_screen.dart +++ b/lib/web/screens/web_website_detail_screen.dart @@ -753,11 +753,83 @@ class _WebWebsiteDetailScreenState extends State { ), ], ), + const SizedBox(height: 14), + const Divider(height: 1), + const SizedBox(height: 12), + _ownDomainBlock(theme, pointer), ], ), ); } + /// The IPFS address of the live site, for people pointing their own domain at + /// it (see `site/domain/` — https://files.fx.land/domain). The hash is + /// per-version: it changes every time the site is regenerated, so we label it + /// as "this version" and tell people to re-copy it after a regenerate. + Widget _ownDomainBlock(ThemeData theme, WebsiteGroupPointer pointer) { + final cid = pointer.currentCid; + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const Row( + children: [ + Icon(LucideIcons.globe, size: 16, color: AppColors.primary), + SizedBox(width: 8), + Text('Use your own domain', + style: TextStyle( + fontWeight: FontWeight.w600, color: AppColors.primary)), + ], + ), + const SizedBox(height: 6), + Text( + cid == null + ? 'The IPFS address appears here once your site finishes publishing.' + : 'Paste this IPFS address into Cloudflare to serve the site from ' + 'your own domain. It changes each time you regenerate — copy ' + 'it again after every update.', + style: theme.textTheme.bodySmall, + ), + if (cid != null) ...[ + const SizedBox(height: 8), + SelectableText( + cid, + style: const TextStyle(fontFamily: 'monospace', fontSize: 12), + ), + const SizedBox(height: 8), + Wrap( + spacing: 8, + runSpacing: 8, + children: [ + OutlinedButton.icon( + icon: const Icon(LucideIcons.copy, size: 14), + label: const Text('Copy IPFS hash'), + onPressed: () => _copyValue(cid, 'IPFS hash'), + ), + OutlinedButton.icon( + icon: const Icon(LucideIcons.copy, size: 14), + label: const Text('Copy DNSLink value'), + onPressed: () => _copyValue('/ipfs/$cid', 'DNSLink value'), + ), + TextButton.icon( + icon: const Icon(LucideIcons.externalLink, size: 14), + label: const Text('How to set it up'), + onPressed: () => launchUrl( + Uri.parse('https://files.fx.land/domain'), + webOnlyWindowName: '_blank'), + ), + ], + ), + ], + ], + ); + } + + void _copyValue(String value, String label) { + Clipboard.setData(ClipboardData(text: value)); + ScaffoldMessenger.of(context) + .showSnackBar(SnackBar(content: Text('$label copied to clipboard'))); + } + Widget _assetsSection(ThemeData theme) { final jobs = WebWebsiteAssetUploader.instance.jobsForTag(widget.tagId); return Column( diff --git a/site/domain/img/cf-buy-branch.jpg b/site/domain/img/cf-buy-branch.jpg new file mode 100644 index 0000000..0738ed0 Binary files /dev/null and b/site/domain/img/cf-buy-branch.jpg differ diff --git a/site/domain/img/cf-connect-branch.jpg b/site/domain/img/cf-connect-branch.jpg new file mode 100644 index 0000000..af15790 Binary files /dev/null and b/site/domain/img/cf-connect-branch.jpg differ diff --git a/site/domain/img/cf-connect-your-domain.jpg b/site/domain/img/cf-connect-your-domain.jpg new file mode 100644 index 0000000..62f191b Binary files /dev/null and b/site/domain/img/cf-connect-your-domain.jpg differ diff --git a/site/domain/img/cf-create-gateway-filled.jpg b/site/domain/img/cf-create-gateway-filled.jpg new file mode 100644 index 0000000..dc45b03 Binary files /dev/null and b/site/domain/img/cf-create-gateway-filled.jpg differ diff --git a/site/domain/img/cf-dns-records.jpg b/site/domain/img/cf-dns-records.jpg new file mode 100644 index 0000000..c7eb175 Binary files /dev/null and b/site/domain/img/cf-dns-records.jpg differ diff --git a/site/domain/img/cf-gateway-created.jpg b/site/domain/img/cf-gateway-created.jpg new file mode 100644 index 0000000..a984edb Binary files /dev/null and b/site/domain/img/cf-gateway-created.jpg differ diff --git a/site/domain/img/cf-gateway-edit.jpg b/site/domain/img/cf-gateway-edit.jpg new file mode 100644 index 0000000..6b44f1b Binary files /dev/null and b/site/domain/img/cf-gateway-edit.jpg differ diff --git a/site/domain/img/cf-gateway-type.jpg b/site/domain/img/cf-gateway-type.jpg new file mode 100644 index 0000000..9f6acbf Binary files /dev/null and b/site/domain/img/cf-gateway-type.jpg differ diff --git a/site/domain/img/cf-nameservers.jpg b/site/domain/img/cf-nameservers.jpg new file mode 100644 index 0000000..7e3f7ab Binary files /dev/null and b/site/domain/img/cf-nameservers.jpg differ diff --git a/site/domain/img/cf-redirect-rule.jpg b/site/domain/img/cf-redirect-rule.jpg new file mode 100644 index 0000000..7ad2dc5 Binary files /dev/null and b/site/domain/img/cf-redirect-rule.jpg differ diff --git a/site/domain/img/cf-redirect-templates.jpg b/site/domain/img/cf-redirect-templates.jpg new file mode 100644 index 0000000..c7a82e5 Binary files /dev/null and b/site/domain/img/cf-redirect-templates.jpg differ diff --git a/site/domain/img/cf-register-checkout.jpg b/site/domain/img/cf-register-checkout.jpg new file mode 100644 index 0000000..b8f656c Binary files /dev/null and b/site/domain/img/cf-register-checkout.jpg differ diff --git a/site/domain/img/cf-web3-page.jpg b/site/domain/img/cf-web3-page.jpg new file mode 100644 index 0000000..34624e6 Binary files /dev/null and b/site/domain/img/cf-web3-page.jpg differ diff --git a/site/domain/index.html b/site/domain/index.html new file mode 100644 index 0000000..229a003 --- /dev/null +++ b/site/domain/index.html @@ -0,0 +1,592 @@ + + + + + +Use your own domain — FxFiles + + + + + + + + + + + + + + +
+
+

Use your own domain

+

+ You made a website in FxFiles. Right now it lives at a long link. This page shows you + how to put it on yourdomain.com instead — using Cloudflare, on their free plan. +

+
+ ⏱ ~15 minutes of clicking + 💳 Free plan is enough + 🧑‍💻 No coding +
+

+ The pictures below are from Cloudflare on a computer. On a phone it is the same screens + in one column — tap ☰ at the top left wherever these steps mention the side menu. +

+
+
+ +
+
+

1Copy your website address

+

+ Open your website in FxFiles on the web, and find the Use your own domain box under + the shareable link. Tap Copy DNSLink value — that copies a line that looks like this: +

+

/ipfs/bafybeiejegeowlh5warqnrjjmhbkf7hdjaiuhnpqajbktx6ta77urqmljy

+

Keep it on your clipboard. You will paste it once, near the end.

+
+ What is this? +

+ It is your website's address on IPFS — the storage network FxFiles publishes to. + It is not a secret, and it changes every time you regenerate the site. + Step 4 covers how to update it. +

+
+
+
+ +
+
+

2Get your domain into Cloudflare

+

Pick the one that matches you:

+ +
+ + +
+ + +
+

+ Create a free account at cloudflare.com, + then type the domain you want in the Add a domain box on the home page. +

+ +
+ Cloudflare account home. A card titled 'Add a domain' contains a text box with a domain typed in it, and below it the message 'This domain is available for purchase.' with a Buy button. +
Available? Cloudflare offers a Buy button right there.
+
+ +

Press Buy, fill in your contact details, and pay. A .com is usually around $10–12 a year; other endings vary a lot.

+ +
+ Cloudflare 'Complete your registration' page showing the domain, a registration period of 1 year, automatic renewal switched on, a subtotal, and a form for registrant name, email and address. +
The registration page. Your email is filled in automatically.
+
+ +
+ Good news — you can skip the hard part. +

+ A domain bought at Cloudflare is already connected to Cloudflare. There are no + nameservers to change. Go straight to Step 3. +

+
+
+ + + +
+
+ +
+
+

3Point the domain at your website

+

+ In Cloudflare, click your domain, then scroll to the bottom of the left-hand menu + and choose Web3. Press Create Gateway. +

+ +
+ 📱 On a phone? +

+ There is no side menu on a narrow screen — tap the ☰ button at the top left to + open it, then scroll down to Web3. Everything else is identical to the pictures + below, just stacked into one column. +

+
+ +
+ Cloudflare Web3 page for a domain. A 'Web3 Gateways' card says 'You have used 0 of 15 IPFS DNSlink Gateways' and has a Create Gateway button. In the left sidebar, Web3 is the last item. +
Web3 is the last item in the sidebar. The free plan includes 15 gateways.
+
+ +

Fill in three things:

+
    +
  1. Hostname — the address people will type, for example site.yourdomain.com.
    2. +
  2. Gateway Type — choose IPFS DNSLink.
    3. +
  3. DNSLink — paste the /ipfs/… line you copied in Step 1.
    4. +
+ +
+ The Create Gateway form with the Gateway Type dropdown open, showing a single option under a STORAGE heading: IPFS DNSLink. +
IPFS DNSLink is the only option — pick it.
+
+ +
+ The Create Gateway form filled in: Hostname 'site.example.com', description 'My FxFiles website', Gateway Type 'IPFS DNSLink', and a DNSLink field containing a path beginning /ipfs/bafybei. A Deploy button sits at the bottom right. +
Filled in and ready. Press Deploy.
+
+ +

That's it. Cloudflare creates the DNS records for you and issues the HTTPS certificate.

+ +
+ The Web3 page after deploying. A table row shows the new gateway with status Pending, the hostname, type IPFS DNSLink and its description, plus Edit. Below, a 'Web3 Gateway DNS records' table lists a CNAME pointing to ipfs.cloudflare.com and a TXT record named _dnslink with the dnslink value. +
Done. The two records at the bottom were created automatically — you don't touch them.
+
+ +
+ Which hostname should I use? +

+ A subdomain is easiest — site.yourdomain.com, blog.yourdomain.com, + anything you like. Nothing else is using it, so it just works. +

+

+ To use www.yourdomain.com, first go to DNS → Records and delete any + existing A or AAAA record named www. Cloudflare refuses to + create the gateway while one is in the way. +

+

+ To make the bare yourdomain.com work too, set the gateway up on + www (or your subdomain), then add a redirect — see below. +

+
+ +
+ Also make the bare yourdomain.com work +
+

+ The gateway lives on a subdomain, so someone typing just yourdomain.com + won't land on it. Cloudflare has a ready-made rule for this — you only change + two boxes. +

+ +

1. In your domain, click Rules in the left menu. You'll see a grid of + Rule templates. Find Redirect to a different domain and press + Create from template.

+ +
+ Cloudflare Rules overview showing a grid of rule templates including 'Redirect from HTTP to HTTPS', 'Redirect from WWW to root', 'Redirect to a different domain' and 'Redirect from root to WWW', each with a 'Create from template' button. +
Use Redirect to a different domain.
+
+ +

2. The form opens already filled in with example values. Change these two, and + leave everything else exactly as it is:

+ +
    +
  • + The Value box (next to Hostname and equals) — replace it with + your bare domain:
    + yourdomain.com +
    • +
  • + The Expression box under Then… — replace it with this, putting your own + subdomain inside the quotes:
    + concat("https://site.yourdomain.com", http.request.uri.path) +
    • +
+ +

3. Press Deploy. That's it.

+ +
+ The Cloudflare redirect rule form. Field is Hostname, operator equals, value yourdomain.com. The expression preview reads (http.host eq "yourdomain.com"). Under Then, Type is Dynamic, the Expression box contains concat("https://site.yourdomain.com", http.request.uri.path), status code is 301 Permanent Redirect and 'Preserve query string' is ticked. +
How it should look. Type, Status code and the tickbox are already correct — don't touch them.
+
+ +
+ Used www for your gateway instead? +

+ Then skip all of the above and use the Redirect from root to WWW template + in that same grid. It needs no editing at all. +

+
+
+
+ +
+ Where your DNS records live, if you want to look +
+

+ DNS → Records lists everything for your domain. This is also where you delete a + conflicting www record before creating a gateway on www. +

+
+ Cloudflare DNS records page listing A, AAAA, MX and TXT records for a domain, each with a name, type, content, proxy status and TTL, plus an Add record button. +
The DNS records page. Most people never need to touch this.
+
+
+
+
+
+ +
+
+

4When you change your website

+

+ Every time you regenerate the site in FxFiles it gets a new IPFS address, and your + domain keeps serving the old one until you tell it otherwise. Updating takes about + thirty seconds: +

+
    +
  1. In FxFiles, press Copy DNSLink value again.
    2. +
  2. In Cloudflare, go to Web3 and press Edit on your gateway.
    3. +
  3. Replace the DNSLink field with the new value and press Reapply.
    4. +
+ +
+ The Edit Gateway form. Hostname and Gateway Type are greyed out and cannot be changed. The description and DNSLink fields are editable, and the button at the bottom right reads Reapply. +
Only the DNSLink changes. Press Reapply.
+
+ +
+ I don't want to do this every time +
+

+ Then skip the gateway entirely and use a redirect instead. Your FxFiles + shareable link (the fxfiles.top/w/… one) always points at your + newest version by itself, so it never needs updating. +

+

+ Set it up the same way as the rule above — Rules → Redirect to a different + domain → Create from template — but put your shareable link in the + Expression box instead: +

+

concat("https://fxfiles.top/w/YOUR-LINK-ID", http.request.uri.path)

+

+ The trade-off: visitors get moved to the fxfiles.top address, so + that is what shows in their address bar — not your domain. Nothing to maintain, but + it is not really "your" domain any more. +

+
+
+
+
+ +
+
+

?If something goes wrong

+ +

Deploy does nothing, or the gateway never appears

+ A DNS record (A or AAAA) with a name matching the provided hostname already exists. +

+ Something already answers for that hostname. Go to DNS → Records, delete the + A and AAAA records with that exact name, then create the gateway + again. Or just pick a hostname nothing is using, like site.yourdomain.com. + This is the most common failure, and it is silent — the button simply appears to do nothing. +

+ +

Cloudflare won't let me add my domain

+ This web property cannot be added to Cloudflare at this time. +

+ Cloudflare blocks domains you are not associated with, and reserved names like + example.com. Use a domain you actually own. +

+ +

My gateway says "Pending" and won't turn active

+

+ Pending means Cloudflare is not yet answering DNS for your domain. Finish the nameserver + switch in Step 2 and wait for the "domain is active" email. A gateway on a domain that + never completes that step will stay Pending forever. +

+ +

My domain went offline after changing nameservers

+

+ Most likely DNSSEC was still enabled at your registrar. Turn DNSSEC off there, then wait + for DNS to settle. See + Cloudflare's guide. +

+ +

My domain shows an old version of my site

+

+ The IPFS address changed when you regenerated. Redo Step 4. + If you just updated it, give it a couple of minutes and try a private window. +

+ +

I followed an old tutorial and it doesn't work

+

+ Guides written before August 2024 tell you to point a CNAME at + cloudflare-ipfs.com. Cloudflare + shut that gateway down + on 14 August 2024. Use the Web3 page as described here instead. +

+
+
+ +
+
+

iGood to know

+
    +
  • Cloudflare's free plan includes 15 gateways and 50 GB of traffic through them per month. Beyond that it is billed by usage — see Cloudflare's limits page.
    • +
  • HTTPS is handled for you. Cloudflare issues the certificate when the gateway is created.
    • +
  • Your website files stay on IPFS. Cloudflare is only the front door that makes your domain point there.
    • +
  • Nothing here is permanent — you can delete the gateway at any time and the domain is yours again.
    • +
+
+
+ + + + + + +