깃허브 프로필(리드미) 꾸미기 - 뱃지, 블로그 최신 목록, stats ...

깃허브를 꾸며봤다

신경을 잘 안써서 프로필 사진도 기본에 소개 한줄만 있었는데 맘먹고 꾸며봤다

그동안 이쁘게 하는게 자신없어서 건들질 못했는데

내가 했던 것을 한 눈에 잘 볼 수 있게 배치해보자는 생각으로 시작했다

---

소개 배너

스택을 위한 뱃지

블로그의 최신 목록

github readme stats (most used languages, streak stats)

typing 애니메이션

백준 카드

소개 배너 

보통 제일 상단에 배치되는 소개에 사용할 수 있다. 

<img src="https://capsule-render.vercel.app/api?type=speech&height=100&color=18f&text=This%20is%20...&section=header&reversal=false&textBg=false">

https://capsule-render.vercel.app

Capsule-Render

 

뱃지

뱃지 스타일과 색상, 로고를 골라서 지정해주면 된다

뱃지 스타일을 여기서 정하고 https://shields.io/badges/static-badge

Static Badge | Shields.io

아이콘과 색상을 역시 골라 logo, logoColor 혹은 뱃지글자-색상부분에 넣어주면 된다 https://simpleicons.org

https://simpleicons.org

 

나는 이런 스타일(for-the-badge)로 정해서 logoColor를 화이트로 통일하고 뱃지 색상을 상징컬러로 지정했다. 

<img src="https://img.shields.io/badge/Spring%20Boot-6DB33F?style=for-the-badge&logo=Spring&logoColor=white">

 

블로그 최신 목록 자동 업데이트 - 406 error와 css삽질

블로그나 사이트의 최신 목록을 가져올 수 있다. 난 이 블로그의 최신 글목록을 자동 업데이트하도록 했다. 

이 깃허브 액션을 설정하면 된다. 여기 how to use 잘 설명되어있어서 그대로 따라하면 된다. 

https://github.com/gautamkrishnar/blog-post-workflow

GitHub - gautamkrishnar/blog-post-workflow: Show your latest blog posts from any sources or StackOverflow activity or Youtube Vi

1. 리드미에 주석으로 블로그 목록을 불러올 자리를 만들어 둔다

<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->

2. 깃허브 액션에서 새 workflow를 만들어 blog-post-workflow.yml 파일을 작성한다. 

매일 아침에 실행하도록 했고 feed_list 에 사이트 주소를 넣어주면 된다. 여러곳일 경우 콤마로 나열하면 된다. 사이트마다 조금씩 다른데 Popular Sources 부분에서 찾아보면 나온다. 

 

# .github/workflows/blog-post-workflow.yml
name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '0 22 * * *' # (UTC + 9시간 = KST) 매일 아침 실행
  workflow_dispatch: # Run workflow manually (without waiting for the cron to be called), through the GitHub Actions Workflow page directly
permissions:
  contents: write # To write the generated contents to the readme

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Pull in dev.to posts
        uses: gautamkrishnar/blog-post-workflow@v1
        with:
          feed_list: "https://[블로그 이름].tistory.com/rss"
          # Tistory 서버의 406 에러 방지를 위해 User-Agent를 브라우저처럼 설정
          user_agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36
          # Accept 헤더를 좀 더 일반적인 값으로 설정
          accept_header: "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8"
          template: "- <a href='$url' style='text-decoration:none; color:inherit;'>$title</a><br>"

 

406 error not acceptable

그런데 중간에 자꾸 워크플로우가 406 error code로 실패를 해서 위처럼 user_agent, accept_header 이 코드들을 추가해줬다. 

406이 클라이언트가 서버가 지원하는 형식과 다른 요청을 보낼 경우 받는 코드라고 한다. 서버: 나 이런얘들은 응답 안함. 이런건가

ai에게 물어보니 "티스토리 서버에서 GitHub Actions의 자동화된 요청을 "비정상적인 접근"으로 판단하고 차단했기 때문에 발생, 일반적인 웹 브라우저에서 접속하는 것처럼 보이도록 몇 가지 옵션을 추가해라" 라는 답변을 받았다. 

 수정한 코드로 다시 실행해 보니 정상적으로 동작했다. 

 

리드미 css, js

최신글 목록을 이쁘게 카드모양으로 만들어 보여주고 싶어서 css를 마구마구 추가한 템플릿 코드를 추가했는데 전혀 되지 않았다.

수없이 수정하고 실행하고를 반복했는데 되지않았다... 

애초에 될 수 없던 거였다. 

깃허브의 리드미는 보안상의 이유로 간단한 인라인 css를 제외하고 다른건 지원하지 않는다고 한다. 

글자, 여백 관련된 인라인 css만 가능하다

아쉽지만 알았으니 다음엔 기억해두고 삽질안해야지^^..

 

Github Stats, Most Used Languages

깃허브 상태와 많이 사용한 언어를 그래프 카드로 보여준다. 

https://github.com/anuraghazra/github-readme-stats

GitHub - anuraghazra/github-readme-stats: :zap: Dynamically generated stats for your github readmes

https://github-readme-stats.vercel.app/api/top-langs/?username=anuraghazra&layout=compact&bg_color=180,fff7e5,00000000&title_color=000000&text_color=000000"/>

 

깃허브 연속 stats

만약 최근 연속 커밋, 최장 연속 커밋 정보를 보여주고싶다면 이것을 사용하면 된다. 

https://streak-stats.demolab.com/demo/

 

typing 애니메이션

https://readme-typing-svg.demolab.com/demo/

Readme Typing SVG - Demo Site

 

백준 카드

https://github.com/mazassumnida/mazassumnida

GitHub - mazassumnida/mazassumnida: Github 프로필에서 boj 프로필을 이쁘게 보여주는 프로젝트


<a href="https://solved.ac/unkown">
<img src="http://mazassumnida.wtf/api/generate_badge?boj=unkown" alt="Solved.ac 프로필"/>
</a>