GitHub Readme Stats의 모든 기능을 최대한 활용하기
Takashi Yamamoto
Infrastructure Engineer · Leapcell

GitHub Readme Stats는 매우 인기 있는 GitHub 프로젝트입니다.
스타 수, 총 커밋 수, 주요 프로그래밍 언어 사용과 같은 특정 GitHub 계정의 다양한 통계를 동적으로 가져와 아름다운 동적 카드로 변환할 수 있습니다.
이러한 카드를 자신의 GitHub readme에 추가하여 더 멋지게 만들 수 있습니다.
GitHub Readme Stats를 사용하는 것은 매우 쉽습니다. 가장 쉬운 방법은 프로젝트의 공개 링크를 readme에 직접 삽입하고 공식 문서에 설명된 대로 매개변수를 추가하는 것입니다. 공식 DEMO에서 특정 카드 유형을 볼 수 있습니다.
그 원리는 다음과 같습니다.
readme에 액세스하면 이 링크가 요청을 받습니다. GitHub API를 동적으로 호출하여 특정 데이터를 가져오고 데이터를 기반으로 실시간으로 SVG 이미지를 생성합니다.
하지만 이 사용법은 GitHub Readme Stats의 모든 잠재력을 발휘하지 못합니다.
- GitHub Readme Stats는 비공개 저장소의 통계 데이터를 읽을 수 없습니다.
- 공개 링크는 요청을 처리할 때 데이터를 얻기 위해 동일한 GitHub API 토큰을 사용하므로 요청 볼륨이 클 때 속도 제한이 발생하여 카드를 표시할 수 없게 됩니다.
- 시간이 지남에 따라 프로젝트가 변경되면 원래 공개 링크가 유효하지 않게 되어 카드가 로드되지 않을 수 있습니다.
따라서 가장 좋은 방법은 자체 GitHub Readme Stats를 배포하고 자체 API 토큰을 사용하여 위의 문제를 피하는 것입니다.
자체 GitHub Readme Stats를 배포하는 방법은 무엇인가요? Leapcell을 사용할 수 있습니다.
Leapcell은 Node.js, Python, Go와 같은 여러 언어 및 프레임워크의 배포를 지원할 수 있는 강력한 기능을 갖춘 웹 앱 호스팅 플랫폼입니다. 또한 높은 무료 할당량을 제공하며 개인 사용자는 결제 라인에 거의 닿지 않습니다. 따라서 자체 GitHub Readme Stats를 배포하는 데 매우 적합합니다.
단계:
1 - GitHub Readme Stats 프로젝트를 포크하세요. Leapcell은 나중에 저장소에서 코드를 가져옵니다.
2 - Leapcell 웹사이트를 방문하여 계정을 등록하세요. 등록 후 페이지에서 "서비스 생성"을 클릭합니다.
3 - 서비스 생성 페이지에서 코드 소스를 선택해야 합니다. 방금 포크한 GitHub Readme Stats를 선택하세요.
4 - Leapcell이 Node.js 프로젝트임을 자동으로 인식하고 일부 기본 배포 매개변수를 미리 채우는 것을 볼 수 있습니다.
프로젝트의 실제 상황에 따라 수정하고 다음으로 변경해야 합니다.
필드 | 값 |
---|---|
시작 명령 | npm install express |
빌드 명령 | node express.js |
포트 | 9000 |
5 - 프로젝트가 비공개 GitHub 저장소에 액세스하도록 하려면 GitHub에서 액세스 토큰을 만들어야 하며 토큰에 저장소 및 사용자 권한을 부여하는 것을 잊지 마세요.
6 - 환경 변수 PAT_1
에 액세스 토큰을 채웁니다.
7 - 하단의 제출을 클릭하여 배포합니다. 배포가 곧 완료되면 배포 홈페이지로 돌아갑니다. 여기서 Leapcell이 도메인을 제공하는 것을 볼 수 있습니다. 이것이 귀하의 전용 GitHub Readme Stats 주소입니다.
이제 통계 카드를 생성하는 데 이 새 주소를 사용할 수 있습니다. 자체 배포 버전의 API 경로는 공개 링크와 약간 다르다는 점에 유의해야 합니다. 주소에서 /api/
를 제거해야 합니다.
예시:
공개 링크: https://github-readme-stats.vercel.app/api?username=[your name]
자체 호스팅: https://xxxxx.leapcell.dev/?username=[your name]
테스트 링크를 사용하세요. https://xxxxx.leapcell.dev/?username=anuraghazra&repo=github-readme-stats를 방문하면 카드가 성공적으로 표시되는 것을 볼 수 있습니다.
축하합니다. 이제 모든 잠재력이 잠금 해제된 GitHub Readme Stats를 갖게 되었습니다!