📦 GitHub 프로필: 최신 DEV 기사를 보여주는 올바른 방법 + 보너스 🎁

안녕 ! 👋

1주 ➡️ 1개 기사 !

We just hit 1250 followers ! Thank you very much ! 🥰

알다시피 이제 GitHub 프로필을 표시할 수 있습니다. 🧑‍🌾

아직 없는 경우 아래 링크를 사용하여 만드는 것이 좋습니다.

GitHub 프로필을 만드는 방법 README

Monica Powell ・ 2020년 7월 11일 ・ 3분 읽기

#github #branding #markdown

여기서는 자동화된 방식으로 최신 블로그 게시물을 GitHub 프로필에 직접 표시하는 것이 2분 안에 어떻게 가능한지 보여드리겠습니다.


GitHub 프로필의 예

GitHub Profile Example 1

GitHub Profile Example 2

GitHub Profile Example 3

...

아래 의견에 귀하의 의견을 공유하십시오!

시작하기 전에 Github 프로필이 있어야 합니다 💪

GitHub에서 프로필을 얻으려면 아래의 3단계를 따르세요. 이미 프로필이 있는 경우 이 부분을 건너뛸 수 있습니다.

1️⃣ Create a new repository GitHub 사용자 이름과 동일한 이름(대소문자 포함).
2️⃣ 새 저장소에 README.md 파일을 만들고 표시할 콘텐츠를 추가합니다.
3️⃣ 새 README 파일을 커밋하고 푸시하세요!

지난 3/5/10 DEV 기사 보기 🔥

@gautamkrishnar 감사합니다 😙, 다른 웹사이트( , Medium , Stackoverflow , ...)에서 기사 검색을 자동화하고 그 결과를 README 파일에 표시할 수 있는 작은 패키지를 만들었습니다.

가우탐크리슈나르 / 블로그-포스트-워크플로우

RSS 피드를 사용하여 GitHub 프로필/프로젝트 추가 정보에 모든 소스의 최신 블로그 게시물, StackOverflow 활동 또는 Youtube 비디오를 자동으로 표시합니다.

1단계: README.md 편집 📝

README.md 파일에 이 2개의 작은 Markdown 줄을 추가하기만 하면 됩니다. 물론 자신의 콘텐츠를 파일에 추가할 수 있지만 이 두 줄은 자습서에 필요합니다.

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

위의 코드를 복사하여 README.md에 붙여넣으십시오.

예를 들어 my GitHub profile 에서 DEV 기사를 다음과 같이 파일 끝에 배치했습니다.


🚸 코드


🚸 2단계 이후에 렌더링됩니다.

2단계: 간단한 봇 만들기 🤖

이제 GitHub 워크플로를 만들어야 합니다. 목표 🎯는 이 2줄의 마크다운 코드를 DEV 기사로 대체하는 것입니다!

A workflow is a configurable automated process made up of one or more jobs. You must create a YAML file to define your workflow configuration. Understanding the GitHub flow

워크플로 만들기 👇

저장소의 작업 탭으로 이동합니다.

또는

github.com/$USERNAME/$USERNAME/actions/new으로 이동합니다($USERNAME를 GitHub 사용자 이름으로 바꿉니다.

예: github.com/viclafouch/viclafouch/actions/new

그런 다음 필요한 최소한의 구조로 시작하기 위해 단순 워크플로를 선택합니다.


blank.yml 파일의 이름을 blog-post-workflow.yml로 바꾸고 아래 코드를 삽입하기만 하면 됩니다.

name: Latest blog post workflow
on:
  workflow_dispatch:
  schedule:
    # Runs every hour
    - cron: '0 * * * *'

jobs:
  update-readme-with-blog:
    name: Update this repo's README with latest blog posts
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: gautamkrishnar/blog-post-workflow@master
        with:
          # Your RSS feed url
          feed_list: "https://dev.to/feed/viclafouch"
          # Maximum number of posts you want
          max_post_count: 3

도움이 필요하면 여기 내 blog-post-workflow.yml file.

2가지 중요한 매개변수 ❗️

feed_list 필수! RSS 피드 URL입니다.

max_post_count 이것은 readme 파일에 표시할 최대 게시물 수입니다. 기본값은 5 입니다.

gautamkrishnar/blog-post-workflow#options에서 모든 매개변수를 찾을 수 있습니다.

마지막으로 워크플로 생성을 확인합니다.

이제 워크플로가 자체적으로 작동하며 매시간 DEV 기사를 검색하고 결과를 README.md 파일에 commit 및 push 표시합니다.

Note: In order to avoid waiting 1 hour to see the first change appear, you can manually trigger the workflow.

전 후

보너스 🏆

최신 Medium 기사를 Github 프로필, StackOverflow 활동, 블로그 기사 또는 YouTube 비디오에 자동으로 표시하고 싶습니까?



다음은 일부 인기 있는 블로깅 플랫폼 및 해당 RSS 피드 URL 목록입니다.


이름
피드 URL


https://dev.to/feed/username
Wordpresshttps://www.example.com/feed/
Mediumhttps://medium.com/feed/@username
Stackoverflowhttps://stackoverflow.com/feeds/user/userid
Ghosthttps://www.example.com/rss/
Drupalhttps://www.example.com/rss.xmlhttps://www.youtube.com/feeds/videos.xml?playlist_id=playlist_idhttps://www.youtube.com/feeds/videos.xml?channel_id=channelId

여기에서 예를 찾을 수 있습니다: https://github.com/viclafouch .

DEV 기사를 표시한 방식을 보여주기 위해 주저하지 말고 GitHub 프로필을 공유하세요! 😉

건배 🍻 🍻 🍻

이 기사가 마음에 드셨다면 HTML, CSS 및 JavaScript와 관련된 간단한 팁을 정기적으로 게시하는 곳 또는 여기에서 저를 팔로우하실 수 있습니다.

🍦 React Hooks에서 HTTP 요청을 적절하게 취소하고 메모리 누수 방지 🚨

Victor de la Fouchardière ・ 2020년 7월 29일 ・ 3 분 읽기

#react #javascript #tutorial #showdev

🚜 Chrome DevTools 🍄에서 JavaScript 스니펫으로 생산성 향상

Victor de la Fouchardière ・ 2020년 7월 22일 ・ 2 분 읽기

#javascript #productivity #chrome #tutorial