docs(whp): add how-to articles (domain, site, email, backups) + placeholder screenshots

Placeholders are 1440x900 'Screenshot pending' PNGs that will be overwritten by real captures via 'npm run screenshots' once a demo user is provisioned.
2026-05-17 10:32:23 -07:00
parent e782234f65
commit 231aa583a0
12 changed files with 342 additions and 0 deletions
@@ -0,0 +1,91 @@
+---
+title: Create an email account
+description: Add a mailbox on one of your domains and connect your email client.
+sidebar:
+  order: 3
+---
+
+import { Steps, Aside } from '@astrojs/starlight/components';
+import SignIn from '~/content/partials/signing-in.mdx';
+import Support from '~/content/partials/support-link.mdx';
+
+## Before you start
+
+- A **domain added** to your account.
+- Decide what local part you want — the bit before the `@`. For example, `jane` to get `jane@example.com`.
+- About 5 minutes.
+
+## Sign in to WHP
+
+<SignIn />
+
+## Steps
+
+<Steps>
+
+1. From the sidebar, open **Email → Email Accounts → Add Account**.
+   ![WHP Add Email Account page](~/assets/screenshots/whp/whp-email-add.png)
+
+2. Pick the **domain** for this mailbox.
+
+3. Enter the **local part** (the bit before `@`).
+
+4. Set a **strong password** — at least 12 characters with a mix of upper case, lower case, numbers, and symbols. Email accounts are common attack targets.
+
+5. Choose a **mailbox size cap**. The default is usually fine; you can raise it later or via an [email upgrade add-on](/whp/add-ons/email-upgrades/).
+
+6. Click **Create**.
+
+</Steps>
+
+## Set up your email client
+
+Use these settings in Outlook, Apple Mail, Thunderbird, or any other client:
+
+```text
+IMAP (incoming)
+  Host:     mail.<yourdomain>
+  Port:     993
+  Security: SSL/TLS
+  Username: full email address (e.g., jane@example.com)
+  Password: the one you set above
+
+SMTP (outgoing)
+  Host:     mail.<yourdomain>
+  Port:     587
+  Security: STARTTLS
+  Username: full email address
+  Password: same as IMAP
+```
+
+For per-client walkthroughs (Outlook, Apple Mail, etc.), see the Email clients section — coming soon.
+
+## Webmail
+
+You can also access the mailbox from a browser at `https://webmail.<yourdomain>` once DNS for the mail subdomain has propagated.
+
+## Verify it worked
+
+Send yourself a test message from another account (your personal Gmail, for example). It should arrive within a minute or two and be retrievable from both your client and webmail.
+
+<Aside type="caution">
+  **SPF and DKIM records matter.** Without them, your outgoing mail will get flagged or rejected by other providers. If your domain is registered with us, we add these records automatically. If it's registered elsewhere, copy the SPF and DKIM records shown on the email account page into your registrar's DNS.
+</Aside>
+
+## Troubleshooting
+
+**Webmail isn't reachable.** DNS for the `mail.<yourdomain>` subdomain may still be propagating — wait an hour and try again.
+
+**Outgoing mail is bouncing or going to spam.** Check the SPF and DKIM records at your registrar. The email account page in WHP shows the exact records you should have.
+
+**Client can connect on IMAP but not SMTP.** Some ISPs and corporate networks block outgoing port 587. Try sending from a different network to confirm; if the issue is your network, your ISP is the place to ask.
+
+## Related
+
+- [Add a domain](/whp/how-to/add-a-domain/)
+- [Archival email add-on](/whp/add-ons/archival-email/)
+- [Email upgrades](/whp/add-ons/email-upgrades/)
+
+## Still stuck?
+
+<Support />