주피터 노트북 깃헙 스터디폴리오 만들기 무작정 따라하기

히제오·2020년 10월 1일
22
post-thumbnail

제목이 '무작정 따라하기'인 이유는, 나 역시 무작정 따라해서 간신히 만들었기 때문이다. 온갖 에러와 '의도하지 않은 결과들', 그리고 '일단 하지만 이유를 알 수 없음' 속에서 '어쨌든 결과를 만들어낸 방법'을 공유하기 위한 글이다. 부디 너그럽게 봐주시기... 그리고 더 나은 설명이 있다면 꼭 알려주시기... 제발!

예상 독자 깃헙 어케 쓰나요? 깃헙 가입은 해두었는데 음 잘 모르겠음. 주피터 노트북 처음 써보는데 모아두면 좋을 것 같다... 어디에 내 주피터 노트북을 공유하고 싶은데 어떻게 공유하면 좋을까? 파이썬 막 배우기 시작함... 과 같은 상태의 나 같은 생초보

우선 주피터 노트북 깃헙 스터디폴리오가 무엇인가! 하는 분들이 계실 터. 우선 나의 스터디 폴리오를 공유해본다. 링크에서 더 자세히 확인해볼 수도 있다.

주피터 노트북의 mark down의 기능을 알게 되고, 작업 과정 그 자체가 노트로 기능할 수 있다는 사실에 엄청 고무됐다. (a.k.a.필기덕후) 다만 주피터 노트북을 켜서 그것을 다시 들여다보는 일련의 과정이 너무 귀찮아서 좋으면서도 별로라고 생각했는데, 데잇걸즈를 통해 만나게 된 멘토님 수진님의 깃헙 페이지를 보게 됐다.

깔끔한 도입 페이지 디자인도 너무 좋았지만 제일 충격적이었던 것은 '주피터 노트북으로 작업 과정 자체를 공유할 수도 있다'는 개념 자체였다. 그래서 수진님의 멘토링 시간을 이용해 가이드를 받은 뒤... 혼자 좀 삽질하다가 나도 결국 만들어냈다. 짜잔!

스터디폴리오라는 거창한 이름을 붙였지만, 파이썬 공부하면서 만든 주피터 노트북들 모아보겠다는 소소한 페이지라고 생각해주시면 된다.

이렇게 각각의 링크를 클릭하면 주피터 노트북이 나오는데, 나중에 파이썬이 가물가물해질 때 다시 돌아와 톺아볼 수 있길 바라고 있다!

그래, 네가 만든 것 자랑은 됐고, 어떻게 만드는 건데?

우선 주피터 노트북 html 파일이 필요하다. html 파일은 어떻게 만드냐면, 아래와 같은 과정이 필요하다.

  1. 주피터 노트북 완성본을 만든다
  2. file - download as html
  3. 그렇게 다운로드된 html 파일의 디자인이 맘에 들지 않으면... template 를 사용해 html로 내보내기

깃헙에서는 아래와 같은 과정이 필요하다.

  1. 페이지 만들기 (+ 테마 설정)
  2. 404 page 해결하기
  3. 주피터 노트북 html 업로드하기
  4. Mark down 문법으로 Readme 수정하고 html 링크하기

에러만 만나지 않으면 꽤 간단한 프로세스이다. 겁먹지 말고 따라와보자!

주피터 노트북 html 파일 만들기

  1. 주피터 노트북 완성본을 만든다.
    여러분들은 mark down을 사용해 노트를 만들어본 경험이 있을 것이라고 생각하고... 그렇다면 이 부분은 어렵지 않을 것이다! 다만 내보내기를 할 때 run의 순서가 그대로 나오는 것을 염두에 두어야 한다. 좀 더 깔끔한 노트를 만들고 싶다면, Kernel - restart & clear output 을 한 뒤, 처음부터 차례 차례 run 하는 것을 추천.

  2. file - download as html
    이렇게 하면 주피터 노트북이 html로 다운로드 된다. 나의 경우 500 internal server error가 나왔는데, 아나콘다를 업그레이드 하는 방법이 도움이 됐다.
    conda upgrade --all

  3. template 를 사용해 html로 내보내기
    그렇게 다운로드한 html은... 디자인적 통제가 어려웠다. 두 개의 파일을 분명히 같은 방법으로 내보내기 했는데 다른 디자인으로 출력됐다. (도라버린다...) 이왕이면 이쁜 디자인으로 올리고 싶은데, 어떻게 해야할까 찾아보니 template를 적용해 html로 내보내기 하는 방법이 있었다. 같은 고민을 하신 분들이라면 이 방법이 도움이 될 것이다.

  • nbconvert 설치하기
    주피터 노트북을 다양한 파일 형식으로 내보내기 할 수 있도록 도와주는 패키지. 아래의 두 커맨드 라인 중 하나로 설치할 수 있을 것이다. pip과 conda의 차이는 주피터 노트북이 설치된 환경의 차이인 것으로 추측하나 알지 못한다.
    pip install nbconvert
    conda install nbconvert

  • 성공적으로 설치했다면, 템플릿으로 내보내기!
    nbconvert가 성공적으로 설치됐다면, 맥의 경우 터미널에서 템플릿 내보내기가 가능하다. 아래와 같이 커맨드라인을 쳐보자! jupyter nbconvert <파일 경로>.ipynb --to html --template classic
    이 커맨드라인을 통해 클래식 템플릿으로 내보내기 할 수 있다. 그 외에도 찾아보면 여러가지 템플릿이 있고, 그 템플릿을 적용하는 여러가지 방법이 있는 것으로 추정되나... 열심히 찾아보고 삽질해봐도 실패. 클래식한 템플릿을 적용해 내보내기 하는 방법을 터득함으로써 내가 내보내기하는 주피터 노트북 디자인의 일관성을 유지하는데 만족하기로 했다.

이 과정을 잘 따라오셨다면, 여러분은 자신만의 주피터 노트북이 html로 내보내기된 파일을 획득하셨어야 합니다...! 성공하셨다면, 오늘의 무작정 따라하기의 어려운 과정을 모두 지나오신 것이나 다름없습니다. 축하~~!! 그럼 바로 다음 과정으로 돌입해보자.

깃헙에 페이지 만들고 html 올리고 링크하기

  1. 페이지 만들기(+ 테마 설정)
    여러분이 깃헙을 한 번이라도 만져본 적 있다는 가정 하에 설명합니다.
    우선 작업을 올릴 레파지토리를 하나 만들고, 해당 레파지토리의 세팅으로 들어가본다.
    조금 내려가보면 GitHub Pages를 설정할 수 있는 곳을 발견할 수 있을 것...! 여기서 gh-pages나 master 아무데나 루트로 설정하고 페이지 링크를 publish 한다. 자세히 보면 'change theme'이라는 버튼이 보일텐데...

    그 버튼을 클릭하면 페이지의 테마를 선택해볼 수 있다. 깔끔하고 괜찮다! 원하는대로 디자인하려면 index.html로 스스로 만들면 되고, 다 귀찮고 깃헙의 기본 테마가 괜찮아보여서 잘 써보고 싶다 하면 이 중 선택해서 사용하면 된다.

  2. 404 페이지 해결하기
    깃헙에 주피터 노트북을 올려서 그대로 웹페이지처럼 보이길 원하는 거지, html이 올라간 깃 페이지로 넘어가길 원하는 것은 아닐 터. 그러나 무언가 복잡한 사정으로... 깃헙은 싱글 페이지만 제공하고... 페이지를 더 만들어보려고 하면 404페이지가 뜨고.... 그런 것 같다. 사실 무엇이 문제인지 파악하기 전에 멘토님이신 수진님께서 "404 우회경로가 필요함! 내가 따라해볼 수 있게 번역도 했는데, 말하자면 그냥 이 404.html 페이지를 그 레파지토리에 넣으면 해결됨" 이라고 요약정리 해주셨기에 그대로 따랐다. 이유는 수진님의 깃헙에서 파악해보실 수 있고, 수진님의 깃헙 레파지토리에 포함되어 있는 '404.html'을 그대로 가져다가 넣으면 된다.

  3. 주피터 노트북 html 업로드하기
    해당 레파지토리에 아까 만든 html을 업로드한다.

  4. Mark down 문법으로 Readme 수정하고 html 링크하기
    Readme 페이지가 포트폴리오 사이트의 메인 페이지가 될 것. Mark down 문법으로 Readme를 수정하고, 원하는 곳에 주피터 노트북의 html 파일을 링크하면 된다. 마크다운 사용법은 이 링크를 참조했다. (이것을 알게 되고... 주피터 노트북 마크다운하는 방법을 더 잘 알게 된 이상한 경로의 지식 습득)
    가장 중요한 것이 html 링크하는 방법이다. 같은 레파지토리 안에 html 파일이 있으면, 링크 경로에 파일명만 입력해도 자동으로 연결되는 것으로 보인다. 나의 경우 아래와 같이 마크다운을 작성했고, 잘 작동하고 있다. 참고로 <br/> 과 같은 html 문법도 작동하는 것으로 보인다.

>  - [파이썬톺아보기1(Reviewing Python1)](python_review_1.html)
>  - [파이썬톺아보기2(Reviewing Python2)](python_review_2.html) <br/>

여기까지 따라왔다면, 결과는 앞서 페이지 만들기 단계에서 보였던 링크에서 확인 가능하다. 수정사항이 깃헙 페이지에 적용되는데 시간이 조금 걸리기 때문에, 수정한 것이 바로 보이지 않는다 해도 너무 걱정 말고, 조금만 기다려보자!

참고로 나는 오른쪽 About에 링크를 첨부함으로써 스터디폴리오 링크에 더 쉽게 접근할 수 있도록 했다.

그렇게 만든 페이지를 다시 자랑한다 🥰

Python_studyfolio

앞으로 공부하면서 만들 주피터 노트북을 정리해 올릴 예정! 많은 관심 부탁합니다!
그리고 여러분께서 이 '무작정 따라하기'를 통해 스터디폴리오를 만드는데 성공하셨다면, 저에게도 꼭 자랑해주세요!
문제상황이 발생했다면 제가 아는 선에서 도움을 드릴 수 있도록 노력하겠습니다.

그럼.. 파이썬 새내기들 모두 화이팅! 💫

profile
삽질 전문가. 모든 일에 진심인 편.

8개의 댓글

comment-user-thumbnail
2020년 10월 2일

정리왕 희지님... 저도 따라해보겠습니다.. 성공하고 올게요....

1개의 답글
comment-user-thumbnail
2020년 10월 3일

드디어 시도해보고 있습니다!! (와중에 About 에 링크 거는 거 생각 못했던 꿀팁..🙏)

1개의 답글
comment-user-thumbnail
2020년 10월 5일

덕분에 저도 깃허브에서 페이지 만들었어요! 앞으로 프로젝트마다 포폴 페이지로 잘 쓸 것 같아요! 정말 감사해용 >_<

1개의 답글
comment-user-thumbnail
2020년 10월 28일

희지님 글 차근차근 따라했더니 성공했어요!!!! 감사합니다~~ 클래식 템플릿으로 html 저장하기는..그냥 포기했어요..^^

답글 달기
comment-user-thumbnail
2023년 12월 30일

감사합니다!! 나중에 정말 유용할 것 같아요 😍
저장해놓고 자주 보러 올테니 삭제하지 말아주세요...🥺

답글 달기