title: How can I change the CSS and script paths in my index.html after running NPM build with GitHub Actions?
body: <p>I have created a simple static website with React. I'm using the library  <code>react-bootstrap</code> that references certain script and css files with absolute paths inside the <code>index.html</code> when I run <code>npm build</code>.<br />
  This leads to issues when deploying the build on GitHub pages, because the root page is  <code>https://xyz.github.io/repo-name/</code> and not <code>https://xyz.github.io/</code>.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;utf-8&quot; /&gt;
          &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot; /&gt;
          &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
          &lt;meta name=&quot;description&quot; content=&quot;xyz&quot; /&gt;
  
          &lt;link rel=&quot;icon&quot; href=&quot;.//favicon-96x96.ico&quot; /&gt;
          &lt;link rel=&quot;apple-touch-icon&quot; href=&quot;.//apple-touch-icon-180x180.png&quot; /&gt;
          &lt;link rel=&quot;manifest&quot; href=&quot;.//manifest.json&quot; /&gt;
  
          &lt;title&gt;xyz&lt;/title&gt;
  
          &lt;script defer=&quot;defer&quot; src=&quot;/static/js/main.ce5d72e5.js&quot;&gt;&lt;/script&gt;
          &lt;link href=&quot;/static/css/main.e7720ab7.css&quot; rel=&quot;stylesheet&quot; /&gt;
  
      &lt;/head&gt;
  ...
  </code></pre>
  <p>I'm auto-deploying the webapp with GitHub Actions. When there is a push to the <code>main</code> branch, a workflow will trigger, the app gets built and then pushed to branch <code>prod</code>, which is then set up as GitHub Page.</p>
  <p>So far I've tried to add another GitHub Action that searches and replaces certain strings in my files such as <a href="https://github.com/marketplace/actions/find-and-replace" rel="nofollow noreferrer">https://github.com/marketplace/actions/find-and-replace</a> without success.</p>
  <p>What would be the best way to fix this?</p>
  <p>Edit: My YAML file</p>
  <pre><code># .github/workflows/publish.yml
  name: Deploy on GitHub
  
  on:
    push:
      branches:
        - main
  
  jobs:
    build:
      runs-on: ubuntu-latest
      name: Build and Push
      steps:
        - name: git-checkout
          uses: actions/checkout@v2
  
        - name: Install all dependencies
          run: npm install
  
        - name: Build
          run: npm run build
  
        - name: Find and Replace JS
          uses: jacobtomlinson/gha-find-replace@v2
          with:
            find: 'src=&quot;static/js'
            replace: 'src=&quot;./static/js'
            include: &quot;./build/index.html&quot;
            
        - name: Find and Replace CSS
          uses: jacobtomlinson/gha-find-replace@v2
          with:
            find: 'href=&quot;static/css'
            replace: 'href=&quot;./static/css'
            include: &quot;./build/index.html&quot;
      
        - name: Push
          uses: s0/git-publish-subdir-action@develop
          env:
            REPO: self
            BRANCH: prod # The branch name where you want to push the assets
            FOLDER: build # The directory where your assets are generated
            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub will automatically add this - you don't need to bother getting a token
            MESSAGE: &quot;Build: ({sha}) {msg}&quot; # The commit message
  </code></pre>