깃허브 프로필 꾸미기

1. GitHub 프로필 README

• username과 동일한 레포지토리 생성 시 프로필에 노출되는 마크다운 파일

자세한 내용 및 만드는 방법은 아래 글 참고

• GitHub Docs - managing-your-profile-readme (opens in a new tab)

2. 만들기

• Andrew6rant 프로필 (opens in a new tab)를 참고
  • 코드박스 스타일로 만들려고 fork 안 하고 새로 만들었는데, 코드 박스로 하니까 스크롤바가 생기면서 내용이 잘렸다.
  • 원래 만든 사람이 svg로 한 이유가 있었다.

구조

profile/
├── update_readme.js      # 메인 실행 스크립트
├── src/
│   ├── api.js            # GitHub GraphQL API 호출
│   ├── readme.js         # README.md 생성
│   └── config.js         # 환경변수 설정
├── cache/
│   └── loc_cache.json    # LOC 캐시 파일
└── .github/
    └── workflows/
        └── build.yml     # GitHub Actions 워크플로우

3. 핵심 기능

1. ASCII 아트와 텍스트 조합

src/readme.js에서 ASCII 아트와 프로필 정보를 나란히 배치

2. GitHub GraphQL API로 통계 수집

• 저장소 수 (본인 소유)
• 총 커밋 수 (private 포함)
• 이슈 수
• PR 수
• 오픈소스 기여 수
• LOC (Lines of Code)

3. 캐싱

LOC 계산은 모든 저장소의 커밋 순회가 필요해서 API 호출이 많다. -> 24시간 캐싱 적용

4. GitHub Actions로 매일 자동 업데이트

• 유의사항: cron은 UTC 기준으로 실행된다.

4. 고민

• main 브랜치 보호 하면서 깃만 올릴 수 있게 하는 방법 없을까 고민중이다.
  • 브랜치 규칙을 설정하고 bot만 제외하게 하려했는데 아직 찾지 못했다.
• 봇 커밋도 잔디에 영향이 있을지
  • 결론: 봇 커밋은 잔디에 안 심어지는 것 같다.
  • 봇으로 안 하고 내계정으로 하면 심어지는지 테스트 해봐야 할 것 같다.

5. 다양한 프로필 꾸미기 방법

• 뱃지 추가하기
• GitHub Stats 카드
• 사용 언어 통계
• 최근 활동/커밋 표시
• 다양한 컨텐츠
  • 펫 키우기
  • 지렁이
  • 입체 잔디

6. 추후 개선 방향

• 기본 텍스트로 수정하거나 이미지화 해서 스크롤 안 나오게 하는 방식으로 변경.

• svg 다크모드 (opens in a new tab)

• icon 활용 (opens in a new tab)