[깃허브] 깃허브(Github) 리드미 3D 잔디 꾸미기

 

국비 과정이 벌써 이번주면 끝나게 되면서 포트폴리오 작성 전에 깃허브 리드미를 갑자게 꾸미게 되는데,,, 그러면서 해보고 싶은 것을 발견하여 누군가가 더 쉽게 할 수 있게끔 포스팅을 하려고 한다!

물론 나도 다른 분의 게시글을 참고하면서 했음 ..

 

먼저 내가 참고한 사이트는 요기다.

https://h-owo-ld.tistory.com/264

[Github] 깃헙 리드미 잔디를 3D로 보여주는 방법

 

위 게시글과 거의 동일한 데 왜 올리느냐하면,

그 사이에 버전이 달라졌달까?

아무튼 시작~!!~!

 

1. 레포지토리 생성

1. 레포지토리 생성

 

우측 상단 초록색 [New] 버튼을 눌러서 좌측 상단 자신의 닉네임을 넣어서 만들어주면 된다.

나는 사진을 보면 알 수 있듯이 원래 있었기 때문에 해당 과정은 생략했다!

참고로 닉네임은 깃허브 주소에 있는 맨 마지막에 있는 것이다.

예를 들면, https://github.com/MaengJuyoung 여기에서 MaengJuyoung 이 부분이며, 위 사진에서도 확인할 수 있다.

 

 

2. 토큰 생성

토큰이 있고, 알고 있다면 넘어가도 되지만 없다면 발급받아야 한다.

나 또한 없기 때문에 발급을 해주었다.

 

생성하는 방법은 다음과 같다.

프로필 화면(우측 상단 자신의 프로필 이미지 클릭) → Settings → Developer settings(왼쪽 하단) → Personal access tokens(왼쪽) → Tokens(classic) → Geneate new tokens → 우측 Generate new Token(classic) 클릭

 

2. 토큰 생성

이름 설정 및 기간 없음으로 선택한 뒤, 오른쪽 사진과 같이 권한을 체크해준 후 하단 초록색 버튼 [Generate token]을 클릭한다.

 

3. 레포지토리 들어가기

메인화면에서 본인의 닉네임으로 된 레포지토리를 클릭하여 들어가줍니다!

 

4. 토큰 등록

4. 토큰 등록

레포지토리에 들어오면 있는 Settings를 클릭한다. 그리고 다음 값들을 실행한다.

Settings → Secrets and variables(왼쪽 하단) → Actions(왼쪽 하단) → 초록색 [New repository secret] 버튼 클릭한 후 Name은 TOKEN을 입력하고 내용에는 복사한 키를 넣어준다.

 

5. 3D 액션 추가

5. 3D 액션 추가

이제 내 닉네임으로 된 레포지토리에 들어간 후, actions을 눌러줍니다.

이미 만들어져 있으신 분은 왼쪽 상단에 [New workflow]를 클릭해주면

5. 3D 액션 추가

 

이 페이지로 넘어올 것이고, 없다면 이 페이지가 로드되므로 이제 [set up a workflow yourself]를 클릭하여 하단 코드를 복사, 붙여넣기 해주면 됩니다.

name: GitHub-Profile-3D-Contrib

on:
  schedule:
    - cron: "0 18 * * *"
  workflow_dispatch:
    inputs:
      commit_message:
        description: 'Commit message'
        required: true
        default: 'generated'
        type: string

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v3
        name: Checkout code
      - uses: yoshi389111/github-profile-3d-contrib@0.7.0
        name: Generate 3D contributions
        env:
          GITHUB_TOKEN: ${{ secrets.TOKEN }}
          USERNAME: ${{ github.repository_owner }}
      - name: Set up Git
        run: |
          git config user.name "MaengJuyoung"
          git config user.email "wndud6302@naver.com"
      - name: Pull remote changes with rebase
        run: |
          git pull origin main --rebase || true
      - name: Commit & Push
        run: |
          git add -A .
          git commit -m "${{ github.event.inputs.commit_message }}" || echo "No changes to commit"
          git push origin main

 

여기서 보면 기존 게시글과 다른 점은,

5. 3D 액션 추가

 

버전이 다르고, 파란색 부분은 개인에 맞게 변경해야하는 부분이다.

즉! 빨간색 부분은 그대로 쓰되, 파란색 부분만 붙여넣기 한 후 변경해주면 된다.

이렇게 내용을 다 작성한 후 초록색 버튼 [Commit changes...]를 클릭해주면 내용이 저장된다.

참고로 하단에 깃 커밋 메시지는 매번 다르게 커밋 메시지를 설정하기 위한 코드이다.

5. 3D 액션 추가

 

이렇게 하고 레파지토리의 Ations 페이지로 이동해주고, [Run workflow] 버튼을 눌러주면 된다.

---

이때 내가 발생한 오류는 이 과정에서 push&commit 과정에서 실패했다는 것이었는데,

 

 

오류 발생

첫번째 오류는 버전 문제였다.

 

1. 오류: Process completed with exit code 128

• exit code 128은 일반적으로 Git 관련 오류를 나타냅니다. 보통 인증 문제, 권한 문제, 또는 Git 설정이 잘못되었을 때 발생합니다.
• 이 오류는 git add, git commit, 또는 git push와 같은 Git 명령어가 실패했을 때 발생할 수 있습니다.

2. 경고: Node.js 버전 관련

• 사용 중인 actions/checkout@v2 및 yoshi389111/github-profile-3d-contrib@0.6.0 액션이 Node.js 12를 사용하고 있으며, 이 버전은 더 이상 지원되지 않고 Node.js 16으로 강제 변경될 예정이라는 경고입니다.
• 이 경고는 액션이 최신 Node.js 버전으로 업데이트되지 않아 향후 호환성 문제를 일으킬 수 있습니다.

이렇게 맨 위에 내가 참고한 블로그의 코드를 붙여넣고 실행했더니 이런 오류가 떠서 버전을 변경해주었다. 5번 항목에 내가 작성해 둔 코드가 버전을 수정한 코드이다.

---

그리고 두번째 오류는 푸시 권한이 없다는 점이었다.

 

1. TOKEN의 권한 확인

GitHub Actions에서 사용하는 GITHUB_TOKEN은 기본적으로 리포지토리에 대한 권한을 가지고 있지만, 기본 설정으로는 푸시 권한이 제한될 수 있습니다. GITHUB_TOKEN이 푸시 권한을 가지도록 설정하는 방법은 다음과 같습니다:

• 레포지토리 설정에서 GITHUB_TOKEN 권한을 조정하기:

1. GitHub 리포지토리의 "Settings" 탭으로 이동합니다.
2. "Actions" 섹션을 클릭합니다.
3. "General" 탭에서 "Workflow permissions" 설정을 확인합니다.
4. "Read and write permissions"를 선택하여 TOKEN이 푸시 권한을 가지도록 설정합니다.

 

이것까지 해주고 잘 될 것을 희망하며 [Run workflow] 버튼을 다시 눌렀는데! 계속 안되는 것이다.!!

세번째 오류는 변경 사항이 동기화 되지 않았다는 점이다.

Chat GPT에 물어보니 이렇게 답변이 왔다.

 

---

현재 오류 메시지를 보면 git push가 실패한 이유는 원격 저장소에 있는 변경 사항이 로컬 저장소와 동기화되지 않았기 때문입니다. 이 문제를 해결하기 위해 원격 저장소의 변경 사항을 먼저 가져오고, 이를 로컬 저장소와 병합한 후 푸시를 시도해야 합니다.

오류 원인

 

오류 메시지:

vbnet

Updates were rejected because the remote contains work that you do not have locally. This is usually caused by another repository pushing to the same ref. If you want to integrate the remote changes, use 'git pull' before pushing again.

이 메시지는 원격 저장소의 main 브랜치가 로컬 저장소의 main 브랜치와 일치하지 않아 발생하는 문제입니다. 원격 저장소에 로컬에서 가져오지 않은 새로운 커밋이 존재하기 때문에 푸시가 거부된 것입니다.

 

해결 방법

다음 단계를 통해 문제를 해결할 수 있습니다:

1. 리모트 브랜치에서 변경 사항을 가져오고 병합하기
2. 원격 저장소의 변경 사항을 로컬 저장소로 가져온 후, 변경 사항을 병합합니다.
3. 수정된 워크플로우
4. .github/workflows/main.yml 파일을 다음과 같이 수정합니다. git pull 명령어를 사용하여 원격 변경 사항을 병합하고, 이후 git push를 시도합니다.

---

그리고 내가 이 문제를 해결한 방법은 .. .github/workflows/main.yml 파일의 기존 내용을 복사해놓고, 이 파일을 삭제하고 5번부터 다시 한다는 생각으로 다시 생성하여 이 내용을 붙여넣고 [Run workflow] 버튼을 눌렀더니 잘 실행이 됐다!

이게 실행이 되면 profile-3d-contrib 폴더가 생성되면서, 여러 테마의 3D 잔디가 생성된 것이 보인다. 이것을 이제 리드미에 보여지게끔 코드를 추가하면 된다.

 

6. README 추가

이제 리드미 수정에 들어간 후, 원하는 곳에 아래 코드를 붙여넣어주면 된다.

<!-- 3D 잔디 이미지 -->
![](./profile-3d-contrib/profile-gitblock.svg)

 

종류는 이렇게 있다.

3D 잔디 이미지 종류

 

# 종류
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

 

위에도 말했듯이, 생성된 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.

 

---

이상 내 초라한 잔디를 올리며 포스팅을 마무리하겠습니당 :)

나의 3D 잔디 !

 

 

---

https://blog.naver.com/ju_ble/223531650513

네이버 블로그에 2024. 7. 31. 13:27 작성했던 글을 티스토리에 보기 편하게 옮김 !

[깃허브] 깃허브(Github) 리드미 3D 잔디 꾸미기