如何构建多个配置不同、共享内容的Hugo站点？

方案一：基于Hugo多环境配置实现 #

你已经尝试的Makefile多环境思路是可行的，核心是通过不同环境配置区分站点变体，同时解决资源重复问题：

1. 配置区分站点变体 #

在config/下的每个环境目录（如noscr/、pretty/）的hugo.toml中添加自定义参数，用于模板条件渲染：

# config/noscr/hugo.toml
[params]
siteVariant = "noscr" # 无脚本版标识
theme = "noscr-theme" # 或挂载自定义模板片段

# config/pretty/hugo.toml
[params]
siteVariant = "pretty" # 样式丰富版标识
theme = "pretty-theme"

模板中通过参数判断加载不同资源：

{{ if eq .Site.Params.siteVariant "noscr" }}
  <link rel="stylesheet" href="/css/noscr.css">
{{ else }}
  <link rel="stylesheet" href="/css/pretty.css">
  <script src="/js/pretty.js"></script>
{{ end }}

2. 解决资源重复问题 #

针对大量WebGL资源重复复制的问题，有两种高效处理方式：

• 符号链接复用资源：
  先构建其中一个站点（如pretty）生成完整资源，再对其他站点构建时跳过资源生成，用符号链接指向已生成的资源目录：
  修改Makefile：

  all:
    # 先构建样式丰富版，生成所有资源
    hugo --environment pretty
    # 构建无脚本版，跳过资源生成，用符号链接复用
    hugo --environment noscr --disableKinds=static
    ln -s ../pretty/static public/noscr/static
  

  --disableKinds=static会阻止Hugo复制当前环境的static资源，之后用符号链接指向已生成的pretty/static，避免重复复制。

• 统一资源公共路径：
  在所有环境配置中设置资源的公共发布路径，比如将资源统一输出到public/common/static，然后模板中用绝对路径引用：

  # 所有环境的hugo.toml添加
  [module]
    [[module.mounts]]
    source = "static"
    target = "static"
    publishDir = "../common/static"
  

  模板中引用资源时使用/common/static/xxx，这样所有站点都指向同一个资源目录，无需重复复制。

方案二：Shell脚本参数化构建 #

如果觉得多环境配置太繁琐，用Shell脚本参数化构建更灵活，核心逻辑是通过命令行参数传递站点变量，复用资源：

编写build-sites.sh脚本：

#!/bin/bash

# 定义站点变体列表
variants=("noscr" "pretty")

# 先构建基础资源（只执行一次）
hugo --publishDir public/base

# 循环构建每个变体站点
for variant in "${variants[@]}"; do
  # 传递站点变量，构建站点内容（跳过资源）
  hugo --params "siteVariant=$variant" --publishDir public/$variant --disableKinds=static
  # 符号链接复用基础资源
  ln -s ../base/static public/$variant/static
done

执行脚本前赋予权限：chmod +x build-sites.sh，然后运行./build-sites.sh即可。

这种方式无需创建多个配置目录，直接通过--params传递变量给模板，适合变体较少的场景。

方案对比 #

• 多环境配置：更贴合Hugo的配置生态，适合需要自定义主题、站点配置差异较大的多变体场景，可维护性强。
• Shell脚本构建：灵活度高，无需复杂配置，适合快速迭代或变体逻辑简单的场景。

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