基于Hugo Docuapi生成多HTML文件，实现Cloudfront地区差异化加载

一、用Hugo生成两个版本的单页HTML #

Docuapi主题默认把所有Markdown合并成单页HTML，你可以通过Hugo的构建参数区分两个版本：

• 先复制主题的主布局文件（一般在themes/docuapi/layouts/_default/single.html）到本地layouts/_default/single.html，然后在布局里添加条件判断：

  {{ if eq .Site.Params.showCookieBanner true }}
    <!-- 插入你的Cookie同意横幅脚本 -->
    <script src="your-consent-manager.js"></script>
  {{ end }}
  

• 执行两次构建命令，分别输出带横幅和不带横幅的版本：

  # 生成带Cookie横幅的版本，输出到dist/banner文件夹
  hugo --params showCookieBanner=true --destination dist/banner
  # 生成不带横幅的版本，输出到dist/no-banner文件夹
  hugo --params showCookieBanner=false --destination dist/no-banner
  

  两个版本的主HTML文件名保持一致（比如都是index.html），分别存放在不同目录中。

二、Cloudfront配置地区路由 #

既然你能配置CDN访问不同文件，直接用Cloudfront的路由规则或Lambda@Edge就能实现需求：

方法1：缓存行为+地理路由 #

• 将两个版本的文件上传到S3（或Cloudfront源站），路径分别为banner/index.html和no-banner/index.html
• 在Cloudfront控制台创建两个缓存行为：
  • 第一个：针对需要展示横幅的地区（比如欧盟国家），路径模式设为/*，源路径指向banner/
  • 第二个：针对其他地区，路径模式/*，源路径指向no-banner/
    Cloudfront会根据请求来源地区自动匹配对应的缓存行为，返回对应版本的HTML。

方法2：Lambda@Edge动态路由（更灵活） #

如果需要更精细的地区控制，编写Lambda@Edge函数在请求阶段判断地区，动态修改请求路径：

exports.handler = (event, context, callback) => {
  const request = event.Records[0].cf.request;
  const countryCode = request.headers['cloudfront-viewer-country'][0].value;
  // 定义需要展示横幅的地区代码列表
  const targetCountries = ['DE', 'FR', 'ES', 'IT'];
  
  if (targetCountries.includes(countryCode)) {
    request.uri = '/banner/index.html';
  } else {
    request.uri = '/no-banner/index.html';
  }
  callback(null, request);
};

将这个函数关联到Cloudfront的请求阶段，Cloudfront会在处理每个请求时执行函数，返回对应版本的文件。

注意事项 #

• 两次构建必须使用同一套Markdown源文件，避免内容不一致
• Cloudfront的地区判断依赖内置IP库，若需要更精准划分，可在Lambda函数中调用第三方IP地理服务（注意Lambda的执行时间限制）
• 测试时可以通过CloudFront-Viewer-Country请求头模拟不同地区的请求

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