Github.io 블로그 쌩으로 만들어 보기

Github.io로 간단하게 내 블로그를 호스팅한 뒤 게시물을 올려야 하는지 어떻게 올려야 할 지 고민하다 DB를 사용해보기로 했다. 헌데 찾아보니 Github블로그는 정적페이지라 DB 사용이 어렵다는 글을 보고 일단 DB는 잠시 접어두고 많이들 Github블로그를 꾸미는데 많이 사용하는 jekyll에서는 어떻게 게시물을 포스팅하나 찾아보니 _pages라는 폴더를 만들고 그 안에 올리려는 게시물을 정해진 파일명 규칙으로 해주고 확장자를 .md .html로 해주면 자동으로 게시판 형식으로 만들어 준다고 한다.

 

그럼 똑같이 폴더하나 정해 놓고 해당 폴더 하위폴더 돌면서 파일들 탐색하면 되겠다. 코드를 작성하고 돌려보니.. 웹 브라우저 환경에서는 자바스크립트의 fs(파일시스템 라이브러리)를 사용할 수 없다는 것이다... 그래서 찾아보니 github rest api를 이용해서 repository의 정보를 가져올 수 있었다.

 

github공식문서 : https://docs.github.com/en/rest/repos/contents?apiVersion=2022-11-28

 

Octokit 패키지를 깔고 import해주고 돌려보니..

 

Uncaught SyntaxError: Cannot use import statement outside a module

 

뭐야 이게.. html파일에 script 추가해준 부분에 type=module을 추가해주라는데 아무리해도 안된다..

이것저것 수정하다 Octokit버전이 제대로 안되나해서 CDN방식으로도 해보고 어찌저찌하다가 보니

기존에 main.js가 있고 새롭게 octokit.js를 만들어서 여기서 데이터를 처리하고 main.js에서 octokit에 있는 데이터를 가져오려고 import를 해줬었다. 알고보니...

 

main.js

import ( ocotokit.js에 있는 함수 )

 

octokit.js

import { ootokit } from 'CDN경로'

 

index.html

<script type="module" src="octokit.js"></script>

<script src="main.js"></script>

 

script에 module타입을 추가해줘야하는게 import를 사용한 js에서 해줘야 한다는거다... 의미상 export를 사용한 js가 module일거 같았는데.. 해당 부분을 수정해줬다.

 

 

잘 가져와진다