企业官网建设流程全解析

• 数据集

导读

本文以 Headway 公司档案 为完整样例，逐层拆解 remote-jobs（remoteintech.company 的源码仓库）中公司条目的数据组织方式：从 YAML frontmatter 中的结构化元数据，到 Markdown 正文中的公司愿景、远程政策与技术栈描述，再到 Eleventy 构建系统如何将这份档案渲染成可被检索、可被搜索引擎和 Agent 理解的公司页面。读完本文，你将掌握该仓库"一份公司档案 = 可编程元数据 + 人类可读正文"的设计范式，并能照此理解仓库中任意一家公司的档案（如 10up.md、GitLab）。

Headway 档案概览：frontmatter 是整个数据管线的入口

在 remote-jobs 仓库中，每一家公司都是一个位于 src/companies/ 目录下的 Markdown 文件。headway.md文件的开头是一段 YAML frontmatter，它是整个数据管线的入口：

--- title: "Headway" slug: headway website: https://www.headway.io/ careers_url: https://headway.io/careers region: americas remote_policy: remote-first company_size: small technologies: - elixir - graphql - javascript - ruby addedAt: 2019-08-29 updatedAt: 2022-10-10 ---

这些字段并非随意堆砌，它们分别对应着仓库中的标签体系、构建配置与页面渲染逻辑。下面逐一解读：

从源码结构可以推断：region、remote_policy、company_size、technologies四个字段共同构成了站点的标签化浏览体系。在 collections.js 的getCompanyTags中，每份档案会被拆解并挂到technology、region、remote-policy三类标签下，最终生成/browse/{tag}/形式的浏览页，实现"按地区找公司""按技术栈找公司""按远程政策找公司"的聚合检索。

公司正文：Vision、Mission 与 About 的结构化叙述

frontmatter 之后是公司档案的 Markdown 正文，headway.md采用"## Company blurb"作为总标题，内部再细分为 Vision、Mission、About 三个子块。这种结构不仅供人类阅读，还被构建系统直接消费。

Headway 在档案中这样陈述自己的愿景与使命：

• Vision（愿景）：Bring entrepreneurial ideas to market & keep them there.（把创业想法带到市场并留在那里。）
• Mission（使命）：To provide holistic services that elevate customers to their next phase of business and cover their blind spots...（提供整体性服务，帮助客户进入下一阶段业务并覆盖其盲区。）
• About（公司介绍）：成立于 2015 年，以"成为客户产品团队的真实延伸"为合作理念，而不仅仅是技术执行方；发现问题（工作流、营销/信息传递策略、多余功能）会主动提出，客户信任他们去修复；采用"现实的、增量的软件发布"节奏，营造友好、有趣、协作的氛围。

这里有一个容易被忽视的源码细节：companies.11tydata.js 会在构建时为每家公司自动计算 meta description。它的逻辑是：用正则##\s*Company\s*blurb\s*\n+([\s\S]*?)(?=\n##|$)截取 "## Company blurb" 标题之后的内容，再经过剥除 Markdown 链接语法（text → text）、移除* _ \`` 符号、合并换行与空白，最后截断到约 155 个字符（优先在句号处截断）。也就是说，headway.md` 中 About 段的第一句话会被自动加工成页面的 SEO meta description——这正是"档案正文质量直接决定页面被搜索引擎索引效果"的机制所在。

招聘要素四件套：规模、远程政策、地区与申请入口

headway.md正文继续用四个小节给出求职者最关心的信息，这也是仓库中所有公司档案的通用章节约定：

Company size（公司规模）

Headway 明确给出20-50 人的规模区间，这与 frontmatter 中的company_size: small一致（对应 labels.js 的small → 11-50 employees标签）。

Remote status（远程状态）

We're remote-first, but you can work in our beautiful new offices in Green Bay, WI, if you would prefer.

这段话在仓库的数据模型中对应remote_policy: remote-first。从 labels.js 可以看到，仓库把远程政策划分为四种枚举值：fully-remote（完全远程）、remote-first（远程优先）、hybrid（混合）、remote-friendly（远程友好）。Headway 属于"远程优先"档位——远程是默认工作方式，但公司仍保留实体办公室供员工选择。仓库中同样标注remote-first的还有 Doist、GitLab 等，可作为横向对比样本。

Region（招聘地区）

Headway 的招聘范围限定为USA，且明确写出资格门槛："Anyone legally able to be employed in the United States is eligible to apply."（任何合法可在美国受雇的人都有资格申请。）这一限定在 frontmatter 中以region: americas表达，对应标签 "Americas"。对比而言，仓库中region: worldwide的公司则对全球求职者开放。

How to apply（申请方式）

档案最后指向招聘页面careers_url（headway.io/careers）。在实际渲染时，company.njk 会优先读取careers_url并把按钮文案设置为 "Apply Now →"；只有档案未提供careers_url时才会回退到website，按钮文案变为 "Visit Website →"。

技术栈清单：跨语言全栈团队的信号

headway.md的 "Company technologies" 小节列出了五类技术：

• React（native 与 web）
• Ruby/Rails
• GraphQL
• Elixir/Phoenix
• Node

frontmatter 中的technologies数组（elixir / graphql / javascript / ruby）与正文略有出入：正文额外提到 React、Phoenix、Node 等具体框架名，而 frontmatter 只保留可枚举的标签键。从 labels.js 的tech映射表可以看出，仓库官方支持的枚举键包括javascript、typescript、react、nodejs、ruby、elixir等；headway.md的 frontmatter 未使用react、nodejs这类标准键，而是补充了graphql（映射表未收录，会以原文显示）。这一差异恰好说明：frontmatter 中的技术标签用于分类聚合，正文中的技术栈描述则保留更丰富的人类可读细节，两者互补。从 collections.js 的getCompaniesByTech可以验证，graphql、elixir、ruby、javascript每个键都会被纳入/browse/{tech}/聚合页。

档案页面的渲染与可检索性设计

Headway 档案最终由 company.njk 布局模板渲染为完整页面，其渲染链路清晰体现了本仓库"数据驱动页面"的设计：

1. 头部元信息：title渲染为渐变 H1；careers_url/website生成主按钮；region、remote_policy渲染为可点击的标签（tag--region、tag--policy），点击后跳转到对应/browse/浏览页。
2. 正文区：Markdown 正文经{{ content | safe }}注入，技术栈标签以tag--tech样式渲染为可点击标签。
3. 可检索性：整个档案被包裹在带data-pagefind-body属性的<article>中（company.njk），意味着页面正文会被 Pagefind 静态站内搜索索引，供站内搜索功能（对应 search.njk）命中。
4. 结构化数据：布局 frontmatter 声明schema: Organization，配合 companies.11tydata.js 自动生成的 meta description，为搜索引擎提供 Organization 类型的语义标注与摘要文本。

此外，collections.js 的getRecentCompanies依据addedAt排序取最近 12 家展示在首页；getFeaturedCompanies则从手工精选名单featuredCompanySlugs（companyHelpers.js）中随机抽取 8 家。Headway 虽不在精选名单中，但其addedAt: 2019-08-29使其与 2019 年前后入库的一批公司共同参与"最近新增"排序逻辑。

维护视角：这份档案告诉贡献者什么

把headway.md当作模板可以提炼出仓库对贡献者的约定（参见 CONTRIBUTING.md 与 pages/contributing.njk）：

• frontmatter 字段必须完整且取值合法：region、remote_policy、company_size必须取自 labels.js 定义的枚举值，否则页面会以原文兜底显示，破坏标签聚合的一致性；technologies尽量使用映射表中的标准键。
• "## Company blurb" 标题是约定：构建脚本依赖该标题截取 meta description，删改标题会导致 SEO 描述逻辑回退到"frontmatter 后第一段"的兜底路径。
• addedAt/updatedAt承担时效管理：updatedAt直接渲染在页面底部，帮助求职者判断信息新旧；addedAt参与首页新公司排序。

对照该模板，仓库中绝大多数公司档案（如 Doist、Basecamp、Buffer）都遵循完全相同的结构——理解了 Headway 这一份档案，就等于拿到了读懂整个仓库 800+ 家公司条目的钥匙。

• 数据集