[Github Gist] 티스토리 블로그에 주피터 노트북 올리는 법

 

티스토리에 주피터 노트북을 올리는 방법은 여러 가지가 있지만, 그 중에서 Gist와 Nbviewer를 사용하는 방법이 가장 간단한 것 같다. Github에서 버전 관리를 하고 있지 않거나 Gist를 써보지 않았더라도 5분 이내로 할 수 있다. 심지어 Nbviewer 사이트에는 접속하지 않아도 된다. 아래의 Github Gist와 Nbviewer에 대한 설명은 참고만 하면 된다.

 

※ HTML로 변환해서 올리는 것은 줄 수 제한 때문에 짧은 코드가 아니면 어렵다.

 

🤷‍♂️ Github Gist란?

- 코드 스니펫(조각)을 만들어 간단하게 공유할 수 있는 툴이다.

https://gist.github.com/

Discover gists

 

🤷‍♀️ nbviewer란?

- 주피터 노트북을 공유할 수 있는 플랫폼이다.

https://nbviewer.org/

nbviewer

 

 

 

🚀 티스토리에 주피터 노트북 올리기

주피터 노트북을 티스토리에 올리는 과정은 크게 두 파트로 나누어진다. 먼저 Github Gist에서 우리가 올릴 코드를 스니펫으로 만들어 준 후, 티스토리 HTML 편집기에 업로드하면 끝!!

 

1. Github Gist 생성

먼저 2가지 상황에 따라 코드 스니펫 만드는 방법에 약간 차이가 있다. Github 버전 관리를 하고 있는 경우를 기준으로 설명하되, Git 저장소 없이 로컬에서 파일 작업을 하고 있더라도 가능한 방법을 함께 소개한다. 두 가지 경우에 있어 모든 과정은 동일하지만 3~4)번에서만 차이가 있으니 참고.

 

 

1) 깃헙 페이지 우측 상단의 + 버튼을 눌러서 New gist를 선택한다.

 

 

2) Github Gist 사이트로 이동하면, 중간에 있는 'Filename including extension...' 란에 제목을 써 준다.

 

 

3) 다시 Github 사이트로 가서 만들고자 하는 주피터 노트북 파일에 들어가 우측 상단의 Copy raw file 버튼을 클릭하고,

 

 

4) 본문에 붙여넣기 해준다.

※ 만약 로컬 파일에서 작업 중이라면 그냥 파일을 본문 영역으로 드래그하면 똑같이 아래와 같은 결과가 나온다.

 

 

5)  그리고 초록색 Create secret gist 버튼을 눌러주면 Github Gist 생성 끝!

     우리는 아래 Gist 생성 페이지의 주소를 복사해서 티스토리 업로드 시 사용할 것이다.

     미리 URL을 복사해 두자.

생성된 Github Gist

 

 

2. 티스토리에 올리기

HTML이나 CSS에 대한 백그라운드가 있다면 더 익숙하게 편집할 수 있겠지만 배경 지식이 없어도 아래 순서대로만 하면 충분히 업로드가 가능하다.

 

 

1) 먼저 코드를 제외한 블로그 내용을 작성해준 뒤, 우측 상단의 '기본 모드'를 눌러 드롭다운 리스트가 나오면 'HTML'을 선택한다.

 

 

2) 화면이 어두워졌지만 두려워하지 말고 코드가 들어갈 부분을 찾는다. 이 예제에서는 맨 아래에 코드를 넣으려고 한다.

 

 

3) 바로 이 한 줄이 주피터 노트북이 들어가는 코드이다. 원하는 곳에 이 코드를 넣으면 되는데, 자세히 살펴보고 코드를 편집해보자.

 

① 티스토리 HTML 편집기에 들어가야 하는 예제 코드

<p>

<iframe src="https://nbviewer.org/gist/YoungjaeKang/4385d69187cb256301aa5ffde591d97f" width="100%" height="1500" frameborder="0" scrolling="yes">

</iframe>

</p>

 

② 우리가 Gist 생성 페이지에서 복사한 URL

https://gist.github.com/YoungjaeKang/6ec60358b2b63cbba3abcaa3c2ecbf34

 

> ①과 ② 사이에 공통점이 보이는지? ①번 예제 코드의 빨간색 부분을 ②번 복사 URL의 파란색 부분으로 바꿔 주면 아래와 같이 여러분의 최종 코드가 나온다.

 

③ 최종 코드

<p>

<iframe

src="https://nbviewer.org/gist/YoungjaeKang/6ec60358b2b63cbba3abcaa3c2ecbf34" width="100%" height="1500" frameborder="0" scrolling="yes">

</iframe>

</p>

 

 

4) 위 최종 코드를 원하는 곳에 넣고 블로그 편집을 완료해 주면 아래와 같이 티스토리 블로그에 주피터 노트북이 나온다.

    (HTML과 CSS를 수정하면 높이나 너비 등 여러가지 요소를 원하는 대로 조정할 수 있다)