How do I use my personal access token in github pages (non-react app)

[lavnishhh]

Select Topic Area

General

Body

I'm using a github PAT that is scoped to just "Access public repos" for my profile website, which is to be hosted on github pages. However, github automatically removes generated tokens if it finds a token in a repo. With a bit of resources I came across how one can use environment variables to access keys but all of them are only for apps created in react.

I've currently created a new env for my repo, and added the secret to it, lets say API_KEY. When I call it on my github pages website, it says process is not defined (process.env.API_KEY).

How do I configure a key for a plain JS website?

[vickkie]

If you have .env file like this You can try to use

GITHUB_TOKEN=your token
GITHUB_USERNAME=your name

require("dotenv").config();

const githubToken = process.env.GITHUB_TOKEN;
const githubUsername = process.env.GITHUB_USERNAME;

then use it anywhere like- this is example

const headers = {
Authorization: Basic ${Buffer.from(${githubUsername}:${githubToken}).toString("base64")},
};

Or you can try to use it as environment secret

• navigate to the repo settings
• under secrets and variables make a new secret and add the token there giving it a name like : YOUR_SECRET
  and you can use it like e.g

    github_token: ${{ secrets.YOUR_SECRET }}
  

• this can be used also using github workflows

[lavnishhh]

@vickkie this happens once it's deployed. Have I made a mistake adding it to the env secrets maybe? Just to mention: This is a plain HTML CSS JS website. No NPM involved

[vickkie]

Oh okay,
If you don't use npm you can use the secret key by using Github workflows

Create a GitHub Actions Workflow

• Create a new file named deploy.yml in your repository at .github/workflows/deploy.yml.
• inside the deploy.yml have this code

name: Deploy to GitHub Pages

on:
 push:
    branches:
      - main

jobs:
 deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Replace placeholder with secret
        run: |
          sed -i 's/API_KEY_PLACEHOLDER/${{ secrets.API_GITHUB }}/g' path/to/your/script.js

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_branch: gh-pages
          publish_dir: ./

• Then in your js, use it this way

const apiKey = 'API_KEY_PLACEHOLDER';

• create another branch named gh-pages
• change your github deploy from using main branch to use the gh-pages like this

This is an image-starts here

image end here

• the same way you created the Github personal token secret before , create another with permissions to deploy workflows, by ticking repo and workfows under its scopes
• Then use it as secrets as you did with the other one, YOU SHOULD HAVE 2 OF THEM HERE,
• name it GITHUB_TOKEN

This is an image-starts here

image end here

• now when you push to main branch it will auto deploy for you...

@lavnishhh incase of any issue notify...😂 process might seem long but its not

[lavnishhh]

Cool, what's the difference between API_GITHUB and GITHUB_TOKEN here? Should I define another environment secret?

[vickkie]

They have different access levels and permissions,
GITHUB_TOKEN has access to your account and permissions to control your account thus always keep it safe,

API_GITHUB used to access maybe third parties and other connections with API'S , might not be that much a problem if exposed but keep it safe too

[lavnishhh]

Tried using this, it's not working :(

Had to change GITHUB_TOKEN to GH_TOKEN because GITHUB_ is not allowed. Also changed API_GITHUB to GH_API_KEY.