I want to hide my API secret keys but I wanna use these keys on GitHub page deployment at the same time. I just created that .yml file for GitHub Actions workflows. How can I access these secret keys from the .vue file?

jobs: # The type of runner that the job will run on runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2

      # Runs a single command using the runners shell
      - name: Run a one-line script
        run: echo ${{secrets.SERVICE_API}}
        env:
          SERVICE_API: ${{secrets.SERVICE_API}}
          API_KEY: ${{secrets.API_KEY}}

CodePudding user response：

There is no secure way to store secrets on GitHub Pages. That's because GitHub Pages serves only static websites, which are websites with only static HTML, CSS, and JavaScript that have no backend service.

In order to store secrets securely when building a web application, you must have a backend that can prevent them from being publicly accessed. However, since there is no backend, there's no secure way to store them, and if you provided them as part of your static site, anyone on the Internet could read them.

If you need to use secrets, then you'll need to host your site elsewhere. You could try a cloud instance somewhere, and there are other services like Heroku or Netlify which might meet your needs.