如何为Hugo/SSG站点设置部分页面密码保护？含托管与CMS需求

我来一步步帮你搞定这三个问题，都是实践中常用的方案，完全满足你的免费/低成本要求：

一、特定页面的密码保护（静态站的解决方案） #

静态站点本身没有后端处理密码验证，分两种场景按需选择：

1. 低敏感内容：前端JS快速验证 #

适合内部文档这类不需要高强度安全的页面。你可以在Hugo里给目标页面加自定义参数，再用模板逻辑加载验证代码：

• 在需要保护的页面front matter中添加：

  ---
  title: "我的私密页面"
  password_protected: true
  password: "your-secure-password"
  ---
  

• 在页面模板（比如layouts/_default/single.html）中插入这段代码：

  {{ if .Params.password_protected }}
  <script>
    const requiredPassword = "{{ .Params.password }}";
    const inputPassword = prompt("请输入访问密码：");
    if (inputPassword !== requiredPassword) {
      document.body.innerHTML = `<div style="text-align:center; margin-top:50px;"><h1>密码错误，无法访问此页面</h1></div>`;
    }
  </script>
  {{ end }}
  

  注意：这种方式密码会出现在页面源码中，请勿用于保护高度敏感内容。

2. 高敏感内容：借助托管平台的官方保护功能 #

如果需要真正的访问控制，推荐用Netlify或Vercel的免费版功能，它们都支持给特定路径设置密码：

• 以Netlify为例，部署完成后，在站点设置的「Access Control」→「Password Protection」里，添加你要保护的路径（比如/private/*或单个页面路径/secret-page/），设置密码即可。访问这些路径时会弹出官方验证界面，密码不会暴露在前端。

二、免费/低成本私有仓库托管 #

你提到的Bitbucket完全够用：

• Bitbucket免费版支持无限制私有仓库，最多5个协作成员，完全满足个人或小团队需求。
• 备选方案GitLab免费版也提供私有仓库，协作成员上限更高（100人），适合团队规模稍大的场景。
• 迁移步骤简单：本地仓库修改远程地址为Bitbucket私有仓库地址，push代码即可。

三、CMS界面编辑（替代Forestry.io） #

原Forestry已改名为Stackbit，它支持连接Bitbucket/GitLab私有仓库，可视化编辑Hugo内容：

1. 注册Stackbit账号，选择「Import Existing Site」
2. 选择连接Bitbucket/GitLab，授权访问你的私有仓库
3. 配置Hugo站点信息：指定配置文件（config.toml）、内容目录（content/）等
4. 完成配置后，就能在Stackbit界面上编辑页面、修改内容，保存后会自动提交到私有仓库，触发部署（若已配置Netlify/Vercel自动部署）

完整流程建议 #

1. 将现有Github Pages的Hugo代码迁移到Bitbucket私有仓库
2. 用Stackbit连接该私有仓库，开启CMS可视化编辑功能
3. 在Netlify/Vercel上连接Bitbucket私有仓库，配置Hugo构建命令（hugo）和输出目录（public）完成部署
4. 在Netlify/Vercel中给特定路径设置密码保护，实现仅目标页面需要验证

这样三个需求就全部满足了，所有用到的工具都是免费版就能搞定的。

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