Hugo SSG技术问题：无法通过iframe加载HTML文件（报404错误）

核心问题：Hugo静态资源规则不匹配 #

Hugo对静态资源和内容页有严格区分，你的组件HTML文件没被正确识别为静态资源，导致构建时未被输出到站点目录，引发404。

1. 修正静态资源存放目录 #

• Hugo默认仅将static/目录下的文件直接复制到最终输出的public/目录。如果你的组件HTML放在content/或其他非static目录，Hugo会忽略这些文件。
• 解决：将所有需要iframe加载的组件HTML文件移至static/components/（或static/下任意子目录），iframe的src直接使用绝对路径，比如src="/components/button.html"。

2. 停止混淆内容页与静态资源 #

• 把HTML转成md文件、添加内容页头部信息的操作完全错误：Hugo会将md内容页渲染成带站点模板的HTML，不是你需要的纯组件独立HTML，自然无法作为iframe源访问。
• 解决：保持组件HTML的纯格式，直接放在static/目录下即可，无需做任何内容页改造。

3. 主题资源路径适配 #

• 各主题的CSS/JS文件同样要放在static/下的对应目录（比如static/themes/dark/），组件HTML里的资源引入必须用绝对路径，比如：

  <link rel="stylesheet" href="/themes/dark/style.css">
  <script src="/themes/dark/script.js"></script>
  

4. 验证构建过程 #

• 执行hugo --verbose命令构建站点，查看控制台输出，确认组件HTML文件是否被复制到public/目录下。如果未出现，说明目录位置不符合Hugo的静态资源规则。
• 检查config.toml中的staticDir配置，如果自定义了静态资源目录，要确保组件HTML放在该目录内。

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