如何无需登录让特定人员访问GitHub HTML站点？

由于GitHub Pages是静态站点，无法直接使用后端验证，结合你们学校使用统一Chromebook的情况，提供以下几个实用方案：

方案1：书签脚本授权（最简单） #

站点默认显示空白，让好友通过一个自定义书签触发授权，之后页面自动显示内容。

站点代码： #

<!DOCTYPE html>
<html>
<head>
  <title>本校专属站点</title>
  <style>
    .content { display: none; }
  </style>
</head>
<body>
  <div class="content">
    <!-- 这里放你的站点内容 -->
    欢迎访问本校专属站点！
  </div>

  <script>
    // 检测本地存储的授权标识
    if (localStorage.getItem('school_access') === 'your_unique_code') {
      document.querySelector('.content').style.display = 'block';
    }
  </script>
</body>
</html>

给好友的书签脚本： #

让好友创建一个新书签，将书签的URL替换为以下代码（把your_unique_code改成你自己设的字符串）：

javascript:(function(){localStorage.setItem('school_access','your_unique_code');window.location.reload();})();

使用方式：好友访问你的站点前，点击这个书签，页面就会显示内容；下次访问时无需再点击，因为标识存在本地存储里。

方案2：Chromebook用户代理特征检测（自动验证） #

统一管理的Chromebook通常有独特的用户代理字符串，通过JS检测这个特征来自动显示内容。

步骤： #

1. 让好友在他们的Chromebook上打开浏览器控制台（按F12），输入navigator.userAgent，复制返回的字符串，找到其中独有的特征（比如学校自定义的后缀、设备标识）。
2. 把特征字符串替换到下面的代码中：

站点代码： #

<!DOCTYPE html>
<html>
<head>
  <title>本校专属站点</title>
  <style>
    .content { display: none; }
  </style>
</head>
<body>
  <div class="content">
    <!-- 你的站点内容 -->
    欢迎访问本校专属站点！
  </div>

  <script>
    // 替换成你们学校Chromebook独有的用户代理特征
    const CHROMEBOOK_FEATURE = 'School-Managed-Chromebook';
    if (navigator.userAgent.includes(CHROMEBOOK_FEATURE)) {
      document.querySelector('.content').style.display = 'block';
    }
  </script>
</body>
</html>

优点：好友访问时无需手动操作，自动验证；缺点：懂技术的人可以修改用户代理绕过，但对于校内场景足够用。

方案3：简单密钥验证（直观易操作） #

做一个极简的输入框，让好友输入你指定的密钥，验证通过后自动保存授权，下次访问无需再输入。

站点代码： #

<!DOCTYPE html>
<html>
<head>
  <title>本校专属站点</title>
  <style>
    .content, .auth-box { display: none; }
    .auth-box { margin: 20px; }
  </style>
</head>
<body>
  <div class="auth-box">
    <input type="text" id="keyInput" placeholder="输入访问密钥">
    <button onclick="verifyKey()">确认</button>
  </div>

  <div class="content">
    <!-- 你的站点内容 -->
    欢迎访问本校专属站点！
  </div>

  <script>
    const VALID_KEY = 'school2024'; // 改成你自己的密钥

    function verifyKey() {
      const input = document.getElementById('keyInput').value.trim();
      if (input === VALID_KEY) {
        localStorage.setItem('authorized', 'yes');
        showContent();
      }
    }

    function showContent() {
      document.querySelector('.content').style.display = 'block';
      document.querySelector('.auth-box').style.display = 'none';
    }

    // 页面加载时检查是否已授权
    if (localStorage.getItem('authorized') === 'yes') {
      showContent();
    } else {
      document.querySelector('.auth-box').style.display = 'block';
    }
  </script>
</body>
</html>

使用方式：告诉好友密钥，他们输入一次后，浏览器会记住授权状态，后续访问直接显示内容。

注意：以上方案都是前端验证，无法做到绝对安全，但针对校内好友的场景完全够用，只要不把授权信息外传即可。

内容的提问来源于stack exchange，提问作者Suggestions