[GitHub] 5분만에 Gist를 티스토리에 공유해보자 (Gist 생성 및 공유방법)

GitHub Gist

개발자분들이라면 개발 블로그를 찾다 보면 위 사진과 같은 코드 블록을 본 적이 있을 겁니다 

최근 들어서 해당 코드 블록이 Github Gist 라는걸 알게 되었고 이번 기회에 사용 방법과 공유하는 방법을 정리해 보려고 합니다 

 

Github에서 제공하는 코드 스니펫,텍스트 파일을 공유할 수 있는 무료 기능입니다

디자인도 좋기도 하고 빠르고 간편하게 작성하여 공유할 수 있어 개발 블로그에 유용하게 쓰이는 것 같습니다

 

Gist는 Git 기반으로 버전관리와 Git 명령어를 통해서 관리할수 있습니다

Gist 생성 방법

gists 만들기 - GitHub Docs

 

깃허브 홈페이지에서 우측 프로필 사진을 누르면 메뉴바가 나오는데 your gists에 접속 

또는 https://gist.github.com/에 접속

All gists에서 Create a gist 버튼을 눌러 줍니다

위에서부터 제목,파일 이름,코드 및 텍스트 작성해 줍니다

다른 파일을 추가하고 싶다면 밑에 있는 Add file을 눌러 추가하여 작성

 

파일 이름은 확장자를 코드에 맞춰 기입해야 코드 하이라이트가 활성화가 됩니다 (js,py,java)

 

비공개(Secret)와 공개(Public) 2가지 유형

Create secret gist: URL을 아는 사람만 접근할 수 있는 비공개 gist (검색 불가능)

Create public gist: 누구나 접근 가능한 공개 gist (검색 가능)

gist를 생성하면 위 페이지에서 관리 또는 공유할 수 있습니다 

티스토리 gist 공유 방법

우측 상단에 보면 html 태그로 보이는 코드를 우측에 있는 아이콘을 눌러 복사해줍니다

티스토리의 글쓰기에서 모드를 HTML 모드로 변경 후 복사한 코드를 붙여 넣기 해줍니다 

코드 블록을 넣을 위치에 태그를 넣어줍니다

 

그러면 밑에 있는 Gist처럼 코드를 공유할 수 있습니다

글쓰기 창에서는 나오지 않는데 미리 보기를 눌러 확인하면 정상적으로 나오는 걸 볼 수 있습니다

VScode에서 Gist 관리하기

Gist는 Git 기반으로 만들어져 Git 명령어를 통해서 관리할 수 있기 때문에 VScode 같은 IDE에서 관리할수 있습니다 

먼저 Gist를 Clone 명령어를 통해 복제하기 위해서 Gist의 공유 유형을 HTTPS로 바꿔줍니다

생성한 Gist에 들어가면 우측 상단에 있는 공유 유형을 Embed에서 Clone via HTTPS로 변경해 줍니다 

 

Git Clone은 URL 값을 사용하기 때문에 HTML 파일에서 URL로 변경해줘야 합니다

VScode를 실행하고 터미널에 Clone 명령어를 통해서 Gist를 복제합니다

그럼 다음과 같이 코드를 복제하여 수정하고 Commit - Push 하는 작업을 통해서 버전 관리나 수정을 할 수 있습니다

간단한 코드 같은 경우에는 Repository 보다는 간단하게 할수 있는 Gist가 유용하게 사용될 것 같습니다