OneUptime 状态页品牌定制与自定义域名实战：从七屏配置到 CNAME 与 SSL 全流程

OneUptime 状态页品牌定制与自定义域名实战：从七屏配置到 CNAME 与 SSL 全流程

【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptime

OneUptime 状态页（Status Page）是客户真正会打开看的那一屏，因此它应当看起来像你的品牌、并且托管在你自己的域名上。这篇指南基于仓库中的 branding-and-domains.md（丹麦语版）整理而成，逐屏讲解Branding（品牌）侧边栏中的七个配置界面，并完整走一遍"添加自定义域名 → 验证 CNAME → 订购 SSL 证书"的部署流程。读完本文，你将能独立完成一张 OneUptime 状态页的完整品牌化改造，并把它上线到status.ditfirma.dk（即status.你的域名.com）这样的自有域名上。

开始之前：品牌配置分布在七个屏幕里

打开任意状态页，侧边栏的Branding分区下共有七个入口。需要提前知道的坑是：每一项品牌设置并不一定在你想当然的位置——Logo 和封面图不在"Essentiel branding（基础品牌）"里，而是在Sidehoved（页眉）；Favicon 却在Essentiel branding；颜色设置在Oversigtsside（概览页）；而其余所有你称为"主题"的东西，其实都是 Custom CSS。

七个屏幕的分工如下表：

Essentiel branding：标题、SEO 与 Favicon

入口路径为Statussider（状态页）→ 你的页面 → Branding → Essentiel branding（对应界面 URL 形如{id}/branding），包含三个卡片。

• 标题与描述（Titel og beskrivelse）：卡片会提示这里同时用于 SEO。点击Rediger（编辑）打开Sidetitel（页面标题）（占位符Please enter page title here.）与Sidebeskrivelse（页面描述）。搜索摘要和链接预览展示的就是这两段文字，所以文案应当写给客户看，而不是写给内部团队。在数据模型层面，它们对应 StatusPage.ts 中的pageTitle（ShortText，"Title of your Status Page. This is used for SEO."）与pageDescription（LongText，"Description of your Status Page. This is used for SEO."）字段。
• Search Engine Indexing（搜索引擎索引）：只有一个开关Allow Search Engines to Index this Status Page，控制 Google 和 Bing 是否允许把页面展示在搜索结果中，默认开启。关闭后，页面会以noindex, nofollow的形式被提供。源码中的字段为enableSearchEngineIndexing（StatusPage.ts，布尔类型，默认值true）。模型注释进一步说明：关闭索引会同时通过服务端渲染的index.ejs中的<meta name="robots" content="noindex, nofollow">和X-Robots-Tag响应头生效（后者覆盖 RSS feed 和 llms.txt 等非 HTML 输出），并且刻意不写入 robots.txt——因为 Disallow 只会阻止抓取，抓取不到的页面反而无法被 noindex 生效。
• Favicon：点击Edit Favicon打开图片上传控件Favicon，即浏览器标签页上的小图标，对应模型中的faviconFileId字段。

适用场景：当页面仅限内部使用或仍在搭建中时，关闭Allow Search Engines to Index this Status Page，避免一个未完工的页面开始用你的品牌名出现在搜索结果里。

Sidehoved 屏幕：Logo、封面图与页眉链接

入口为Statussider → 你的页面 → Branding → Sidehoved（{id}/header-style）。尽管侧边栏叫"页眉"，这里其实存放着你的两个最大品牌资产。

第一个卡片Logo, cover og favicon（Logo、封面与 Favicon）带Edit Images按钮：

• Logo：图片上传，占位符Upload logo。对应模型字段logoFileId。
• Logo Alt Text：占位符Logo of My Company。留空时回退使用状态页标题。
• Forside（封面图）：图片上传，占位符Upload cover image，是页眉背后那条宽幅横幅。对应coverImageFileId字段。
• Cover Image Alt Text：封面图的 alt 文本。

下方是Header-links（页眉链接）表格（标题为 "Header-links til din statusside"）。每个链接由Titel（标题）与Link（链接）（占位符https://link.com）组成，行与行之间通过拖拽排序。未配置任何链接时显示 "No status header link for this status page."。

用途建议：把访客引导回你的营销站点、文档或支持门户，省得他们去猜 URL。从源码看，页眉/页脚链接分别由StatusPageHeaderLinkService与StatusPageFooterLinkService管理（见 StatusPageCustomizationOrigin.test.ts 的导入）。

Sidefod 屏幕：版权与页脚链接

入口为Statussider → 你的页面 → Branding → Sidefod（{id}/footer-style），布局与Sidehoved相同：一个卡片加一张表格。

• Copyright-information（版权信息）：Edit Copyright打开单个字段Copyright-information，占位符Acme, Inc.。
• Sidefodslinks（页脚链接）：同样是Titel+Link成对配置、拖拽排序，空态文案为 "No status footer link for this status page."。

法律声明、隐私政策、服务条款之类的链接适合放在这里。概略地说：页眉链接服务于导航，页脚链接服务于"小字"。

Oversigtsside 屏幕：历史图表颜色与"何为宕机"

入口为Statussider → 你的页面 → Branding → Oversigtsside（{id}/overview-page-branding）。这是唯一能设置颜色的屏幕，同时也决定了图表上"宕机"的含义。

• Oversigtsside（概览）：Edit Branding打开一个 Markdown 字段Beskrivelse af oversigtsside.（概览页描述），显示在资源列表上方。适合写一句上下文说明：本页面覆盖哪些内容、出问题该去哪找支持。
• Rules for Bar Colors of History Chart（历史图表柱状颜色规则）：一张可拖拽排序的规则表。每条规则包含Når oppetid % er større end eller lig med（当 Uptime % 大于等于）与Brug så denne søjlefarve（则使用此柱状颜色）；表格列名即When Uptime Percent >=与Then, Bar Color is。顺序很重要——规则按你排列的顺序依次求值。对应的数据模型是 StatusPageHistoryChartBarColorRule.ts，核心字段为uptimePercentGreaterThanOrEqualTo（Decimal 类型）与barColor（Color 类型，例如#32a852），并带有order字段承载排序。
• Nedetidsovervågningsstatusser（停机监控状态）：Edit Statuses打开一个多选器，描述为 "These monitor statuses are considered as down"。你在这里决定例如"降级（degraded）"状态是否计入本页的 Uptime。
• Standardbjælkefarve for historikdiagrammet（历史图表默认柱状颜色）：Edit Default Bar Color打开颜色选择器Standardbjælkefarve，即没有任何规则匹配时使用的颜色。前端渲染时对应 Overview.tsx 中的defaultBarColor={statusPage?.defaultBarColor || Green}。
• Samlet oppetidsprocent（总 Uptime 百分比）：Edit Settings打开开关Vis samlet oppetidsprocent（显示总 Uptime 百分比）与下拉Vælg oppetidspræcision（选择 Uptime 精度），默认两位小数99.99% (Two Decimal)。精度选项在 UptimePrecision.ts 中完整定义：99% (No Decimal)、99.9% (One Decimal)、99.99% (Two Decimal)、99.999% (Three Decimal)。前端会按resource.uptimePercentPrecision || UptimePrecision.ONE_DECIMAL渲染（Overview.tsx）。

注意：图表覆盖的天数不在这里设置。它位于Statussider → 你的页面 → Avanceret（高级）→ Avancerede indstillinger（高级设置）（{id}/settings）的Vis oppetidshistorik (i dage)（显示 Uptime 历史（天数）），取值范围 1 到 90 天。

Brugerdefineret HTML, CSS og JavaScript：唯一的"主题"出口

入口为Statussider → 你的页面 → Branding → HTML, CSS og JavaScript（{id}/custom-code），包含四个可独立编辑的卡片，分别对应状态页数据模型上的headerHTML、footerHTML、customCSS、customJavaScript四个字段（StatusPage.ts 中均标注 "Served only from a verified custom domain."）：

关键限制：自定义 HTML、CSS、JavaScript 只会在已验证的自定义域名上生效。在默认地址/status-page/:id上它们是禁用的，因为该 URL 与用户登录的 OneUptime 区域同源，注入自定义脚本会带来安全风险。

• Header-HTML：占位符Insert Custom HTML here.，注入到页面页眉。
• Sidefods-HTML（页脚 HTML）：同理，注入到页脚。
• Brugerdefineret CSS（自定义 CSS）：占位符Insert Custom CSS here.。
• Brugerdefineret JavaScript（自定义 JavaScript）：占位符Insert Custom JavaScript here.。

不存在主题选择器。OneUptime 状态页没有任何主题或品牌色设置：全站唯一的原生颜色控制就是Oversigtsside屏幕上的Standardbjælkefarve与柱状颜色规则。字体、背景色、强调色、布局微调全部走这里的Brugerdefineret CSS。如果你在找"品牌色"字段，答案就是：它不存在，这个文本框是唯一的出路。

安全提醒（原文档特别强调）：自定义 JavaScript 运行在访客浏览器里，而访客打开状态页的时机恰恰是他们担心系统出故障的时刻。保持脚本短小、尽量自托管、上线前充分测试。

仓库里的 StatusPageCustomizationOrigin.test.ts 从源码层面验证了上述限制：测试构造了CUSTOM_CSS、CUSTOM_JAVASCRIPT、HEADER_HTML、FOOTER_HTML等注入载荷，断言未绑定已验证自定义域名时序列化结果不包含customJavaScript、headerHTML等字段，绑定已验证域名后这些字段才被返回，并且测试明确拒绝通过forwarded-host、origin、referer等请求头伪造来源来"绕过"同源边界（见测试用例 "ignores forwarded-host, origin, referer, and body attempts to opt in"）。这也解释了为什么文档要求你必须先完成域名验证，自定义代码才会被提供。

Sprog 设置：默认语言与可用语言

入口为Statussider → 你的页面 → Branding → Sprog（{id}/languages），两个卡片都与页脚的语言选择器相关。

• Standardsprog（默认语言）：Edit Default Language打开下拉列表，每个受支持语言同时显示其母语名称与英文名称（如Deutsch (German)）。卡片描述为"首次访问者看到的语言"；访客之后随时可以在页脚切换。默认是英语。
• Aktiverede sprog（启用的语言）：Edit Enabled Languages打开多选器，占位符All languages。留空则提供所有受支持语言；只选几个，页脚选择器就只显示这几个。

文档列出的语言为十六种：英语、德语、法语、西班牙语、意大利语、葡萄牙语、荷兰语、丹麦语、挪威语、瑞典语、俄语、日语、韩语、简体中文、繁体中文、印地语。对照当前仓库源码 StatusPageLanguage.ts，SUPPORTED_STATUS_PAGE_LANGUAGES实际还额外包含波斯语（fa, فارسی / Persian），即当前源码共 17 种语言；默认语言常量DEFAULT_STATUS_PAGE_LANGUAGE = "en"与文档一致。

Brugerdefinerede domæner：把页面搬到自己的域名上

默认情况下，状态页通过其Oversigt（概览）屏幕展示的预览 URL 访问。要让它跑在你的自有主机名下，进入Statussider → 你的页面 → Branding → Brugerdefinerede domæner（{id}/domains）。

卡片Brugerdefinerede domæner的描述直接点明要求：要让它生效，需要为这些域名添加指向你安装的 CNAME 记录。未配置时表格显示 "No custom domains found."。表格有两列Domæne（域名）与Status（状态），并提供Domæne、CNAME gyldig（CNAME 有效）、SSL provisioneret（SSL 已配置）三个过滤器。

在数据层面，每条记录对应 StatusPageDomain.ts 模型：subdomain（标签，如status）、fullDomain（由子域名与域名自动拼成的完整域名，如status.acmeinc.com）、cnameVerificationToken（Worker 验证用的令牌）、isCnameVerified、isSslOrdered、isSslProvisioned、customCertificate/customCertificateKey/isCustomCertificate（自定义证书），以及certificateReissueRequestedAt（用于限制证书重签频率，防止共享的 Let's Encrypt 账户配额被耗尽）。

开始前的两项前提

有两个前置条件——跳过任何一个都是"为什么不行"的常见原因：

1. 父级域名必须已经验证。Domæne下拉列表只展示项目设置中已验证的域名；字段自身的帮助文本会引导你前往Mere（更多）→ Projektindstillinger（项目设置）→ Brugerdefinerede domæner（自定义域名）先添加一个。
2. 安装必须配置了指向状态页的 CNAME 记录。在自托管安装中，这是 Docker Compose 里的环境变量STATUS_PAGE_CNAME_RECORD，或 Helm 的values.yaml中的statusPage.cnameRecord。仓库根目录的 config.example.env 给出了完整示例（第 59-74 行附近）：设置STATUS_PAGE_CNAME_RECORD=oneuptime.yourcompany.com，然后在 DNS 提供方为status.yourcompany.com创建指向该值的 CNAME 记录；同一段配置还演示了仪表盘（Dashboard）用到的DASHBOARD_CNAME_RECORD，机制相同。若缺失该配置，Tilføj CNAME（添加 CNAME）与Bestil gratis SSL（订购免费 SSL）两个弹窗都会显示 "Custom Domains not enabled for this OneUptime installation" 而不是操作指引。

添加域名

点击Create Status Page Domain（创建状态页域名），弹窗（Create New Status Page Domain）分两步：

Grundlæggende（基础）

• Underdomæne（子域名）：只填标签本身，占位符status (leave blank for root)。只写status，不要写完整主机名。留空或填写@表示使用根/apex 域名。
• Domæne：已验证域名的下拉列表，占位符Vælg domæne（选择域名）。

Mere（更多）

• Upload brugerdefineret certifikat（上传自定义证书）：开关，默认关闭。保持关闭则由 OneUptime 为你订购免费证书；开启后出现Certifikat（证书）与Privat certifikatnøgle（私钥）两个字段，用于粘贴你自己的 PEM 材料（对应模型中的customCertificate/customCertificateKey）。

验证 CNAME

在域名验证通过之前，该行会显示Tilføj CNAME（添加 CNAME）操作。点击后打开的弹窗（Tilføj CNAME）给出需要在 DNS 提供方填入的完整信息：

• Posttype（记录类型）：CNAME
• Navn（名称）：你刚创建的完整域名，例如status.ditfirma.dk
• Indhold（内容）：你安装的指向状态页的 CNAME 记录（即STATUS_PAGE_CNAME_RECORD/statusPage.cnameRecord的值）

弹窗会注明：记录生效后，自动验证最长可能需要 24 小时。但你不必干等：弹窗的提交按钮叫Bekræft CNAME（验证 CNAME），会立即检查记录。

操作顺序：先创建 DNS 记录，再点击 Bekræft CNAME。在记录存在之前点击，验证只会失败。

订购 SSL 证书

CNAME 验证通过之后——且仅当你没有上传自定义证书时——该行会出现Bestil gratis SSL（订购免费 SSL）操作。其弹窗Order Free SSL Certificate for this Status Page说明：OneUptime 使用 LetsEncrypt，流程安全且免费，订购提交后配置需要数小时。提交按钮名为Bestil gratis SSL。

文档明确提醒：不同界面给出的时间并不一致，不必对单个数字较真：订购弹窗说三小时，Status列说一小时，自定义证书说三十分钟。把它们都理解成"当天晚些时候回来看看"；如果到点仍无进展再联系支持。

证书配置完成之后会自动续期，无需任何周期性的人工操作。模型注释印证了这一点：自动化续期由 cron 任务维护，且从不写入certificateReissueRequestedAt——只有仪表盘上的人工"重新签发"请求才会留下时间戳，用于重签冷却（rate limit）。

读懂 Status 列：整个流程的状态机

Status列把整套配置的状态机浓缩在一个单元格里。每条消息要么告诉你下一步该做什么，要么告诉你已经完成：

如果某行长时间停留在Action Required: Please add your CNAME record.，即使你早已创建 DNS 记录，请检查：记录的名称必须是完整域名，内容必须与安装的 CNAME 记录逐字符精确匹配。

"Drevet af OneUptime"品牌行在哪里关

"Powered by OneUptime" 这一行并不是品牌分区里的设置。它位于Statussider → 你的页面 → Avanceret → Avancerede indstillinger（{id}/settings）的Drevet af OneUptime-branding卡片中，是一个独立开关：Skjul "Powered By OneUptime"-branding（隐藏 "Powered By OneUptime" 品牌行）。点击Edit Settings打开它，与那一页的其他卡片操作方式一致。前端逻辑对应 Footer.tsx：if (!props.hidePoweredByOneUptimeBranding)时渲染品牌行，由 MasterPage.tsx 从状态页数据的hidePoweredByOneUptimeBranding字段读取并传入。

延伸阅读

• Statussider – Oversigt（状态页概览）——什么是状态页，各部件如何拼合。
• Statusside – ressourcer og grupper（状态页资源与分组）——选择访客在页面上实际看到的内容。
• Abonnenter og meddelelser（订阅者与通知）——通过电子邮件、短信、Slack 和 webhook 订阅，以及通知推送。
• Offentlig API（公共 API）——以编程方式读取状态页数据。
• Hændelsestilstande og alvorsgrader（事件状态与严重级别）——什么会让事件出现在页面上、又何时消失。

仓库中的英文原版对应文件为 App/FeatureSet/Docs/Content/en/status-pages/branding-and-domains.md，其余各主题的英文版本同样位于 App/FeatureSet/Docs/Content/en/status-pages 与 App/FeatureSet/Docs/Content/en/incidents 目录下，可作为术语对照与进一步查阅的入口。

【免费下载链接】oneuptimeComplete open-source monitoring and observability platform.项目地址: https://gitcode.com/GitHub_Trending/on/oneuptime