能否实现需密码验证后跳转至网站的页面？GitHub Pages可用吗？

核心实现思路 #

完全可以通过纯HTML+JavaScript实现这类密码验证跳转页面，而且该方案完全适配GitHub Pages的静态托管环境——因为GitHub Pages仅支持静态内容，无法运行后端服务，前端验证是当前场景下唯一可行的方案。

注意：这种前端验证的密码会明文存储在JS代码中，懂技术的用户可通过查看源码获取密码，仅适用于非敏感场景的简单访问限制（比如内部共享页面），不适合高安全性需求的场景。

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码验证</title>
    <style>
        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 100px;
            font-family: Arial, sans-serif;
        }
        #password-input {
            padding: 10px 15px;
            font-size: 16px;
            margin: 15px 0;
            width: 280px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        #submit-btn {
            padding: 10px 25px;
            font-size: 16px;
            cursor: pointer;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
        }
        #submit-btn:hover {
            background-color: #0056b3;
        }
        .error {
            color: #dc3545;
            margin-top: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>请输入访问密码</h2>
        <input type="password" id="password-input" placeholder="请输入密码">
        <button id="submit-btn">验证并访问</button>
        <p class="error" id="error-tip">密码错误，请重试</p>
    </div>

    <script>
        // 自定义配置：替换成你的密码和目标地址
        const CORRECT_PASSWORD = "your-custom-password";
        const TARGET_URL = "https://your-target-page.github.io";

        const passwordInput = document.getElementById("password-input");
        const submitBtn = document.getElementById("submit-btn");
        const errorTip = document.getElementById("error-tip");

        // 绑定点击验证事件
        submitBtn.addEventListener("click", validatePassword);
        // 支持回车提交
        passwordInput.addEventListener("keydown", e => {
            if (e.key === "Enter") validatePassword();
        });

        function validatePassword() {
            const inputVal = passwordInput.value.trim();
            if (inputVal === CORRECT_PASSWORD) {
                window.location.href = TARGET_URL;
            } else {
                errorTip.style.display = "block";
                passwordInput.value = "";
                // 3秒后自动隐藏错误提示
                setTimeout(() => errorTip.style.display = "none", 3000);
            }
        }
    </script>
</body>
</html>

操作步骤 #

1. 将上述代码保存为index.html文件
2. 修改代码中的CORRECT_PASSWORD和TARGET_URL为你实际的密码和目标页面地址
3. 将该文件上传到GitHub Pages的托管仓库中，设置为默认首页即可

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