https://80000coding.oopy.io/865f4b2a-5198-49e8-a173-0f893a4fed45
들어갈 것들 정리
0. 타이틀 꾸미기
깃허브 프로필이나 README.md 파일을 꾸밀 때 타이틀을 gif 파일로 제작해 넣거나, 다른 레퍼지토리를 참고해 빠르고 간단하게 타이틀을 꾸밀 수 있습니다. 아래는 이를 설명하는 방법입니다.
1. GIF 파일로 타이틀 제작
타이틀을 직접 제작한 GIF 파일로 꾸미고 싶다면, 아래와 같이 HTML 코드를 사용하여 GIF 파일을 중앙에 배치할 수 있습니다:
<div align="center">
<img src="https://github.com/oka1313/oka1313/assets/101691440/92118a53-c5b6-40bc-b130-bf8c398d7b51" />
</div>위 코드를 README.md 파일에 추가하면, 중앙에 GIF 파일이 표시되어 프로필의 타이틀로 사용할 수 있습니다.
2. Capsule-Render 레퍼지토리 참고
빠르게 타이틀을 꾸미고 싶다면, capsule-render 레퍼지토리를 참고할 수 있습니다. 이 레퍼지토리를 사용하면 다양한 색상, 모양, 그리고 문구를 커스터마이징할 수 있습니다.
- 레퍼지토리 링크: capsule-render
이 레퍼지토리에 있는 가이드를 따라 Markdown이나 HTML 코드를 복사해 사용하면 됩니다. 예를 들어, 다음과 같은 코드를 사용할 수 있습니다:
위 코드를 README.md에 추가하면, 설정한 색상과 문구로 된 타이틀이 표시됩니다.
3. Readme-Typing-SVG 레퍼지토리 참고
또한, readme-typing-svg 레퍼지토리를 사용해 타이틀을 꾸밀 수 있습니다. 이 도구는 텍스트가 타이핑되는 애니메이션을 만들어줍니다.
- 레퍼지토리 링크: readme-typing-svg
다음 코드를 README.md에 복사해 붙여넣으면 됩니다:
이 코드를 사용하면 타이틀에 타이핑 애니메이션이 적용된 텍스트가 표시됩니다. ?lines= 뒤에 표시할 텍스트를 넣어주면 됩니다.
1. 뱃지 정리
Shields.io 뱃지를 깃허브 프로필이나 README.md 파일에 추가하는 방법을 정리해드리겠습니다.
1. 기본 코드 추가
README.md 파일에 아래 코드를 추가합니다:
<a href="버튼을 눌렀을 때 이동할 링크" target="_blank">
<img src="https://img.shields.io/badge/뱃지레이블-배경색?style=뱃지모양&logo=로고&logoColor=로고색상"/>
</a>2. 코드 수정
빨간색으로 표시된 부분을 아래와 같이 수정하세요:
- 버튼을 눌렀을 때 이동할 링크: 클릭 시 이동할 URL을 넣습니다.
- 뱃지레이블: 뱃지에 표시될 텍스트를 입력합니다.
- 배경색: 뱃지의 배경 색상을 Hex 코드(예:
FFFFFFfor white)로 지정합니다. - 뱃지모양: 원하는 뱃지 스타일을 선택합니다.
- 로고: 뱃지에 표시할 로고 이름을 입력합니다. 로고 목록은 Shields.io 로고 목록에서 확인할 수 있습니다.
- 로고색상: 로고 색상을 Hex 코드로 지정합니다.
3. 색상 설정
배경색과 로고 색상은 6자리 Hex 코드를 사용합니다. #은 제외하고 입력하세요. 예: 000000 (검정색), FFFFFF (흰색).
4. 뱃지 모양 선택
아래 스타일 중 하나를 선택하여 뱃지모양 부분에 입력합니다:
plasticflatflat-squarefor-the-badgesocial
5. 뱃지 레이블 설정
뱃지레이블 부분에 뱃지에 표시될 텍스트를 입력하세요. 예를 들어, "GitHub"이나 "Build Passing" 등의 텍스트를 넣을 수 있습니다.
6. 추가 기능
추가로 더 많은 설정과 기능은 Shields.io 웹사이트에서 확인할 수 있습니다. 다양한 뱃지를 생성하고 커스터마이즈 할 수 있습니다.
이렇게 설정한 후, 저장하면 깃허브 프로필이나 README.md에 뱃지가 표시됩니다!
2. 깃 스테이터스
GitHub 프로필에 자신의 활동 통계를 표시하는 방법을 안내드립니다. anuraghazra/github-readme-stats를 활용하여 README.md에 동적으로 생성된 GitHub 스탯을 표시할 수 있습니다.
1. README.md에 코드 추가
먼저, 아래 코드를 README.md 파일에 추가하세요:
2. 사용자ID 설정
코드에서 사용자ID 부분에 자신의 GitHub 아이디를 입력하세요. 예를 들어, GitHub 아이디가 anuraghazra라면 username=anuraghazra로 설정합니다.
3. 완료
README.md 파일을 저장하고 GitHub 프로필을 확인하면, 설정한 GitHub 스탯이 표시됩니다. 이제 자신의 활동 통계가 동적으로 생성되어 README.md에 나타납니다.
4. 테마와 아이콘 설정
스탯의 테마와 아이콘을 바꿔가며 꾸밀 수 있습니다.
- 테마 설정:
theme=옵션을 사용하여 다양한 테마를 적용할 수 있습니다. - 아이콘 설정:
show_icons=true로 아이콘을 활성화할 수 있습니다.
추가 설정
더 다양한 테마와 설정 옵션을 보려면, GitHub Readme Stats 레퍼지토리에서 확인할 수 있습니다.
3. 파인드 레포
GitHub 프로필에서 Pinned Repository를 활용해 커밋 시각 통계를 노출하는 방법을 아래와 같이 정리해드리겠습니다. 이 가이드를 따라하면 productive-box를 사용하여 깃허브 프로필에 유용한 통계 정보를 추가할 수 있습니다.
1. productive-box 레포지토리 Fork 하기
- techinpark/productive-box 레포지토리를 방문하여
Fork버튼을 눌러 자신의 GitHub 계정으로 Fork 합니다.
2. GitHub Gist 생성하기
- Gist 생성 페이지로 이동합니다.
- 새로운 Public Gist를 생성합니다. 제목과 내용은 아무거나 입력해도 됩니다.
Create public gist버튼을 클릭하여 Gist를 생성합니다.- 생성된 Gist 페이지의 URL을 복사해둡니다. 예시 URL:
https://gist.github.com/사용자아이디/123456789abcdef- 여기서
123456789abcdef부분이 Gist ID입니다. 이 부분을 따로 메모해둡니다.
- 여기서
3. GitHub 토큰 생성하기
- GitHub 토큰 생성 페이지로 이동합니다.
repo와gist두 가지 권한을 선택한 후, 토큰을 생성합니다.- 생성된 토큰을 반드시 복사해둡니다. 이 토큰은 이후에 필요하며, 한 번 생성하면 다시 확인할 수 없으니 안전한 곳에 저장합니다.
4. Fork한 레포지토리의 워크플로우 설정하기
-
GitHub에서 Fork한
productive-box레포지토리로 이동합니다. -
.github/workflows/Schedule.yml파일을 열어 수정합니다. -
환경변수를 설정합니다:
GH_TOKEN: 이전 단계에서 복사한 GitHub 토큰을 입력합니다.GIST_ID: Gist 생성 시 복사한 Gist ID를 입력합니다.secrets의 이름을 정확하게 지정합니다. 예를 들어:
env: GH_TOKEN: your_generated_token GIST_ID: your_gist_id -
수정한 파일을 커밋하고 저장합니다.
5. 프로필에서 Gist 고정하기
- 내 프로필로 이동하여 생성한 Gist를 Pinned Repositories에 고정합니다.
- 이 Gist는 1시간 주기로 갱신되므로, 바로 적용되지 않을 수 있습니다. 즉시 적용하려면 README.md 파일을 한 번 수정하여 커밋하면 됩니다.
이 과정을 따라하면, GitHub 프로필에 커밋 시각 통계가 표시되는 Pinned Repository를 설정할 수 있습니다. 프로필이 더욱 돋보이게 될 것입니다!
4. 방문자 수
GitHub 프로필에 방문자 수를 표시할 수 있는 방법을 안내드리겠습니다. https://hits.seeyoufarm.com/ 사이트를 활용해 방문자 수 뱃지를 만들고, 프로필에 추가할 수 있습니다.
1. 방문자 수 뱃지 생성하기
-
Hits Badge 생성 사이트로 이동합니다.
-
TARGET URL에 자신의 GitHub 프로필 URL을 입력합니다. 예:
https://github.com/사용자아이디 -
OPTION에서 다음과 같은 설정을 커스터마이즈할 수 있습니다:
- count_bg: 방문자 수의 배경 색상 (Hex 코드로 입력)
- title_bg: 타이틀의 배경 색상 (Hex 코드로 입력)
- icon: 아이콘 설정 (선택 사항)
- icon_color: 아이콘 색상 (Hex 코드로 입력)
- title: 타이틀 텍스트 (예: "GITHUB")
- edge_flat: 테두리 스타일 (true 또는 false)
-
설정이 완료되면 아래와 같은 Markdown 코드가 생성됩니다. 이 코드를 복사하세요.
2. 생성된 코드 예시
아래는 예시 코드입니다. 자신의 설정에 맞게 변경된 코드를 사용합니다.
[](https://hits.seeyoufarm.com)3. README.md에 추가하기
- GitHub 프로필의 README.md 파일을 열고, 원하는 위치에 위에서 생성한 코드를 붙여넣습니다.
- 저장 후 프로필 페이지를 확인하면 방문자 수 뱃지가 표시됩니다.
4. 색상 참고 사이트
뱃지의 색상 설정을 위해, 색상 팔레트 생성기를 참고할 수 있습니다. 이 사이트에서 원하는 색상의 Hex 코드를 생성한 후, 뱃지의 배경색이나 아이콘 색상으로 설정하면 됩니다.
이 방법을 통해, GitHub 프로필에 방문자 수 뱃지를 추가하여 방문자의 수를 시각적으로 확인할 수 있습니다.
