github.dev 스타터 웹사이트에 DEV 배지 추가

안녕 모두들! 당신의 Hacktoberfest은 어떻게 지내고 있습니까? 내 것은 지금까지 굉장했고 당신도 그랬기를 바랍니다!

내 포트폴리오 사이트를 얻는 것은 올해 완료하고 싶은 프로젝트로 항상 내 마음 뒤에 있었습니다. 저는 최근 몇 번의 클릭만으로 기본 포트폴리오/쇼케이스/블로그 사이트를 쉽게 시작할 수 있는 두 가지 좋은 방법에 대해 배웠습니다.

더 Github Personal website generator

깃허브 / 개인 웹사이트

소프트웨어 개발자로서의 작업을 보여주는 개인 웹 사이트를 시작하는 데 도움이 되는 코드입니다.

DEV 고유의

이제 Stackbit를 통해 DEV 콘텐츠에서 바로 자체 호스팅 가능한 정적 블로그를 생성할 수 있습니다.

개발자 팀의 Ben Halpern ・ 2019년 9월 26일 ・ 4분 읽기

#meta #projectbenatar #webdev #changelog

나는 둘 다 시도하기로 결정했고 현재 GitHub 개인 웹 사이트에서 실험하고 있습니다. 그것의 멋진 기능 중 하나는 소셜 태그 추가, 프로그래밍 관심사 및 블로그 활성화와 같은 많은 기본 기능이 매우 쉽다는 것입니다. 나는 그것이 DEV의 제안보다 기능이 더 풍부하다는 것을 알았습니다. 이는 DEV의 제안이 새롭고 지난 달에 출시되었기 때문에 주어진 것입니다.

그래서 사이트의 기본 요소를 구성하는 동시에 향후 수정을 위해 사이트의 CSS 프레임워크Primer를 읽었습니다. 내 소셜 링크를 구성하는 동안 DEV가 누락된 것을 발견했습니다 😱! 마음 한구석에 DEV가 프로필 설정의 개인 사이트에서 배지를 쉽게 구성할 수 있는 링크를 제공한다는 것을 기억했습니다. 내 사이트에서 해당 배지를 받을 시간입니다!

지도 시간

github/personal-website의 README.md에 있는 지침에 따라 개인 웹사이트를 구성했으면 다음 단계를 따르십시오.

_config.yml로 이동하여 social_media 사전 시작이 보일 때까지 아래로 스크롤합니다.

Behance의 줄에서 다른 줄과 비슷한 양의 패딩을 사용하여 dev: <username>를 추가합니다. 여기서 <username>는 프로필 링크에서 https://dev.to/ 뒤의 텍스트입니다.

예: 제 프로필 링크는 https://dev.to/amorpheuz 이므로 추가하겠습니다.dev: amorpheuz .

social_media.yml 폴더에서 _data로 이동합니다. 다른 소셜 미디어 사이트와 유사한 배열로 behance 의 icon_svg 아래에 다음 콘텐츠를 추가합니다.

dev:
  name: DEV
  profile_url_prefix: https://dev.to/
  icon_svg: '<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 512 512" fill="#959da5"><path d="M137.3,201.5c-4.4-3.3-8.9-5-13.3-5H104v119.4H124c4.4,0,8.9-1.7,13.3-5c4.4-3.3,6.7-8.3,6.7-14.9v-79.6C143.9,209.8,141.7,204.8,137.3,201.5L137.3,201.5z M461.8,0H50.2C22.5,0,0.1,22.4,0,50.1v411.9C0.1,489.6,22.5,512,50.2,512h411.7c27.7,0,50.1-22.4,50.2-50.1V50.1C511.9,22.4,489.5,0,461.8,0z M176.2,296.2c0,21.5-13.3,54.1-55.3,54h-53V161.1h54.1c40.5,0,54.1,32.5,54.1,54L176.2,296.2L176.2,296.2z M291.3,194.9h-60.9v43.9h37.2v33.8h-37.2v43.9h60.9v33.8h-71.1c-12.8,0.3-23.4-9.7-23.7-22.5v-143c-0.3-12.7,9.8-23.3,22.5-23.6h72.2L291.3,194.9L291.3,194.9z M409.7,326.7c-15.1,35.1-42.1,28.1-54.2,0l-44-165.5h37.2l34,130l33.8-130h37.2L409.7,326.7L409.7,326.7z"/></svg>'

참고: 로고 주변의 패딩을 제거하기 위해 DEV에서 제공하는 SVG을 약간 수정했습니다. 로고 간격은 사이트에서 기본적으로 처리되고 다른 로고는 패딩 없이 유사하게 추가되기 때문입니다. 사이트에서 로고가 배열/표시되는 방식을 변경하는 경우 항상 모든 로고 주변에 적절한 간격을 두어 다른 요소와 명확하게 구분되도록 하십시오.

그리고 그게 다야! bundle exec jekyll serve를 실행하여 로컬 개발 서버를 시작하고 나만의 맞춤형 DEV 배지 🎉🎉🎉의 영광을 누려보세요.



이 짧은 튜토리얼은 여기까지였습니다. SVG를 접근 가능한 위치에 제공한 DEV에 특별한 감사를 드립니다! 설치 과정에서 발생하는 문제에 대해 도움을 요청하십시오.