如何通过GitLab CI Webhook添加提交号实现样式表缓存失效？

Absolutely! You can easily achieve cache busting for your stylesheets using GitLab CI by injecting a unique deployment identifier (like a Git commit hash) as a URL parameter. Let’s break this down into simple, actionable steps since you mentioned you’re still getting up to speed with GitLab deployments.

Core Idea Recap #

We’ll replace the placeholder <!– gitlab deployment nr –> in your stylesheet link with a unique value tied to your deployment. GitLab CI provides built-in variables that make this straightforward—no extra tools needed.

Step 1: Choose Your Unique Identifier #

GitLab CI has pre-defined variables you can use for this:

• $CI_COMMIT_SHORT_SHA: A short, 7-character version of your Git commit hash (e.g., a1b2c3d). This is ideal because it directly links the cache busting parameter to the exact code being deployed.
• $CI_PIPELINE_ID: A unique numeric ID for the current pipeline. Use this if you prefer a sequential deployment number instead of a commit hash.

We’ll use $CI_COMMIT_SHORT_SHA in our example since it’s tightly coupled to your code changes.

Step 2: Update Your .gitlab-ci.yml Deployment Stage #

Your existing production_deploy stage just needs a script step to replace the placeholder in your HTML files before deploying. Here’s how to modify it:

production_deploy:
  stage: production_deploy
  only:
    - LIVE
  environment:
    name: production
    url: https://domain.com
  script:
    # Replace the placeholder in your HTML file with the commit hash
    - sed -i "s/<!– gitlab deployment nr –>/$CI_COMMIT_SHORT_SHA/g" path/to/your/index.html
    # Run your existing deployment command (adjust this to match your workflow)
    - scp -r ./dist $REMOTE_USER@$REMOTE_HOST:/var/www/domain.com

Quick Notes on the sed Command: #

• Replace path/to/your/index.html with the actual path to the HTML file containing your stylesheet link.
• If multiple HTML files include the stylesheet, use a wildcard to update all at once: sed -i "s/.../..." ./src/*.html
• If your remote host uses a different shell (e.g., Windows), the sed syntax might need a small tweak—but this works for most Linux-based servers.

Alternative: Inject Variables During Build (For Static/Frontend Projects) #

If you’re using a static site generator (Jekyll, Hugo) or frontend build tool (Webpack, Vite), you can inject the GitLab variable during the build stage instead of deployment:

• Vue.js: Add VUE_APP_COMMIT_SHA=$CI_COMMIT_SHORT_SHA to your build step, then use process.env.VUE_APP_COMMIT_SHA in your template to render the stylesheet URL.
• Jekyll: Pass the variable as a build argument: jekyll build -D COMMIT_SHA=$CI_COMMIT_SHORT_SHA, then use {{ site.COMMIT_SHA }} in your Liquid templates.

Test It Out #

Trigger a pipeline on your LIVE branch. Once deployment finishes, visit your site and view the page source—you should see your stylesheet link updated to something like:

<link href="/bla/styles.css?v=a1b2c3d">

This unique parameter forces browsers to fetch the latest stylesheet version on every deployment, effectively busting the cache.

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