멋진 Github 프로필 README를 만드는 방법은 무엇입니까?

If you take a look of my GitHub profile, you’ll notice that it contains Github statistics, social network links and some more content, which makes my GitHub profile look more descriptive.

이 기사에서는 GitHub 프로필 README를 생성하고, 인상적인 콘텐츠를 추가하고, 크론 작업을 만들어 (x)시간마다 새로 고치는 방법을 알아봅니다.

Github 프로필 README란 무엇입니까?

사용자가 README라는 Markdown 파일을 사용하여 자신, 기술, 사회 생활에 대한 세부 정보를 작성하고 가시성을 높일 수 있는 GitHub입니다. 고정된 리포지토리 위의 GitHub 홈 페이지 상단에 표시됩니다. 다음은 프로필 README에서 방문자가 흥미롭거나 재미있거나 유용하다고 생각할 수 있는 정보의 몇 가지 예입니다.

귀하의 작업 및 관심사를 설명하는 "내 정보"섹션

당신이 자랑스러워하는 기여와 그러한 기여에 대한 맥락

참여하고 있는 커뮤니티에서 도움을 받기 위한 지침

Github 프로필 README 만들기

GitHub는 다음 사항이 모두 참인 경우 프로필 페이지에 프로필 README를 표시합니다.

GitHub 사용자 이름과 일치하는 이름으로 저장소를 만들었습니다.

저장소가 공용입니다.

저장소 루트에 README.md라는 파일이 포함되어 있습니다.

README.md 파일에 내용이 포함되어 있습니다.

Github 프로필에 멋진 콘텐츠 추가

먼저 VsCode과 같은 최신 텍스트 편집기로 저장소를 엽니다.

이제 해당 디렉터리에 대한 터미널을 열고 새 npm 프로젝트를 만듭니다.
npm init
Mustache 을 사용하여 템플릿을 만들고 태그를 나중에 제공할 데이터로 쉽게 바꿀 수 있습니다.
npm i mustache
콧수염 템플릿 만들기
디렉터리에 새 콧수염 파일을 만들 것입니다.
touch index.mustache
작은 콘텐츠를 추가해 보겠습니다.

My name is {{full_name}} and you can see my works <a href="https://bpmartdesign.tk">here.</a>

{{___}} 태그가 보이십니까? 그것이 Mustache가 무언가를 거기에 놓을 수 있음을 인식하는 방법입니다.

콧수염 파일 템플릿에서 README 생성

먼저 데이터를 구문 분석하는 코드를 작성할 index.js 파일을 만듭니다.

const Mustache = require('mustache');
const fs = require('fs');
const MUSTACHE_MAIN_DIR = './index.mustache';

/**
  * DATA is the object that contains all
  * the data to be provided to Mustache
  * Notice the "full_name" property.
*/
let DATA = {
  full_name: 'BIYA Paul'
};

/**
  * A - We open 'index.mustache'
  * B - We ask Mustache to render our file with the data
  * C - We create a README.md file with the generated output
  */
function generateReadMe() {
  fs.readFile(MUSTACHE_MAIN_DIR, (err, data) =>  {
    if (err) throw err;
    const output = Mustache.render(data.toString(), DATA);
    fs.writeFileSync('README.md', output);
  });
}
generateReadMe();

이를 통해 이제 터미널에서 node index.js를 실행할 수 있으며 동일한 디렉토리에 새로운 README.md 파일을 생성해야 합니다.

// Generated content in README.md
My name is BIYA Paul and and you can see my works here.

모든 것을 커밋하고 푸시합니다. 이제 프로필 페이지에 표시된 README.md가 업데이트된 것을 확인할 수 있습니다.

주기적으로 README를 생성하려면 CRON 작업을 추가하세요.

마지막으로 멋진README.md 파일을 만들어 가시성을 높였습니다.
그러나 프로필을 최신 상태로 만들기 위해 매일 노력하고 추진할 시간이 없을 것입니다.

따라서 Github Actions은 우리 프로세스를 자동화하는 많은 기능으로 우리를 위해 수행되었습니다.

작업을 사용하면 작업을 자동화하는 워크플로를 만들 수 있습니다. 작업은 코드의 나머지 부분과 동일한 위치의 특수 디렉터리( ./.github/worflows )에 있습니다.
$ mkdir .github && cd .github && mkdir workflows
이 ./workflows 폴더에서 액션을 저장할 ./main.yaml 파일을 만듭니다.
$ cd ./workflows && touch main.yaml

Be sure your branch name is master instead of main if not, please rename your principal branch to master

괜찮다면 이제 main.yaml 파일을 이 콘텐츠로 채울 수 있습니다.

name: README build

on:
  push:
    branches:
      - master
  schedule:
    - cron: '0 */6 * * *'

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout current repository to Master branch
        uses: actions/checkout@v1
      - name: Setup NodeJs 13.x
        uses: actions/setup-node@v1
        with:
          node-version: '13.x'
      - name: Cache dependencies and build outputs to improve workflow execution time.
        uses: actions/cache@v1
        with:
          path: node_modules
          key: ${{ runner.os }}-js-${{ hashFiles('package-lock.json') }}
      - name: Install dependencies
        run: npm install
      - name: Generate README file
        run: node index.js
      - name: Commit and Push new README.md to the repository
        uses: mikeal/publish-to-github-action@master
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

축하합니다

해냈습니다. 이제 전문적인 Github README 프로필이 생겼고 6시간마다 업데이트됩니다.

Remember, you can change the period by updating the line
- cron: '0 */6 * * *' by replacing 6 to x desired hours

다음은 무엇입니까 ?

보시다시피 Github 프로필에 더 많은 동적 콘텐츠를 추가할 수 있습니다.
배지, github 통계 등.

배지
제가 추천하는 가장 중요한 배지 제공업체는 Shield.io 입니다. 여기에서 자신의 디자인에 따라 제공된 배지를 사용자 지정, 구축 및 재설계할 수 있습니다.

나는 이렇게 내에서 그들을 사용하고 있습니다

<h3>Things I code with ...</h3>
<p>
  <img  height="20" alt="React" src="https://img.shields.io/badge/-React-45b8d8?style=flat-square&logo=react&logoColor=white" />
  <img  height="20" alt="Vue Js" src="https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vue.js&logoColor=4FC08D" />
  [...]
  <img  height="20" alt="Laravel" src="https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white" />
</p>

링크 및 기타
링크, 이미지, 표 및 기타 항목을 추가하려는 경우 필요한 HTML 콘텐츠(CSS 스타일 없음)에 따라 템플릿으로 index.mustache를 업데이트할 수 있습니다.

Github 통계
리포지토리, 조직 또는 프로필과 관련된 Github 통계를 표시할 수도 있습니다. 아래는 내 github 페이지에서 사용하는 github 통계 카드의 예입니다.

<img alt="bpsmartdesign's GitHub stats" src="https://github-readme-stats.vercel.app/api?username=bpsmartdesign&count_private=true&show_icons=true&theme=onedark" />

자세한 내용을 확인할 수 있습니다here.

참조

Github doc
Thomas Guilbert Article

읽어 주셔서 감사합니다! 🙌

전 세계가 볼 수 있도록 아래 댓글에 놀라운 GitHub 프로필을 공유하세요! :)
My Github | My Portfolio