🌱 Github 3D 잔디 꾸미기

💡 다음 사진처럼 github 프로필에 3D 잔디를 만들어보자!

 

---

 

다음 포스팅을 참고했다. GIF까지 만들어두신 정성에 아주 쉽게 따라 할 수 있었다.
단, github action을 run 하는 부분에서 오류가 났는데, 그 부분에 대한 수정 사항을 추가로 작성한다.

 

 

3D잔디는 yoshi389111의 github-profile-3d-contrib 프로젝트로 깃헙에 공유되고 있다.

https://github.com/yoshi389111/github-profile-3d-contrib#step-4-add-image-to-readmemd

GitHub - yoshi389111/github-profile-3d-contrib: This GitHub Action creates a GitHub contribution calendar on a 3D profile image.

 

Github Action을 통해 공개 된 레포지토리를 분석하고 커밋과 언어 퍼센트를 3D로 보여주는 방식이다.

해당 정보를 SVG로 변환해 반환하면, 깃헙 프로필 README에 띄우는 방식이다.

 

다음 이어질 적용 방법은 위의 프로젝트 README에 작성되어 있다.

---

1. 레포지토리 생성

본인의 깃허브 닉네임과 정확히 일치한 레포지토리를 생성한다.

public으로 생성하고 README를 추가해 두자.

 

레포지토리를 만들고 들어가면, 해당 저장소를 프로필에 보이게 하는 특별한 저장소로 등록할 것인지 나온다.

등록하면 README가 프로필 최상단에 보이게 된다. 우리는 여기에 3D 잔디를 보이거나 꾸미면 된다.

---

2. 토큰 준비

저장소가 아닌 프로필의 Settings > Developer settings > Personal access tokens > Tokens (classic) > Generate new tokens > Generate new Token

기존 클래식 버전의 토큰으로 repo권한과 workflow 권한 등을 부여한다. 기간은 다시 갱신하기 번거로우니 기한 없음을 선택했다. (보안적으로는 안 좋다고 경고가 뜬다.)

 

GIthub Action에 사용할 수 있도록 토큰의 값을 복사해 두자. Action의 workflow안에서 README를 수정해야 하므로 토큰이 필요한 것이다.

---

3. 토큰 등록

아까 만들었던 깃헙 이름 레포지토리에 들어가서 Setting > Security -> Secrets and variables > Action에 들어간다.

레포지토리 시크릿을 새로 등록하는데, 아까 복사해 두었던 토큰 값을 넣으면 된다.

토큰 이름은 'README'로 지었는데, 그냥 'TOKEN'으로 지어도 괜찮을 것이다.

(GITHUB로 시작만 안 하면 되는 것 같다. 오류가 나서 이거 저거 해보다가 이름이 이렇게 되었다.)

---

4. Github Action 등록

깃헙 닉네임 레포지토리의 Actions에 들어간다. 사진에는 수많은 시행착오의 기록이 보이는데, 처음 들어가면 비어있다.

새로운 Action을 등록하기 위해 New workflow -> set up a workflow yourself를 클릭한다.

 

name: GitHub-Profile-3D-Contrib

on:
  schedule: # 03:00 JST == 18:00 UTC
    - cron: "0 18 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v3
      - uses: yoshi389111/github-profile-3d-contrib@0.7.1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          USERNAME: ${{ github.repository_owner }}
      - name: Commit & Push
        run: |
          git config user.name github-actions
          git config user.email github-actions@github.com
          git add -A .
          git commit -m "generated"
          git push

3D잔디 프로젝트 README에 나온 위 스크립트를 Action에 등록해야 하는데, 수정할 부분이 있다.

• actions/checkout@v3는 Github Action에서 제공하는 프로젝트 검증 도구인데, 현재는 버전 4가 최신이다.
• GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 부분에서 GITHUB_TOKEN은 오류가 나는 것 같다.
  아까 만든 토큰 이름을 쓰자 (ex. GITHUB_TOKEN: ${{ secrets.README }})

 

이렇게 스크립트를 고쳐서 run 하면 완성인데, 나는 오류가 났었다.

 

remote: Permission to Jade-Good/Jade_Good.git denied to github-actions[bot].
fatal: unable to access 'https://github.com/Jade-Good/Jade_Good/': The requested URL returned error: 403
Error: Process completed with exit code 128.

라는 에러 메시지가 뜨는데, 해당 레포지토리를 액세스 할 권한이 없다는 내용으로 보인다. 분명 토큰을 잘 설정했는데 뭐가 문제일까 싶어 찾아보니 베이스 URL을 설정하고 TOKEN을 직접 push에 넣어주라고 하는데, 사실 안 넣어도 괜찮을 것 같다.

 

아무튼 최종 스크립트는 다음과 같이 작성했다.

name: GitHub-Profile-3D-Contrib

on:
  schedule: # 03:00 JST == 18:00 UTC
    - cron: "0 18 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v4
      - uses: yoshi389111/github-profile-3d-contrib@0.7.1
        env:
          GITHUB_TOKEN: ${{ secrets.README }}
          USERNAME: ${{ github.repository_owner }}
      - name: Commit & Push
        run: |
          git config user.name Jade-Good
          git config user.email kangsm423@gmail.com
          git remote set-url origin https://github.com/Jade-Good/Jade_Good.git
          git add -A .
          git commit -m "generated"
          git push https://$GITHUB_TOKEN@github.com/Jade-Good/Jade_Good.git

여기서 git remote set-url을 지정해 주고, psuh에서 토큰을 직접 넣어줬는데, 안 해줘도 될 것 같다.

---

5. 권한 설정

위에 오류해결을 위해 이거 저거 시도해 보았는데, 토큰은 잘 만들어졌는데 권한 오류가 뜨는 게 레포지토리 자체에서 막혀있는 것 같다고 생각했다.

 

레포지토리의 Setting > Actions > General에 들어가면 권한 설정이 있다.

여기서 권한을 위 사진처럼 변경해 주었더니 문제가 해결되었다. (만세! 🙌)

github action 스크립트를 만들 때 self로 만들어서 그런지 권한이 잠겨있던 것 같다... 다른 프로젝트들을 보니 자동으로 열려있는 부분들도 있었고, Fork pull reauest 부분만 다르기도 했다. 잠겨있으면 열어주자.

---

6. 마무리

프로필 레포지토리 README에 Action으로 만들어진 3D잔디 SVG를 넣기만 하면 완성이다!

profile-3d-contirb이라는 디렉터리에 svg가 만들어지므로 README에서 가져다 사용하면 끝이다.

![](./profile-3d-contrib/profile-night-rainbow.svg)

 

이렇게 적어주면 완성이다. 나중에 다른 내용으로 README를 더 꾸며볼 생각이다.

참고로 난 나이트 레인보우 버전이 이쁜 것 같아서 사용했는데, 배경이 블랙이면 예쁘지만 화이트면 또 다르다.

 

나쁘지 않은가..?

 

아무튼 테마에 맞춰서 다른 버전을 사용해 보도록 하자.

 

• profile-3d-contrib/profile-green-animate.svg
• profile-3d-contrib/profile-green.svg
• profile-3d-contrib/profile-season-animate.svg
• profile-3d-contrib/profile-season.svg
• profile-3d-contrib/profile-south-season-animate.svg
• profile-3d-contrib/profile-south-season.svg
• profile-3d-contrib/profile-night-view.svg
• profile-3d-contrib/profile-night-green.svg
• profile-3d-contrib/profile-night-rainbow.svg
• profile-3d-contrib/profile-gitblock.svg

 

 

 

+

Github Action에 스케줄러가 없어서 등록해야 하는 줄 알았는데, 스크립트의 상단에 등록되어 있었다.

schedule: # 03:00 JST == 18:00 UTC

이라고 되어있는데, 우리나라 기준 새벽 3시에 자동 실행된다.