Chrome Devtools MCP Workshop

DevFest Workshop · Chrome DevTools MCP — 静态网站

一个极简的赛博朋克 2077 风格静态站点，用于记录我在 Google DevFest Workshop（主题：Chrome DevTools MCP Server）的所见所学。

结构

.
├─ index.html                   # 首页（Workshop 总览）
├─ about-gdg-devfest.html       # 子页：GDG & DevFest 简介
├─ about-devtools-mcp.html      # 子页：DevTools MCP 介绍
├─ about-v.html                 # 子页：关于我（V）
├─ assets/
│  └─ css/
│     └─ style.css              # 共享赛博主题样式
├─ robots.txt
├─ sitemap.xml
└─ .nojekyll                    # 禁用 Jekyll（避免下划线目录被忽略）

本地预览

• 方式 A：直接双击 index.html 用浏览器打开（静态，无构建）。
• 方式 B：本地起一个简单服务器（任选其一）：

- Python: python -m http.server 8080 → 打开 http://localhost:8080/ - Node: npx http-server -p 8080 → 打开 http://localhost:8080/

GitHub Pages 部署

1. 新建 GitHub 仓库（例如 chrome-devtools-mcp-workshop）。
2. 提交并推送本项目到 main 分支根目录：

   git init
   git add .
   git commit -m "feat: initial site"
   git branch -M main
   git remote add origin git@github.com:/chrome-devtools-mcp-workshop.git
   git push -u origin main

1. 打开仓库 Settings → Pages：

- Source 选择 Deploy from a branch - Branch 选择 main，目录 /(root)，保存

1. 数分钟后访问 https://.github.io/chrome-devtools-mcp-workshop/

可选（自定义域名）

• 在仓库根目录添加 CNAME 文件，内容为你的域名：

  example.yourdomain.com

• 在域名 DNS 设置中添加 CNAME 记录指向 .github.io

SEO / 站点文件

• robots.txt 已允许所有抓取，并指向 sitemap.xml
• sitemap.xml 使用占位域名 https://.github.io/chrome-devtools-mcp-workshop/

- 部署后可根据实际 URL 更新该文件

定制

• 样式变量位于 assets/css/style.css 的 :root 中（霓虹黄/青/粉 + 炭黑）
• 字体默认引用 Google Fonts：Orbitron（标题）+ Noto Sans SC（中文正文字体）

- 若需纯离线/内网环境，请改为系统字体栈并移除字体链接

许可

• 本示例仅用于 Workshop 学习与演示，无第三方受限资源。