diff --git a/website/docs/custom-domains/connect-a-custom-domain.md b/website/docs/custom-domains/connect-a-custom-domain.md index 27af0a4..605624a 100644 --- a/website/docs/custom-domains/connect-a-custom-domain.md +++ b/website/docs/custom-domains/connect-a-custom-domain.md @@ -5,29 +5,63 @@ description: Step-by-step guide to connecting your own domain to your Kite site # Connect a Custom Domain -This article shows you how to point your own domain (like `yourbusiness.com`) at your published Kite site. There are two ways to do it: a fast one-click flow called **Entri** that does the setup for you, and a manual option where you add DNS records yourself. +This article shows you how to point your own domain (like `yourbusiness.com`) at your published Kite site. You can connect a domain you already own or buy one directly through Kite. ## Before you start -- **Publish your site first.** You can only connect a domain to a live site. See [How to publish](/publishing/how-to-publish). -- **A paid plan is required** to connect a custom domain. See [Plans & trial](/pricing-credits/plans-and-trial). -- Have your domain handy. It's fine if you bought it anywhere — see [Connect a domain from your registrar](/custom-domains/registrar-guides). +- **Publish your site first.** You can only connect a domain to a live site. The **Add custom domain** button stays disabled until you publish. See [How to publish](/publishing/how-to-publish). +- **Custom domains require a paid Kite plan.** See [Plans & trial](/pricing-credits/plans-and-trial) or [kite.ai](https://kite.ai/) for current plan options. +- Have your domain handy if you already own one. It does not matter where you bought it. See [Connect a domain from your registrar](/custom-domains/registrar-guides). -## Start connecting your domain - -These first steps are the same for both methods. +## Open the publish panel 1. Open your site in Kite. 2. Click **Publish** in the top-right corner. -3. Click **Add Custom Domain**. -4. Type your domain (for example, `yourbusiness.com`) and click **Connect Domain**. -5. The **Entri** modal opens. This is the tool Kite uses to set up your DNS. Continue with one of the two methods below. +3. Click **Add custom domain**. + +If the button is grayed out, publish your site first. You will see the hint: *"Publish your website to add a custom domain"*. + +If Kite asks you to upgrade, follow the on-screen steps to choose a plan that includes custom domains. + +![Add custom domain button after publish](/img/docs/add-custom-domain-enabled.png) + +## Choose how to add your domain + +Kite gives you two options: + +- **Connect a domain you own** for domains from GoDaddy, Cloudflare, or any DNS provider. +- **Buy a new domain** to search for and purchase a domain directly in Kite. + +![Add custom domain options screen](/img/docs/add-custom-domain-options.png) + +## Connect a domain you own + +### Enter your domain + +1. Click **Connect a domain you own**. +2. Type your domain name (for example, `example.com`). +3. Optional: check **I want to use a subdomain** if you want an address like `www.example.com` or `shop.example.com`. +4. Click **Connect domain**. + +![Connect your domain form](/img/docs/connect-your-domain.png) + +:::tip You do not need to move your domain to Kite +You only add a few settings at the company where you bought your domain. Kite walks you through this step by step. +::: + +### Set up DNS with Entri + +After you click **Connect domain**, the **Entri** modal opens. This is the tool Kite uses to set up your DNS. :::note What is Entri? **Entri** is a service that connects to your domain provider and adds the right DNS records automatically, so you usually don't have to touch any technical settings yourself. ::: -## Method A: One-click setup with Entri (recommended) +![DNS setup guide](/img/docs/dns-setup-modal.png) + +You can finish setup in one of two ways: + +#### Method A: One-click setup with Entri (recommended) This is the easiest path and works with most popular domain providers. @@ -38,10 +72,10 @@ This is the easiest path and works with most popular domain providers. 5. Back in Kite, you may need to **republish** your site for the domain to go fully live. See [How to publish](/publishing/how-to-publish). :::tip -If your provider is in the list, always try this method first — it avoids typing DNS records by hand and reduces mistakes. +If your provider is in the list, always try this method first. It avoids typing DNS records by hand and reduces mistakes. ::: -## Method B: Manual DNS setup +#### Method B: Manual DNS setup Use this if your provider isn't listed in Entri, or if someone else manages your DNS. @@ -50,9 +84,10 @@ Use this if your provider isn't listed in Entri, or if someone else manages your 3. Entri shows you all the DNS records you need to add. Keep this screen open. 4. Add those records in your domain provider's DNS settings (see [Connect a domain from your registrar](/custom-domains/registrar-guides) for where to find them). 5. Save the records at your provider. -6. Back in Kite, **republish** your site if prompted. +6. When you have finished at your provider, confirm in Kite. +7. Back in Kite, **republish** your site if prompted. -### Handing the records to someone else +##### Handing the records to someone else If a colleague, web person, or IT contact manages your DNS, you don't have to do it yourself: @@ -60,9 +95,9 @@ If a colleague, web person, or IT contact manages your DNS, you don't have to do 2. This generates a link that contains all the DNS records. 3. Send that link to whoever manages your DNS, and they can add the records for you. -### DNS records you'll typically add +##### DNS records you'll typically add -If you're adding records by hand, these are the values seen in real setups: +If you're adding records by hand, these are the values seen in real setups: | Type | Host / Name | Value / Points to | |------|-------------|-------------------| @@ -75,20 +110,58 @@ If you're adding records by hand, these are the values seen in real setups: -3. Wait a few moments while Kite deploys your site. -4. When it's done, Kite shows you the live link to your site. +2. Click **Publish** in the top-right corner. + +![Publish button in the top bar](/img/docs/publish-button.png) + +3. The **first time** you publish, pick a **Site Domain** for your free `kite.space` address, then click **Publish**. See [Your free kite.space URL](/publishing/your-kite-url) for how that works. +4. Wait a few moments while Kite deploys your site. +5. When it's done, Kite shows you the live link to your site. ## What happens when you publish - Kite takes the **latest changes** from your editor and deploys them to the live web. - Anything you've edited but not yet published stays in the editor until your next publish. -- The **first time** you publish, Kite assigns your free `.kite.space` web address. That address stays with your project. +- The **first time** you publish, Kite assigns your free `.kite.space` web address. That address stays with your project. See [Your free kite.space URL](/publishing/your-kite-url). :::info Only published changes are visible to visitors. The editor and preview show your work-in-progress; the live site shows your most recent publish. Learn more in [My Changes Aren't Showing on the Live Site](/publishing/changes-not-showing). diff --git a/website/docs/publishing/your-kite-url.md b/website/docs/publishing/your-kite-url.md index 7f991ec..3534687 100644 --- a/website/docs/publishing/your-kite-url.md +++ b/website/docs/publishing/your-kite-url.md @@ -11,7 +11,22 @@ When you publish, Kite gives your site a free web address that looks like `.kite.space` address automatically. - The address is assigned the **first time** you publish your project. See [How to Publish Your Site](/publishing/how-to-publish). -- You can share this link right away — no setup or domain purchase required. +- You can share this link right away. No setup or domain purchase required. + +## Choose your site domain (first publish only) + +The first time you publish, Kite asks you to pick a **Site Domain** in the publish panel. + +1. Find the **Site Domain** field. +2. Type the name you want. For example, typing `mybusiness` gives you `mybusiness.kite.space`. +3. Wait until you see **Available**, then click **Publish**. +4. When the status shows **Published**, your site is live at that address. + +![Publish panel with Site Domain field](/img/docs/publish-popover-site-domain.png) + +If the name is taken, try a different one. Your site domain must be 3 to 63 characters, using lowercase letters, numbers, and hyphens only. + +On later publishes, Kite updates your live site without asking for a new site domain. ## It stays as a fallback @@ -39,4 +54,4 @@ If you're starting fresh for a new client, you may prefer to duplicate your proj ## Troubleshooting - **My kite.space site looks out of date.** You may need to publish again. See [My Changes Aren't Showing on the Live Site](/publishing/changes-not-showing). -- **I want a different name in my address.** Connect a custom domain — see [Connect a custom domain](/custom-domains/connect-a-custom-domain). +- **I want a different name in my address.** Connect a custom domain. See [Connect a custom domain](/custom-domains/connect-a-custom-domain). diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 6b6533e..e7d6a1f 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -47,3 +47,29 @@ .footer--dark { border-top: 1px solid rgba(255, 255, 255, 0.1); } + +/* Doc screenshots: center and never upscale past native size. + Docusaurus wraps markdown images in

and rewrites src to /assets/images/… */ +.theme-doc-markdown p:has(> img) { + display: flex; + justify-content: center; + margin: 1.5rem 0; +} + +.theme-doc-markdown img { + width: auto; + max-width: min(100%, 587px); + height: auto; + border-radius: 8px; + border: 1px solid rgba(255, 255, 255, 0.12); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); +} + +.theme-doc-markdown img[src*='publish-button'] { + max-width: min(100%, 196px); +} + +[data-theme='light'] .theme-doc-markdown img { + border-color: rgba(0, 0, 0, 0.08); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); +} diff --git a/website/static/img/docs/add-custom-domain-enabled.png b/website/static/img/docs/add-custom-domain-enabled.png new file mode 100644 index 0000000..6675eed Binary files /dev/null and b/website/static/img/docs/add-custom-domain-enabled.png differ diff --git a/website/static/img/docs/add-custom-domain-options.png b/website/static/img/docs/add-custom-domain-options.png new file mode 100644 index 0000000..cc1f1e0 Binary files /dev/null and b/website/static/img/docs/add-custom-domain-options.png differ diff --git a/website/static/img/docs/buy-domain-confirm.png b/website/static/img/docs/buy-domain-confirm.png new file mode 100644 index 0000000..bfb2897 Binary files /dev/null and b/website/static/img/docs/buy-domain-confirm.png differ diff --git a/website/static/img/docs/connect-your-domain.png b/website/static/img/docs/connect-your-domain.png new file mode 100644 index 0000000..0607f2d Binary files /dev/null and b/website/static/img/docs/connect-your-domain.png differ diff --git a/website/static/img/docs/dns-setup-modal.png b/website/static/img/docs/dns-setup-modal.png new file mode 100644 index 0000000..bd91516 Binary files /dev/null and b/website/static/img/docs/dns-setup-modal.png differ diff --git a/website/static/img/docs/domain-setting-up.png b/website/static/img/docs/domain-setting-up.png new file mode 100644 index 0000000..3f78e66 Binary files /dev/null and b/website/static/img/docs/domain-setting-up.png differ diff --git a/website/static/img/docs/publish-button.png b/website/static/img/docs/publish-button.png new file mode 100644 index 0000000..f8aaedb Binary files /dev/null and b/website/static/img/docs/publish-button.png differ diff --git a/website/static/img/docs/publish-popover-site-domain.png b/website/static/img/docs/publish-popover-site-domain.png new file mode 100644 index 0000000..f906c53 Binary files /dev/null and b/website/static/img/docs/publish-popover-site-domain.png differ