[Github] Github README.md 꾸미기

 

1. 최신 velog 글 불러오기

1) `Readme.md`에 아래 코드 추가 (`velog_ID`에는 자신의 velog 명 입력)

# velog
<div align="center">
    <img src="https://velog-readme-stats.vercel.app/api?name={velog_ID}" width=40% />
</div>
<div align="center">
    👉🏻 <a href="https://velog.io/@{velog_ID}/posts">velog 바로가기</a>
</div>

 

 

 

 

2. 최신 Tistory 글 불러오기

1) `Readme.md`에 아래 코드 추가

   Tistory에서 불러온 게시글을 보여줄 영역 설정

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

 

2) 내 이름 Repository에서 /.github/workflow에 `blog-post-workflow.ym`l 파일 생성

name: Latest blog post workflow
on:
  schedule: # Run workflow automatically
    - cron: '0 * * * *' # Runs every hour, on the hour
  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://xxxx.tistory.com/rss"
          accept_header: "text/xml"

 

맨 아래 `accept_header`가 없으면 에러가 발생한다.

 

 

3) Actions에서 `Workflow` 실행

 

4) 결과

제목에 `->`와 같은 기호가 있으면 제대로 변환이 되지 않는 것 같다.

 

 

참고)

https://bezzang2.tistory.com/160

[Tip] Github README에 내가 작성한 블로그 최신 글 가져오기

 

https://github.com/marketplace/actions/blog-post-workflow

Blog Post Workflow - GitHub Marketplace

 

 

 

 

3. 백준 티어 불러오기

1) `Readme.md`에 아래 코드 추가 (`BOJ_ID`에는 자신의 백준 계정 정보 입력)

# Baekjoon Online Judge
<div align="center">
    <img src="http://mazassumnida.wtf/api/v2/generate_badge?boj={BOJ_ID}" width=40% />
</div>

 

👉 [solved.ac] 에 접속해 백준 계정으로 로그인하면 티어를 확인할 수 있다!

 

 

 

 

4. 잔디 3D 

1) Github TOKEN 발급
Settings > Developer Settings > Personal access tokens > Tokens (classic) 
> Generate new token > Generate new token (classic)

 

 

위 순으로 클릭해서 새롭게 토큰을 발급해주어야 한다. 

단, 다른 커밋 내역들도 확인하는 등 권한이 있어야 하므로 토큰을 발급할 때, 
여러 권한들을 포함해서 발급을 받아야 한다. 

만료 기한은 추후에 만료 기한이 되었을 때 변경해주어야 하므로 

귀찮지만 보안적으로 더 확실하므로 만료 기한을 있는 걸로 하는 게 좋다. 

 

 

2) Secret에 TOKEN, USERNAME 등록

 

아래 `YML`에서 사용될 토큰와 `Github` 계정 ID와 `USERNAME`을

`README.md`  레포지토리의 `Secret`에 등록해준다. 

 

 

다음으로 레포지토리의 Settings > Actions > General 에 들어간다.

 

 

`Workflow`의 권한을 읽기, 쓰기 권한으로 변경한다.
이 `permission`을 변경하지 않으면 action이 실행되다가 `fail`이 발생한다!

 

그리고 `Actions`에 들어가서 새로운 `workflow`를 만든다. 

 

 

새롭게 만들면 `main.yml`이 생기는데 아래 코드를 추가해주면 된다.

 

 

name: GitHub-Profile-3D-Contrib

on:
  schedule: # 03:00 JST == 18:00 UTC
    - cron: "0 18 * * *"
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest
    name: generate-github-profile-3d-contrib
    steps:
      - uses: actions/checkout@v2
      - uses: yoshi389111/github-profile-3d-contrib@0.6.0
        env:
          GITHUB_TOKEN: ${{ secrets.TOKEN }}
          USERNAME: ${{ secrets.USERNAME }}
      - name: Commit & Push
        run: |
          git config user.name git계정_ID
          git config user.email git계정_EMAIL
          git add -A .
          git commit -m "generated"
          git push

 

 

그리고 `workflow`를 실행해서 정상적으로 `Action`이 모두 실행되고 나면
위 화면처럼 체크 표시가 나온다. 

마지막으로 `README.md`에 아래 코드를 추가해주면

이제 내 Github의 `README.md`에 잔디모양의 3D 화면이 나온다. 

 

<div align="left">
    <img src="./profile-3d-contrib/profile-night-view.svg" width="100%" />
</div>

 

 

끝!

 

 

참고)

yoshi389111

GitHub - yoshi389111/github-profile-3d-contrib: This GitHub Action creates a GitHub contribution calendar on a 3D profile image.