Github는 약 1년 전에 Github Actions를 도입하여 개발자의 삶을 훨씬 쉽게 만들었습니다. 프로젝트 빌드 실행 또는 풀 요청 생성 등과 같은 많은 프로세스를 자동화할 수 있는 워크플로를 만드는 데 도움이 됩니다.

나는 오랫동안 Github Actions를 사용하고 싶었고 마침내 블로그 게시물을 통해 내 이야기와 프로젝트를 공유하는 데 도움이 될 무언가를 구축하는 아이디어를 생각해 냈습니다.

아이디어

텍스트가 포함된 이미지는 블로그 게시물에 대한 사람들의 관심을 끄는 가장 좋은 방법입니다. 블로그를 작성할 때마다 소셜 미디어에 공유할 수 있는 블로그 게시물의 적절한 표지 이미지를 찾는 것이 약간 고통스럽습니다.

내 블로그 게시물에 대한 OG 이미지를 생성하는 워크플로를 실행하여 작업을 수행할 GitHub Action을 만드는 아이디어를 생각해 냈습니다.

제출 범주

DIY 배포/유지관리자 필수 항목/엉뚱한 와일드카드

어떻게 작동합니까?

사용자로부터 다음 세 가지 입력을 받습니다.

bold-text: 이것은 굵은 스타일로 표시될 텍스트를 나타냅니다.
일반 텍스트: 일반 스타일로 표시될 텍스트를 나타냅니다.
theme: 이미지의 테마를 정의합니다. light 또는 dark 일 수 있습니다.

이미지는 Github 리포지토리의 작업 섹션에서 다운로드할 수 있는 아티팩트로 업로드됩니다 🥳

Github 액션 사용 방법

Github Action을 사용하려면 main.yml 파일에서 다음 단계를 수행할 수 있습니다.



워크플로가 완료되면 open-graph-image라는 이름으로 다운로드된 아티팩트가 표시됩니다.



짜잔! 🎉 🎊

이제 이미지를 가지고 있으므로 블로그 게시물이나 다른 소셜 미디어 플랫폼에서 사용할 수 있습니다.

생성된 이미지를 이 기사의 표지 이미지로 사용했습니다.

Github 리포지토리

재스민2895 / 오픈 그래프 이미지

열린 그래프 이미지 만들기

오픈 그래프 이미지

열린 그래프 이미지를 사용하여 소셜 카드를 만듭니다.

입력

굵은 텍스트

필수 이미지에서 굵은 텍스트로 표시될 텍스트입니다.

일반 텍스트

필수 이미지에 일반 텍스트로 표시될 텍스트입니다.

주제

소셜 이미지의 테마 레이아웃입니다. 가능한 값은 light 및 dark 입니다.

출력

이미지는 루트 디렉토리에 저장됩니다.

사용 예

- name: Open Graph social cards
  uses: Jasmin2895/[email protected]
  with:
    bold-text: "Open graph image"
    plain-text: "for social media platform"
    theme: "dark"

- name: Archive open graph image
  uses: actions/upload-artifact@v2
  with:
    name: open-graph-image
    path: og-image.now.sh.png

- name: Download all workflow run artifacts
  uses: actions/download-artifact@v2

출력 이미지

View on GitHub

자원

Social Cards as a Service