| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="utf-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1">
|
| <title>GitHub Token 权限配置助手</title>
|
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
| <style>
|
| .permission-card {
|
| border-left: 4px solid #007bff;
|
| transition: all 0.3s ease;
|
| }
|
| .permission-required {
|
| border-left-color: #28a745;
|
| background-color: #f8fff9;
|
| }
|
| .permission-optional {
|
| border-left-color: #ffc107;
|
| background-color: #fefdf5;
|
| }
|
| .permission-not-needed {
|
| border-left-color: #dc3545;
|
| background-color: #fff5f5;
|
| }
|
| .step-number {
|
| background: linear-gradient(45deg, #007bff, #0056b3);
|
| color: white;
|
| border-radius: 50%;
|
| width: 40px;
|
| height: 40px;
|
| display: flex;
|
| align-items: center;
|
| justify-content: center;
|
| font-weight: bold;
|
| }
|
| .checklist-item {
|
| padding: 8px 0;
|
| border-bottom: 1px solid #eee;
|
| }
|
| .token-example {
|
| font-family: monospace;
|
| background: #f8f9fa;
|
| padding: 4px 8px;
|
| border-radius: 4px;
|
| border: 1px solid #dee2e6;
|
| }
|
| </style>
|
| </head>
|
| <body>
|
| <div class="container mt-4">
|
| <div class="row">
|
| <div class="col-md-10 mx-auto">
|
| <div class="text-center mb-5">
|
| <h1 class="display-4">🔑 GitHub Token 权限配置助手</h1>
|
| <p class="lead">为 VvvebJs 配置正确的 GitHub 访问权限</p>
|
| </div>
|
|
|
|
|
| <div class="card mb-4 border-primary">
|
| <div class="card-header bg-primary text-white">
|
| <h3 class="mb-0">⚡ 快速开始</h3>
|
| </div>
|
| <div class="card-body">
|
| <div class="row">
|
| <div class="col-md-6">
|
| <h5>👈 我是新手</h5>
|
| <p class="text-muted">第一次配置 GitHub Token</p>
|
| <a href="https://github.com/settings/tokens/new" target="_blank" class="btn btn-outline-primary">
|
| 🚀 创建新 Token
|
| </a>
|
| </div>
|
| <div class="col-md-6">
|
| <h5>🔧 我需要排查问题</h5>
|
| <p class="text-muted">Token 已创建但有问题</p>
|
| <a href="github-test.php" class="btn btn-outline-warning">
|
| 🧪 测试现有配置
|
| </a>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="row">
|
|
|
| <div class="col-md-6 mb-4">
|
| <div class="card h-100">
|
| <div class="card-body">
|
| <div class="d-flex align-items-center mb-3">
|
| <div class="step-number me-3">1</div>
|
| <h4 class="mb-0">访问 GitHub 设置</h4>
|
| </div>
|
| <ol>
|
| <li>登录 <a href="https://github.com" target="_blank">GitHub</a></li>
|
| <li>点击右上角头像 → Settings</li>
|
| <li>左侧菜单 → Developer settings</li>
|
| <li>Personal access tokens → Tokens (classic)</li>
|
| <li>Generate new token (classic)</li>
|
| </ol>
|
| <a href="https://github.com/settings/tokens" target="_blank" class="btn btn-primary btn-sm">
|
| 🔗 直接跳转
|
| </a>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="col-md-6 mb-4">
|
| <div class="card h-100">
|
| <div class="card-body">
|
| <div class="d-flex align-items-center mb-3">
|
| <div class="step-number me-3">2</div>
|
| <h4 class="mb-0">填写基本信息</h4>
|
| </div>
|
| <div class="mb-3">
|
| <label class="form-label"><strong>Note (描述):</strong></label>
|
| <div class="token-example">VvvebJs Website Editor</div>
|
| </div>
|
| <div class="mb-3">
|
| <label class="form-label"><strong>Expiration (过期时间):</strong></label>
|
| <div class="text-success">推荐: 90 days</div>
|
| <small class="text-muted">平衡安全性和便利性</small>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="card mb-4">
|
| <div class="card-header">
|
| <div class="d-flex align-items-center">
|
| <div class="step-number me-3">3</div>
|
| <h3 class="mb-0">选择权限范围 (Scopes)</h3>
|
| </div>
|
| </div>
|
| <div class="card-body">
|
| <div class="alert alert-warning">
|
| <strong>⚠️ 重要:</strong> 必须勾选 <code>repo</code> 权限，这是 VvvebJs 保存文件的基础要求。
|
| </div>
|
|
|
|
|
| <div class="permission-card permission-required card mb-3">
|
| <div class="card-header">
|
| <h5 class="text-success mb-0">✅ 必需权限</h5>
|
| </div>
|
| <div class="card-body">
|
| <div class="form-check">
|
| <input class="form-check-input" type="checkbox" checked disabled>
|
| <label class="form-check-label">
|
| <strong>repo</strong> - Full control of private repositories
|
| </label>
|
| </div>
|
| <small class="text-muted ms-4">
|
| 包含: repo:status, repo_deployment, public_repo, repo:invite<br>
|
| <strong>用途:</strong> 创建、读取、更新网页文件
|
| </small>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="permission-card permission-optional card mb-3">
|
| <div class="card-header">
|
| <h5 class="text-warning mb-0">⚠️ 可选权限</h5>
|
| </div>
|
| <div class="card-body">
|
| <div class="form-check mb-2">
|
| <input class="form-check-input" type="checkbox">
|
| <label class="form-check-label">
|
| <strong>workflow</strong> - Update GitHub Action workflows
|
| </label>
|
| </div>
|
| <small class="text-muted ms-4 d-block mb-3">
|
| <strong>用途:</strong> 如果您计划使用 GitHub Actions 自动部署
|
| </small>
|
|
|
| <div class="form-check mb-2">
|
| <input class="form-check-input" type="checkbox">
|
| <label class="form-check-label">
|
| <strong>write:packages / read:packages</strong> - Package registry access
|
| </label>
|
| </div>
|
| <small class="text-muted ms-4 d-block">
|
| <strong>用途:</strong> 如果您需要管理 GitHub Packages
|
| </small>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="permission-card permission-not-needed card">
|
| <div class="card-header">
|
| <h5 class="text-danger mb-0">❌ 不需要的权限</h5>
|
| </div>
|
| <div class="card-body">
|
| <div class="row">
|
| <div class="col-md-6">
|
| <ul class="list-unstyled">
|
| <li>❌ admin:repo_hook</li>
|
| <li>❌ admin:org</li>
|
| <li>❌ admin:public_key</li>
|
| <li>❌ gist</li>
|
| </ul>
|
| </div>
|
| <div class="col-md-6">
|
| <ul class="list-unstyled">
|
| <li>❌ notifications</li>
|
| <li>❌ user</li>
|
| <li>❌ delete_repo</li>
|
| <li>❌ admin:org_hook</li>
|
| </ul>
|
| </div>
|
| </div>
|
| <small class="text-muted">
|
| <strong>原因:</strong> VvvebJs 只需要读写文件，不需要管理权限
|
| </small>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="card mb-4">
|
| <div class="card-header">
|
| <div class="d-flex align-items-center">
|
| <div class="step-number me-3">4</div>
|
| <h3 class="mb-0">配置环境变量</h3>
|
| </div>
|
| </div>
|
| <div class="card-body">
|
| <div class="alert alert-info">
|
| <strong>📋 获取 Token 后，在 Hugging Face Space Settings 中添加这些环境变量:</strong>
|
| </div>
|
|
|
| <div class="row">
|
| <div class="col-md-6">
|
| <h5>🔑 GitHub 认证</h5>
|
| <div class="bg-light p-3 rounded">
|
| <code>GITHUB_TOKEN=ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</code><br>
|
| <code>GITHUB_OWNER=your_username</code><br>
|
| <code>GITHUB_REPO=your_repo_name</code><br>
|
| </div>
|
| </div>
|
| <div class="col-md-6">
|
| <h5>⚙️ 存储配置</h5>
|
| <div class="bg-light p-3 rounded">
|
| <code>GITHUB_BRANCH=main</code><br>
|
| <code>GITHUB_PATH=pages/</code><br>
|
| <code>STORAGE_TYPE=github</code><br>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <div class="mt-3">
|
| <h6>📝 配置说明:</h6>
|
| <ul>
|
| <li><code>GITHUB_TOKEN</code>: 刚创建的 40 字符 Token (以 ghp_ 开头)</li>
|
| <li><code>GITHUB_OWNER</code>: 您的 GitHub 用户名</li>
|
| <li><code>GITHUB_REPO</code>: 存储网页的仓库名</li>
|
| <li><code>GITHUB_PATH</code>: 网页保存的目录 (可以为空)</li>
|
| </ul>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="card mb-4">
|
| <div class="card-header">
|
| <div class="d-flex align-items-center">
|
| <div class="step-number me-3">5</div>
|
| <h3 class="mb-0">验证配置</h3>
|
| </div>
|
| </div>
|
| <div class="card-body">
|
| <h5>✅ 配置检查清单</h5>
|
| <div id="checklist">
|
| <div class="checklist-item">
|
| <input type="checkbox" class="form-check-input me-2" id="check1">
|
| <label for="check1">Token 已创建且有 <code>repo</code> 权限</label>
|
| </div>
|
| <div class="checklist-item">
|
| <input type="checkbox" class="form-check-input me-2" id="check2">
|
| <label for="check2">环境变量已在 Hugging Face Space 中配置</label>
|
| </div>
|
| <div class="checklist-item">
|
| <input type="checkbox" class="form-check-input me-2" id="check3">
|
| <label for="check3">GitHub 仓库已创建且可访问</label>
|
| </div>
|
| <div class="checklist-item">
|
| <input type="checkbox" class="form-check-input me-2" id="check4">
|
| <label for="check4">分支名称正确 (通常是 main 或 master)</label>
|
| </div>
|
| <div class="checklist-item">
|
| <input type="checkbox" class="form-check-input me-2" id="check5">
|
| <label for="check5">已通过测试页面验证</label>
|
| </div>
|
| </div>
|
|
|
| <div class="mt-4">
|
| <a href="github-test.php" class="btn btn-success me-2">🧪 测试配置</a>
|
| <a href="config.php" class="btn btn-secondary me-2">⚙️ 查看状态</a>
|
| <a href="editor.html" class="btn btn-primary">🎨 开始使用编辑器</a>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="card">
|
| <div class="card-header">
|
| <h3>🔧 常见问题和解决方案</h3>
|
| </div>
|
| <div class="card-body">
|
| <div class="accordion" id="troubleshootingAccordion">
|
|
|
| <div class="accordion-item">
|
| <h5 class="accordion-header">
|
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble1">
|
| 403 Forbidden - 权限不足
|
| </button>
|
| </h5>
|
| <div id="trouble1" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
| <div class="accordion-body">
|
| <strong>原因:</strong> Token 权限不足<br>
|
| <strong>解决:</strong>
|
| <ol>
|
| <li>确保勾选了 <code>repo</code> 权限</li>
|
| <li>重新生成 Token 并更新环境变量</li>
|
| <li>检查仓库是否为私有仓库（需要完整 repo 权限）</li>
|
| </ol>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="accordion-item">
|
| <h5 class="accordion-header">
|
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble2">
|
| 401 Unauthorized - 认证失败
|
| </button>
|
| </h5>
|
| <div id="trouble2" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
| <div class="accordion-body">
|
| <strong>原因:</strong> Token 无效或过期<br>
|
| <strong>解决:</strong>
|
| <ol>
|
| <li>检查 Token 是否正确复制（40个字符，以 ghp_ 开头）</li>
|
| <li>检查 Token 是否过期</li>
|
| <li>重新生成新的 Token</li>
|
| </ol>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="accordion-item">
|
| <h5 class="accordion-header">
|
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#trouble3">
|
| 404 Not Found - 仓库不存在
|
| </button>
|
| </h5>
|
| <div id="trouble3" class="accordion-collapse collapse" data-bs-parent="#troubleshootingAccordion">
|
| <div class="accordion-body">
|
| <strong>原因:</strong> 仓库不存在或 Token 无访问权限<br>
|
| <strong>解决:</strong>
|
| <ol>
|
| <li>检查 <code>GITHUB_OWNER</code> 是否是正确的用户名</li>
|
| <li>检查 <code>GITHUB_REPO</code> 是否是正确的仓库名</li>
|
| <li>确保仓库存在且 Token 有访问权限</li>
|
| <li>如果是组织仓库，确保 Token 有组织权限</li>
|
| </ol>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
| <script>
|
|
|
| document.addEventListener('DOMContentLoaded', function() {
|
| const checkboxes = document.querySelectorAll('#checklist input[type="checkbox"]');
|
|
|
| checkboxes.forEach(checkbox => {
|
| checkbox.addEventListener('change', function() {
|
| localStorage.setItem(this.id, this.checked);
|
| });
|
|
|
|
|
| const saved = localStorage.getItem(checkbox.id);
|
| if (saved === 'true') {
|
| checkbox.checked = true;
|
| }
|
| });
|
| });
|
| </script>
|
| </body>
|
| </html> |
