企业官网建设流程全解析

• 数据集

本文以 src/companies/shogun.md 这份公司档案为分析主体，解读 remoteintech.company（开源仓库 remote-jobs）如何用一套结构化的 Markdown + Frontmatter 格式记录远程友好科技公司：从 Shogun 的业务定位、远程策略、技术栈到申请渠道，再结合仓库中的渲染模板、标签字典与集合逻辑，还原一份档案从数据到页面的完整链路。读完本文，你将掌握该目录的字段规范、取值约束与构建机制，并能据此读懂或编写任意一家公司的远程档案。

档案文件概览：一条 markdown 记录了一家远程公司

remoteintech.company 的每一个公司条目都是一个位于 src/companies/ 目录下的独立 Markdown 文件，文件名即 slug（如shogun.md），内容由两部分组成：YAML Frontmatter（结构化元数据）和 Markdown 正文（人类可读的说明文字）。Shogun 的档案正是这一格式的典型样本，其 Frontmatter 如下：

--- title: "Shogun" slug: shogun website: https://getshogun.com careers_url: https://angel.co/shogun/jobs region: worldwide remote_policy: fully-remote company_size: small technologies: - go - javascript - ruby addedAt: 2019-02-20 updatedAt: 2022-10-10 ---

这份元数据记录的信息包括：公司名称与 slug、官网与招聘页 URL、招聘地区范围（worldwide）、远程政策（fully-remote）、公司规模（small）、核心技术栈（Go / JavaScript / Ruby），以及档案的添加与更新时间。其中addedAt与updatedAt由维护者管理，普通贡献者提交 PR 时不应包含这两个字段（见 CONTRIBUTING.md 的说明）。

Company blurb：一句话定位公司，也是页面 meta description 的来源

档案正文以## Company blurb开头，是整份档案的灵魂段落。Shogun 的 blurb 写道：

We make a drag and drop storefront builder and optimization tool for e-commerce websites. We are a tight knit distributed team of talented people who enjoy making delightful software experiences. We take pride in being bootstrapped to profitability, and we are backed by Y-Combinator and Initialized Capital.

这段文字交代了三件事：产品形态（面向电商网站的拖拽式店铺搭建与优化工具）、团队特质（紧密协作的分布式团队、追求愉悦的软件体验）、公司背景（以盈利为目标自举发展，并获 Y-Combinator 与 Initialized Capital 投资支持）。

在仓库中，blurb 不只是展示文本，还被机器复用了。查看 companies.11tydata.js 的eleventyComputed.description逻辑：它通过正则##\s*Company\s*blurb\s*\n+([\s\S]*?)(?=\n##|$)从原始 Markdown 中提取 blurb 段落，剥离 Markdown 标记（链接转文字、去星号/反引号、压缩空白），再按句号或空格截断到约 155 字符，生成页面的 meta description。这意味着写好 blurb 同时优化了页面在搜索引擎中的摘要呈现，是档案与 SEO 直接挂钩的一处实现细节。

Company size 与 Region：规模分档与招聘范围字段

档案的## Company size段落记录公司规模为 20-50 人（截至 2019 年 2 月），Frontmatter 中对应company_size: small。这个取值并非自由文本，而是受 labels.js 与 CONTRIBUTING.md 约束的枚举值：

Shogun 使用了worldwide（面向全球招聘）与small（11-50 人）两档。标签字典 labels.js 作为单一事实来源，既被 Nunjucks 模板通过全局数据级联以labels.*使用，也被 companyHelpers.js 导出给 JS 侧（collections 等模块）消费，保证页面展示与分组逻辑的标签文本完全一致。

Remote status：从建立之初就 100% 远程的分布式团队

Shogun 档案的## Remote status明确写道：

We've been 100% remote since the beginning, with employees currently working out of the USA, Canada, Brazil, Georgia, India, Australia, Scotland, Taiwan, Portugal, and Spain.

即公司从创立起就完全远程办公，团队成员分布于美国、加拿大、巴西、格鲁吉亚、印度、澳大利亚、苏格兰、中国台湾、葡萄牙、西班牙等地。Frontmatter 中对应的remote_policy: fully-remote会渲染为 "Fully Remote" 标签（见 labels.js 的remotePolicy映射），并在 company.njk 中链接到/browse/fully-remote/浏览页，方便求职者按远程政策筛选。

值得注意的是，该档案的updatedAt为 2022-10-10，文中关于团队分布与规模的表述以档案记录时间为准，求职者应以招聘页的实时信息为准。

Company technologies：档案如何参与技术栈聚合

正文## Company technologies列出 "Ruby / Rails, Go, JavaScript, React, Node"，Frontmatter 的technologies数组收录了其中三个受控取值：go、javascript、ruby（其余如 React、Node 未在枚举值内，故未列入结构化字段）。

技术标签的聚合逻辑在 collections.js 的getCompaniesByTech中实现：遍历全部公司档案，按technologies数组把每家公司归入对应技术分组，最终生成带数量统计的浏览标签页。同样地，getCompaniesByRegion依据region字段分组，getCompanyTags则从 Eleventy 集合动态推导出 technology / region / remote-policy 三类标签，替代旧的静态数据文件。也就是说，修改或新增一家公司的technologies字段，站点上对应的技术浏览页会随之自动更新。

页面渲染链路：从 markdown 档案到公司详情页

公司档案经由 src/companies/companies.json 指定layout: company，最终由 company.njk 模板渲染。该模板的关键行为包括：

• 申请按钮：优先取careers_url，其次取website；存在careers_url时按钮文案为 "Apply Now"，否则为 "Visit Website"；
• 标签行：region与remote_policy分别渲染为带对应浏览页链接的标签（/browse/{region}/、/browse/{remote_policy}/）；
• Tech Stack 区块：遍历technologies数组渲染技术标签并链接到/browse/{tech}/；
• 页脚：展示updatedAt并格式化为 "MMMM D, YYYY" 形式（通过formatDate过滤器），同时提供返回全部公司列表与 "Edit on GitHub" 入口。

How to apply：求职者如何投递

档案末尾的## How to apply提供了两条申请路径：

• 查看团队页面与 AngelList 招聘页获取当前在招职位；
• 若心仪的职位未列出，可通过邮件向 jobs@getshogun.com 发起沟通，主动创建职位。

在页面渲染上，careers_url会被 company.njk 用作 "Apply Now" 按钮的跳转目标，并在按钮上附加data-track-outbound属性用于外链点击追踪。

档案规范与验证：为什么这份文档值得作为模板参考

Shogun 档案完整覆盖了 CONTRIBUTING.md 要求的全部必备小节（Company blurb、Remote status、How to apply）与常用可选小节（Company size、Region、Company technologies），字段取值均落在合法枚举范围内，是一份格式合规的样板档案。仓库通过 GitHub Action "Validate Company Profiles" 自动校验涉及公司文件的 PR，字段越界、缺节、重复条目都会被机器人拦截，从而保证全目录近千份档案（src/companies/ 下约 800+ 个文件）的结构一致性。

构建与本地预览

如果你希望在本仓库中复现 Shogun 档案页面的渲染效果，可按 README.md 的说明操作（需 Node.js 22+）：

npm install # 安装依赖 npm run start # 开发服务器，支持热重载 npm run build # 生产构建

构建完成后，所有公司档案会按 collections.js 中的排序与分组逻辑生成站点页面，包括按名称字母序排列的全部公司列表、按 region / technology / remote-policy 聚合的浏览页，以及基于addedAt的最近新增公司列表。

小结

Shogun 的档案是一份高信息密度的远程公司数据样本：它用 8 个 Frontmatter 字段 + 5 个正文小节，把业务定位、远程政策、团队分布、技术栈与申请方式完整沉淀为机器可读、页面可渲染、搜索引擎可索引的结构化文档。透过这份档案与仓库源码的对照，你可以完整理解 remoteintech.company 的档案格式规范（CONTRIBUTING.md）、字段取值约束（labels.js）、自动摘要生成（companies.11tydata.js）与页面渲染（company.njk、collections.js），既是求职者筛选 fully-remote 机会的入口，也是社区贡献者提交新公司档案时的参照范例。

• 数据集