如何在Gatsby构建（gatsby build）时使用不同配置？——基于Jenkins同代码库多站点自动化构建场景

Hey there! Let's walk through how to set up multi-site builds with Gatsby and Prismic, then automate the whole thing with Jenkins. I've helped a few teams implement this exact workflow, so here's what works:

Start by splitting your site-specific settings into separate files so you can swap them easily:

• Create a config folder in your root directory, then add config files like gatsby-config.site1.js and gatsby-config.site2.js. Each should contain the full Gatsby config (site metadata, plugins, Prismic repo details) for that specific site.
• For CSS styles, keep site-specific styles in separate files too—like src/styles/site1.css and src/styles/site2.css. If you use a CSS-in-JS solution (like Styled Components), you can even define theme objects per site and swap them based on environment variables.

Gatsby reads environment variables natively, so we'll use them to tell the build which config to load:

Step 2.1: Update your package.json scripts #

Add build commands that pass a site identifier via an environment variable:

{
  "scripts": {
    "build:site1": "GATSBY_SITE=site1 gatsby build",
    "build:site2": "GATSBY_SITE=site2 gatsby build"
  }
}

Step 2.2: Modify the root gatsby-config.js #

Make the root config file dynamically import the site-specific config based on the environment variable:

// root gatsby-config.js
const siteConfig = require(`./config/gatsby-config.${process.env.GATSBY_SITE || 'default'}.js`);

module.exports = siteConfig;

Step 2.3: Load site-specific styles #

In your gatsby-browser.js file, import the right CSS file based on the same environment variable:

if (process.env.GATSBY_SITE === 'site1') {
  require('./src/styles/site1.css');
} else if (process.env.GATSBY_SITE === 'site2') {
  require('./src/styles/site2.css');
}

If each site uses a separate Prismic repository or custom types, just define those in the site-specific config files:

// config/gatsby-config.site1.js
module.exports = {
  siteMetadata: {
    title: "Site 1's Title",
  },
  plugins: [
    {
      resolve: 'gatsby-source-prismic',
      options: {
        repositoryName: 'your-site1-prismic-repo',
        // Add site1-specific Prismic options here
      },
    },
    // Add other plugins unique to Site 1
  ],
};

Now let's set up Jenkins to run these builds automatically:

Option 1: Batch build multiple sites #

Create a freestyle project or use a Jenkinsfile for a pipeline, then add a shell build step that runs each build command sequentially:

# Install dependencies first
npm install

# Build Site 1 and copy its output to a dedicated directory
npm run build:site1
cp -r public/ /path/to/deployment/site1
rm -rf public/ # Clear the public folder for the next build

# Build Site 2
npm run build:site2
cp -r public/ /path/to/deployment/site2

Option 2: Parameterized builds (for flexible, on-demand builds) #

Add a string parameter to your Jenkins project (name it SITE_NAME), then use this parameter in your build command:

npm install
GATSBY_SITE=${SITE_NAME} gatsby build
cp -r public/ /path/to/deployment/${SITE_NAME}

This lets you trigger a build for any specific site by entering its name when starting the job.

• Use env-cmd to manage site-specific environment variables: Install it with npm install env-cmd --save-dev, then create .env.production.site1 and .env.production.site2 files. Update your scripts to load these:

  "build:site1": "env-cmd -f .env.production.site1 gatsby build"
  

• For theme consistency, use CSS variables that swap based on the environment variable—this reduces duplicate code across CSS files.
• In Jenkins, use workspace cleanup to ensure no leftover files from previous builds affect new ones.

内容的提问来源于stack exchange，提问作者Jules-B