AI导哈

静态网站生成工具

一个极简的赛博朋克风格静态站点生成工具，用于快速搭建和部署个人或项目展示网站。

  • by hwxy233
  • HTML
  • 本地部署
  • 更新于
在 GitHub 查看 hwxy233/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:<YOUR_USERNAME>/chrome-devtools-mcp-workshop.git
git push -u origin main
  3. 打开仓库 Settings → Pages：
    • Source 选择 Deploy from a branch
    • Branch 选择 main，目录 /(root)，保存
  4. 数分钟后访问 https://<YOUR_USERNAME>.github.io/chrome-devtools-mcp-workshop/

可选（自定义域名）

  • 在仓库根目录添加 CNAME 文件，内容为你的域名：
    example.yourdomain.com
  • 在域名 DNS 设置中添加 CNAME 记录指向 <YOUR_USERNAME>.github.io

SEO / 站点文件

  • robots.txt 已允许所有抓取，并指向 sitemap.xml
  • sitemap.xml 使用占位域名 https://<YOUR_USERNAME>.github.io/chrome-devtools-mcp-workshop/
    • 部署后可根据实际 URL 更新该文件

定制

  • 样式变量位于 assets/css/style.css 的 :root 中（霓虹黄/青/粉 + 炭黑）
  • 字体默认引用 Google Fonts：Orbitron（标题）+ Noto Sans SC（中文正文字体）
    • 若需纯离线/内网环境，请改为系统字体栈并移除字体链接

许可

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

相关 MCP