Hexo로 github page 구축하기(1)

들어가기에 앞서

처음에는 hexo라는 프레임워크를 알지 못했기 때문에 jekyll을 이용해서 블로그를 구축하려고 하였습니다. 그래서 흐름상 왜 바꾸게 되었는지 등을 알기 쉽게(저와 같은 문제를 겪는 분들에게 도움이 되고자)
jekyll을 설치하면서 만났던 문제와 hexo 설치까지로 구성하였음을 밝힙니다.

• github를 사용하기 위한 아이디
• ruby
• jekyll

위와 같은 설치가 필요합니다

1. 맘에 드는 테마를 가져와서 내 repository에 fork 해오기

참고: [TheoryDB]: ([https://github.com/theorydb/theorydb.github.io](https://github.com/theorydb/theorydb.github.io))

2. fork해 온 테마를 이용하기 위해 <username>.github.io 로 이름을 변경해준 뒤 로컬 환경에 pull 해주기

3. vs code로 해당 디렉토리에서 열기!

4. jekyll 설치를 위한 명령어를 입력해준다(터미널)

# gem 관리를 위한 bundler 설치하기
$ gem install jekyll bundler   

# gemfile에 저장된 gem들 설치
$ bundle install

# jekyll과 종속된 필요한 라이브러리 설치
$ gem install bundler jekyll minima jekyll-feed tzinfo-data rdiscount

# 위의 명령어는 왜 해주는지 확인 필요하다 why를 모르겠다

참고

gem: 라이브러리의 개념과 같다고 생각하면 된다

gemfile: requirements.txt처럼 필요한 gem(라이브러리)들을 등록하는 파일(txt)

bundler: gemfile에 정의된 gem들의 의존성을 파악해서 올바른 gem을 사용할 수 있게끔 해주는 명령어

문제 발생 1

fork해 온 repository의 bundle과 gem들의 버젼이 달라서 충돌 발생 (jekyll을 비롯한 종속된 라이브러리들의 버젼이 다르기 때문에 서버도 안 켜지고 초기화도 안되는 문제발생

jekyll new PATH : 지정된 경로에 기본 젬-기반 테마로 새 jekyll 사이트를 생성(필요한 경우 디렉토리 생성)

해당 명령어를 입력했을 때 i18n 의 버젼이 충돌하는 문제 발생

gemfile.lock에 있는 버젼들을 지워주고 현재 내 로컬 환경내에 있는 gem들로 버젼을 변경하여 실행해봤지만 계속해서 에러가 발생

결국 초기화 설정을 통해 새로운 페이지를 만들 수 있게 파일구조를 바꿨고 기존의 파일들을 지우고 대체하는 방식으로 하니 적용이 되었다.

찾다보니 jekyll뿐만 아니라 다양한 static framework(hugo, hexo 등)을 통해 github page를 호스팅할 수 있다는 것을 발견했다.

결론적으로 말하면 javascripts 공부를 이어서 해나가기 때문에 node.js 기반인 hexo를 통해 github 블로그를 구현하는게 나에게 더 도움이 될 거라 생각했다.

1217부터 hexo 설치

1. 개발환경 구성

# 전역에 hexo를 설치
$ npm install hexo-cli -g

# 해당 디렉토리(로컬) 이동한 다음 hexo 초기 설정
$ hexo init

# node modules 설치
$ npm install

# 서버 구동
$ hexo server

2. 테마 적용 - icarus 테마 사용

1. icarus 저장소에서 코드를 다운 받아서 theme 디렉토리 안으로 이동

ppoffice/hexo-theme-icarus

2. _config.yml 에서 사용하는 테마 변경 ⇒ theme 디렉토리 안에 있는 디렉토리명으로 사용

3. 서버 구동시 에러 발생 ⇒ 필요 패키지가 부족하기 때문

• ERROR 코드에서 필요한 패키지를 bash창에 입력해서 설치

Issue 발생

⇒ 서버를 구동하면 순환 종속성이 발생하여 warning message 발생

(node:20880) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
(node:20880) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:20880) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency
(node:20880) Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency
(node:20880) Warning: Accessing non-existent property 'column' of module exports inside circular dependency
(node:20880) Warning: Accessing non-existent property 'filename' of module exports inside circular dependency

구글링 결과 stylus가 노드 v14와 호환이 안되서 생기는 오류로 추정

⇒ 최신 버젼에서는 문제가 해결되었다는데 버젼을 설치해도 해결이 되지 않음

solution 1

pakage.json 모듈들을 최신 버젼으로 업데이트한 다음 설치하는 방법으로 진행

npm-check-updates 를 이용해서 최신버젼으로 변경키로

$ npm install -g npm-ckeck-updates

⇒ 계속 에러 발생

solution 2

구글링 결과 전체적으로 순환 의존성 문제가 발생하는 지점을 확인하니 stylus 패키지에서 발생하는 부분으로 확인

⇒ 최신 버젼의 stylus 패키지의 경우 이를 해결하였고 이는 최신 버젼 HEXO에서는 마찬가지로 문제 해결 되었음 (V4.1 이상의 경우)

하지만 계속해서 문제가 발생해서 포기할 쯔음(annoying but work 부분이기 때문에) 구글링으로 문제 해결 방법 찾음!

# target에서 발생하는 에러에 대해 자세한 추적 가능
$ node --trace-warnings <target>

이를 통해 node_modules에 있는 stylus/lib/nodes/index.js

// node_modules/stylus/lib/nodes/index.js

exports.lineno = null;
exports.column = null;
exports.filename = null;

/*
해당 코드가 있는지 확인! 
있다면 stylus는 내부 순환 참조 문제를 일으키지 않는다
*/

# 문제 발생 지점 확인
$ node --trace-warnings node_modules/nib

=> Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency

# 여기서 내부 순환 참조 문제 발생하는 것 확인 

# 즉, nib에서 참조하는 stylus 패키지는 구버젼이 적용되어서 발생하는 문제

(trouble shooting)

# node_modules/nib/node_modules/stylus/lib/nodes/index.js

위의 파일을 확인해보면 위와 같은 순환 참조문제 해결하는 코드가 없는 것을 확인할 수 있다(v0.54.5 인 것을 확인 가능)

이를 추가해주면 문제해결!

// node_modules/nib/node_modules/stylus/lib/nodes/index.js

exports.lineno = null;
exports.column = null;
exports.filename = null;

/*
해당 코드가 있는지 확인! 
있다면 stylus는 내부 순환 참조 문제를 일으키지 않는다
*/

잘 작동한다!

[참고링크]

NodeJS 14 warnings · Issue #2534 · stylus/stylus

3. github page에 배포하기

• github repo를 만들어서 사용자계정.github.io 로 이름을 만들어 줍니다.
• 이를 연결하기 위해 저장소 주소와 연결

#_config.yml
deploy:
  type: git
  repo: https://github.com/qsoo/qsoo.github.io
  branch: master

• 배포 플러그인 설치

# git에 배포하기 위해 필요한 플러그인
$ npm install hexo-deployer-git

# 정적 리소스 배포
$ hexo deploy

# 정적 리소스 삭제
$ hexo clean

(소스를 저장해서 github 커밋을 관리하고 싶다면 따로 소스코드 저장소를 만들어줘야 한다)

⇒ hexo deploy 를 통해 업데이트시 커밋 이력이 찍히지 않아서 나중에 관리하기 어려울수도 있고 중간 작성으로 저장하고 싶다면 따로 저장소를 만들어서 저장하기!