Killer GitHub 개요 1부 만들기
GitHub은 2020년 7월까지 개발자가 개요 파일급 저장소를 만들고 자술한 파일을 사용하여 페이지에 개성을 추가할 수 있도록 했다.
나는 이미 이 일을 몇 달 동안 알았지만, 최근에야 비로소 개입했다.그리고 음...내가 좀 심했나봐.
Check out my GitHub profile here .
나는 많은 개발자들이 그들의 개인 자료에 쿨한 작은 부품과 휘장을 주입했지만, 그들의 GitHub 개인 자료가 투자 그룹과 매우 비슷하다는 것을 깨닫지 못했다. 그것은 당신을 남다른 점을 돋보이게 해야 한다고 믿는다.
인터넷에는 많은 글과 강좌가 있습니다. (본문에 링크가 있습니다.) 파일에 기본 정보, 이미지, 휘장, 통계 정보를 추가하는 방법을 보여 줍니다.하지만 나는 더 개인화된 것을 원한다.나는 다음과 같은 몇 가지 일을 완성할 수 있는 독특한 개인 자료를 원한다.
이 두 부분으로 구성된 시리즈에서 나는 내가 어떻게 나의 개인 자료를 만들었는지 한 걸음 한 걸음 소개할 것이다. 그러면 너는 자신의
README.md 파일을 독창적으로 만들 수 있을 것이다.한계를 이해하다
만약 당신이 일반적인 가격 인하 서류에 익숙하지 않다면, 우리가 해야 할 일에 대해 높은 차원의 이해를 가지는 것이 매우 중요하다.결국 제한을 이해하지 못하면 해결 방안을 제공할 수 없다.
그림, 제목, 배지 등 기본적인 내용과 정보를 포함하고 싶은 파일을 알고 있습니다. 클릭할 때 사용자에게 방향을 바꿀 수 있고, 심지어GitHub 통계 데이터의 도형과 작은 위젯도 표시할 수 있습니다.강좌가 인터넷에 분산되어 있어서 이런 일들을 실현하는 것이 상대적으로 쉽다.
하지만 나도 내 자술이 동태적이었으면 좋겠다는 것을 안다.나는 그것이 나의 최근 블로그 게시물을 자동으로 가져오고 내가 만든 Office API의 인용을 나타낼 수 있기를 바란다.이것이 바로 일이 까다로워진 곳이다.가격 인하 서류가 스스로 API 요청을 보낼 수 없다면, 나는 어떻게 동적 주입 내용을 합니까?
GitHub 작업이러한 내장된 저장소 파이프라인을 통해 개발자가 작업과 워크플로우를 자동화할 수 있습니다. 이것이 바로 제가 블로그 게시물을 가져오고 API의 무작위 참조를 요청하는 내용입니다.이런 작업 흐름은 파일이나 함수를 터치해서 정보를 얻고, 내용을 나의 자술 파일에 주입할 수 있다.나는cron 임무를 분배하여 시간마다 업무 흐름을 운행하기 때문에 나의 개인 자료는 항상 최신 기사이고 방문객이 나의 개인 자료를 방문할 때마다 새로운 견적을 받는다.
우리는 다음 글에서 이 실현 중의 일부 함정에 대해 토론할 것이지만, 나는 당신이 우리가 이 문제를 어떻게 해결하는지에 대해 높은 차원의 개술을 할 수 있기를 바랍니다.
파일 라이브러리 만들기
GitHub로 이동하여 GitHub 사용자 이름과 이름이 같은 새 저장소를 만듭니다.내 사용자 이름은
README.md이기 때문에 braydoncoyer라는 저장소를 만들었습니다.작업이 올바르면 다음 그림과 같이 기밀 메시지가 표시됩니다.전 세계가 볼 수 있도록 저장소에 대한 접근 권한을private로 설정합니다. 하지만 원한다면 마음대로 공개할 수 있습니다.
나는 또한
braydoncoyer와 README.md 파일로 저장소를 초기화했다.NOTE: The screenshot below is giving me an error because I've already created a profile-level repository. You shouldn't see this error. Also, if you didn't know, GitHub recently shipped dark mode.
라이브러리를 만든 후 복제하여 가장 좋아하는 편집기에서 엽니다.
읽어보기 템플릿 만들기
비록 나는
.gitignore 파일로 저장소를 초기화했지만, 나는 곧 하나의 단독 파일에서 나의 내용을 편집하고 그것을 템플릿으로 사용해야 한다는 것을 발견했다. 정적 내용의 프레임워크로 최종 README.md 파일을 구축하는 데 사용될 것이다.여기에는 몇 가지 이유가 있지만, 여기에는 두 가지 가장 중요한 이유가 있다.README.md하면 동적 주입이 신기한 역할을 발휘한 후에 많은 합병 충돌이 발생할 수 있다.README.md 라는 새 파일을 만들었습니다.이것은 내가 수동으로 편집할 파일이다.배너 이미지
나는 방문자들에게 아름다운 플래카드 이미지를 보여주고 싶다. 내 작품집을 클릭하면 방문자들이 내 작품집에 들어오도록 유도할 것이다.
Illustrator를 열고 1500x500 문서를 만들었고 제 스타일에 따라 플래카드 이미지를 디자인했습니다.
내 저장소로 돌아와서, 나는
README.template.md 라는 새 루트 디렉터리를 만들고, 그림을 폴더에 놓고, assets 파일에서 그것을 사용했다.[](https://braydoncoyer.dev)
사회 휘장
GitHub profile의 자술한 목표 중 하나는 방문자들이 나의 다른 소셜네트워크서비스(특히 트위터, LinkedIn, CodePen)에 방문하도록 유도하는 것이다.
이를 위해 나는 나의 사교 휘장이 개인 자료의 맨 위에 열거되어 있다는 것을 확보했기 때문에 방문객들이 본 첫 번째 일이다.
이러한 배지를 만들기 위해 shields.io를 사용하고 배지 텍스트, 배지 색상 및 대상 URL을 편집했습니다.
나는 나의 개인 자료를 추적하는 방문도 재미있다고 생각해서 휘장을 만들어 사교 휘장 옆에 놓았다.
액세스 배지를 직접 만들려면 아래의 액세스 배지 태그 컨텐트를 복사하고 URL의 저장소 대상(/visions/) 다음에 있는 모든 컨텐트)을 변경합니다.
[](https:braydoncoyer.dev)
[](https://twitter.com/BraydonCoyer)
[](https://www.linkedin.com/in/braydon-coyer/)
[](https://codepen.io/braydoncoyer)
머리말 부분
믿든 안 믿든 네가 맡아라. 플래카드 이미지와 소셜 휘장은 이 공간을 차지하지 않을 것이다.방문자들이 나의 다른 소셜네트워크서비스를 볼 수 있는 선택적인 노선을 가지게 된 이상, 그들은 나를 좀 알아야 한다.
나는 단지 소개를 위해 작은 광고 하나를 썼다.방문자들이 나에 대한 정보를 더 알고 싶다면, 그들은 나의 투자조합 사이트나 링크드 인 개인 자료에서 이 정보를 찾을 수 있다.방문객을 너무 많은 정보로 압도하지 마라.
소개의 마지막 부분에서 저는 방문객들에게 제 투자조합 사이트를 방문하라고 호소했습니다. 다시 한 번 강조하지만 방문객들이 어찌할 바를 모르게 하고 싶지 않고 제 정보를 충분하게 제공하고 필요할 때 더 많은 내용을 읽을 수 있는 방법을 제공합니다.
최신 블로그 게시물
이어서 방문자들에게 나의 최근 블로그 게시물을 보여 주고 싶다.이것은 동적이며 정기적으로 리듬을 갱신해야 한다.이 어려운 작업은 최종적으로 단독 파일에 위탁될 것입니다. GitHub 작업 흐름은 이 파일을 실행하지만, 이 파일이 어디에 내용을 주입하는지 알기 위해서는 템플릿의 특정한 패턴이 필요합니다.
이제 블로그 게시물 섹션에 다음 내용을 추가합니다.
<!-- BLOG-POST-LIST:START -->
<!-- BLOG-POST-LIST:END -->
To inject my blog feed into the
README.mdfile, I followed Darsh Shah's article How to Add Your Recently Published Articles to Your GitHub Profile README using GitHub Actions 🤖
고정 저장소 및 GitHub 통계
최근의 블로그 게시물을 제외하고 나는 주의력을 나의 다른 몇 개의 저장소로 옮기고 통계 데이터를 표시하고 싶다.이를 실현하기 위해 저는 Anurag HazraGitHub ReadMe Stats를 사용했습니다. 그의 API에서 검색한 내용은
README.template.md 표시에 포장되고 다양한 방식으로 스타일 설정을 할 수 있습니다.문서는 이해하기 쉽다.나는 네가 가서 보도록 격려한다.<!-- Pinned Repositories -- >
<a href="https://github.com/braydoncoyer/tailwindcss-v2-dark-mode-template">
<img align="center" style="margin:1rem 0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=tailwindcss-v2-dark-mode-template&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>
<br>
<a href="https://github.com/braydoncoyer/ng-limeade">
<img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=ng-limeade&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>
<a href="https://github.com/braydoncoyer/officeapi">
<img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/pin/?username=braydoncoyer&repo=officeapi&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>
<!-- GitHub Stats -- >
<a href="https://github.com/braydoncoyer">
<img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api/top-langs/?username=braydoncoyer&hide=html,css&title_color=ffffff&text_color=c9cacc&icon_color=4AB197&bg_color=1A2B34" />
</a>
<a href="https://github.com/braydoncoyer">
<img align="center" style="margin:0.5rem" src="https://github-readme-stats.vercel.app/api?username=braydoncoyer&show_icons=true&line_height=27&count_private=true&title_color=ffffff&text_color=c9cacc&icon_color=4AB097&bg_color=1A2B34" alt="Braydon's GitHub Stats" />
</a>
기능
다음에, 나는 방문자에게 내가 전체 창고 웹 개발자로서의 기술을 보여주는 방식이 필요하다.나는 나의 기술을 무질서한 목록에 넣고 싶지 않다.그것은 페이지에 많은 공간을 차지하지만, 무질서한 목록은 그다지 패션의 하이라이트를 제공하지 못한다.
반대로 나는 shield.io에서 온 휘장을 사용하고 페이지에 휘장을 연결하여 현수막 이미지와 같은 배경색을 사용하여 전체 프로필의 디자인 일치성을 유지했다.
많은 기술을 열거하고 싶어서 기본적으로 핵심 기술을 표시하고
<img> 표시를 사용하여 더 많은 기술을 표시할 수 있도록 하겠습니다.[](https://img.shields.io/badge/Code-Angular-informational?style=flat&logo=angular&logoColor=white&color=4AB197)
...
<details>
<summary>More Skills</summary>
[](https://img.shields.io/badge/Style-CSS-informational?style=flat&logo=css3&logoColor=white&color=4AB197)
...
</details>
<details> 파일에서 사용한 배지의 전체 목록을 보려면 HERE를 클릭합니다.사무실 견적
방문객이 나의 개인 자료를 떠나기 전에 나는 독특하고 개인적인 스타일로 그들의 체험을 끝내고 싶다.블로그 게시물 부분과 매우 비슷합니다. GitHub 작업 흐름에서 스크립트를 실행합니다. 이 스크립트는
README.template.md 에서 패턴을 찾고 무작위 인용을 삽입합니다.Office 견적 섹션에서는 다음 모드를 사용했습니다.
<p>{office_quote}</p>
<p>{office_character}</p>
Check back at the top of the hour for a new quote!
결론
다음 글에서 GitHub 작업 흐름을 만들고 동적 내용을
README.template.md 파일에 주입하는 방법을 보여 드리겠습니다.읽어주셔서 감사합니다!만약 당신이 이 글을 좋아한다면, 이런 내용을 더 많이 원한다면subscribe to my newsletter, 반드시 나를 따라와!
daily.dev 모든 새로운 꼬리표에 가장 좋은 프로그램 뉴스를 제공할 수 있다.우리는 당신이 미래를 해독할 수 있도록 수백 개의 합격 원천을 배열할 것입니다.
Reference
이 문제에 관하여(Killer GitHub 개요 1부 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dailydotdev/creating-a-killer-github-profile-readme-part-1-33nm텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
