有人来问合作，想看你和哪些品牌合作过、哪几篇内容最能代表你。你打开 X 找帖子，又去 YouTube 翻视频；链接凑齐了，还得给对方解释每个案例做了什么。资料都发过，却散在好几个地方。
我把自己的作品、合作品牌和联系方式放进同一个页面。下次有人来问，发一个网址就能让对方先了解我。下面这段视频是做好的页面，后面从整理材料讲到用 Cloudflare Pages 发布。
成品在 xiaomovps.com。我主要整理 X 账号的内容。如果你做的是 YouTube、公众号或其他平台，换成自己的作品和账号资料即可。
本文导读
按这个顺序操作就行。
- 整理能展示的作品和合作资料。
- 让 Grok 根据资料生成网页，自己预览。
- 把网页文件上传到 GitHub。
- 用 Cloudflare Pages 发布并检查免费地址。
- 有独立域名的话，再把它接入 Pages。
- 用电脑和手机走一遍作品与联系方式。
做到第四步，就有免费的 项目名.pages.dev 地址，可以先发给别人看。
一、先把名片内容找齐
需要三个账号。Grok 帮我查 X 上的公开内容，GitHub 保存网页文件，Cloudflare Pages 负责发布。没有账号的话，先到 GitHub 和 Cloudflare 注册，按页面提示完成邮箱验证；再用 X 账号打开 Grok。
我先把 @xiaomovps 交给 Grok，让它整理账号特点、代表内容、值得展示的案例，以及确实合作过的品牌。这里最好直接给 X 主页链接。我第一次只写了 xiaomovps，它先跑去查同名 GitHub 用户，后来才找到我的 X 账号。
你可以把用户名换成自己的，先让它找资料。
请根据 @你的X用户名 的公开主页和帖子，整理账号定位、最有代表性的内容、能展示给合作方的案例，以及确实发生过推广合作的品牌。每个作品或合作案例尽量给出原帖链接。找不到证据的内容单独列出，不要补写。
Grok 给出的表格只是草稿。我后来让它补齐作品链接，再逐个打开原帖核对。那份结果里也出现了 xAI Grok Bot 和 Cloudflare 的相关内容，但“提到过这个名字”和“与这个品牌合作过”要分开看，我没有把它们算进合作品牌。阅读量、粉丝数同样要自己查，并记下核对日期。X 的 Grok 使用说明也提醒用户独立核实回答。
这一轮整理完，先留四样东西就够了。简短的自我介绍，能打开原链接的代表作品，确认过的合作品牌，以及愿意公开的联系方式。作品可以来自不同平台，链接要能带人回到原内容。
二、把资料做成一张网页
我先让 Grok 看了实践哥的网站，参考它在单页里安排介绍、作品和合作入口的方式。
因为我的内容主要围绕 Pi，视觉上又参考了 pi.dev 的配色和终端元素。参考站只帮我确定页面怎么排。介绍、作品、品牌和联系信息，都用刚才核过的材料。
想让 Grok 生成第一版，可以把核对好的资料和下面这段要求一起发给它。
请根据我已经核对过的介绍、作品链接、合作品牌和联系方式，制作一个适合手机和电脑阅读的数字名片。参考网站只用于理解页面结构和视觉节奏，不复制它的文案、图片或品牌信息。页面需要有个人介绍、代表作品、合作品牌和联系区域。请输出可以部署到 Cloudflare Pages 的静态网页文件，并说明每个文件保存在哪里。
我的页面用的是静态文件。index.html 放内容，styles.css 管样式，main.js 管交互，图片收在 assets/。生成以后，把这些文件放进同一个文件夹，先在电脑上打开 index.html。如果部分交互或图片在直接打开文件时表现异常，电脑装有 Python 3 的话，可以在这个文件夹运行下面的命令，再访问 http://127.0.0.1:4177/。
python3 -m http.server 4177 --bind 127.0.0.1
检查页面时，我先看介绍能否让人看懂我做什么，再点作品链接。合作品牌区只留下确认过的合作。我把品牌做成可以横向滑动的一排，手机上也能逐个看。
联系区域放了微信二维码、X、Telegram 和邮箱。邮箱链接要自己点一下，二维码也要拿另一部手机扫一次。页面做得再好看，如果对方到最后找不到你，这张名片就没帮上忙。
三、把网页放到 GitHub
打开 GitHub，新建一个仓库，名称自己定，公开范围选 Private。我的仓库叫 xiaomovps-collab。然后把 index.html、样式文件、脚本和整个 assets/ 图片目录上传进去。
刷新仓库页面，确认根目录能看到 index.html，图片也在 assets/ 里。少传一张 Logo 或二维码，网页发布后就会留下空白。私有仓库可以连接 Pages，但上线后的网页及网页引用的图片都能被访问者看到，密码和不准备公开的原始材料不要放进去。Cloudflare 的 Git 集成文档列明了私有仓库的接入方式。
四、用 Cloudflare Pages 发布
连接 GitHub 仓库
回到 Cloudflare 后台，进入 Workers 和 Pages，点击 创建应用程序。这里选 Pages，接着选 连接到 Git，授权并选择刚上传的 GitHub 仓库。
填写设置并检查页面
下一页会让你填部署设置。我的 index.html 就在仓库根目录，也不需要打包，所以这样填。
| 设置项 | 我的项目 |
|---|---|
| 生产分支 | main |
| 框架预设 | None |
| 构建命令 | 留空 |
| 构建输出目录 | .，即仓库根目录 |
我的仓库中，wrangler.toml 也把 Pages 输出目录写成了 .。如果 Grok 给你的是 Vite 等需要打包的项目，输出目录要填打包后真正生成网页文件的文件夹，不能照抄我的 .。Cloudflare 官方教程说明了无构建站点的设置。
点击保存并部署，等状态显示成功。Cloudflare 会给项目一个 项目名.pages.dev 地址，先打开它，看看图片有没有缺、作品能否跳转、联系按钮是否可用。看到部署成功的提示后，还要亲自打开网页检查。
到这里已经可以分享。以后改了网页文件并推送到连接的 GitHub 分支，Pages 会重新部署。
五、想用自己的网址，再绑定域名
这一步可以跳过。我买了 xiaomovps.com，因为它和 X 用户名对应，也方便在合作沟通中写出来。如果你也想买，.com 比较好认，实际能否注册和价格要看当时的查询结果。
买域名或接入已有域名
在 Cloudflare 后台进入域名区域，选择添加或购买域名。
在搜索框里输入想要的名称，查看能否购买。
付款前再核对完整域名、续费价格和注册信息，别只看首年价格。
域名买好后，可以在 Cloudflare 的域名列表里看到它的状态。
我是在 Cloudflare 买的域名，名称服务器由它管理。如果域名买自其他平台，要先把域名添加到 Cloudflare，核对原有 DNS 记录，再到注册商那里把名称服务器改成 Cloudflare 提供的地址，等域名状态变为活动。名称服务器也常写成 NS。两种情况可以对照 Cloudflare 的域名注册说明和名称服务器说明。
把域名接到 Pages
接下来回到刚建好的 Pages 项目，打开 自定义域，点击 设置自定义域，输入你的域名。我把根域名和 www 都加进了项目。先在 Pages 项目里添加，再照界面提示完成 DNS 设置。
等自定义域显示活动，再分别打开根域名和 www 地址，确认都能看到同一张名片。
如果状态一直没通过，先看 Pages 自定义域名文档里对应的是根域名还是子域名，再检查 DNS 记录。
页面出问题时，按现象排查
第一次部署如果没成功，先看自己遇到的是哪一种情况，再去改对应的设置。
- Pages 地址显示 404。确认 GitHub 仓库中的
index.html位于 Pages 设置的构建输出目录。我的网页文件在仓库根目录，所以填.；如果你的网页由打包命令生成在dist/，就填dist。 - 部署记录显示失败。进入 Pages 项目的部署详情，打开构建日志，看是哪一步报错。仓库没有连上就检查 GitHub 授权；构建命令报错或找不到输出目录，就回到部署设置核对这两项，改完后重新部署。
- 网页能打开，Logo 或二维码却不显示。回到 GitHub 确认图片已经传进
assets/，再检查网页中的图片路径、文件名和大小写是否一致。 - 免费地址正常，自定义域名打不开。先看 Pages 项目里的自定义域状态和 DNS 记录。域名买自其他平台时，还要核对注册商填写的 NS 与 Cloudflare 给出的地址是否完全相同。
Cloudflare 的 Pages 排障说明和名称服务器排障说明有更细的检查步骤。
六、数字名片，让你变得更专业
我写这篇文章的初衷，是因为我开始慢慢有一些影响力，很多人会来加我，可能是为了技术分享或者是商业合作。
在这个过程中，我也遇到了前面提到的问题：每一次我都要去重新整理对应平台的数据给对方，然后对方再根据我提供的内容给出建议或者是报价。
在这一次一次的过程当中，我感觉到又浪费我的时间又浪费我的精力，就想到了要搭建一个自己的数字名片。
其实整个操作下来都非常简单，总共也就是两个账号加一个域名。而且我在文章当中已经说得很清楚了，只要你跟着操作，绝对可以部署一个属于你自己的数字名片。
如果这篇文章对你有帮助，希望你可以转发给更多的人，也可以关注我我也会分享更多实用内容。
