Oranges 라는 맘에 드는 테마를 발견하여 야심찬 계획을 세우게 됐다. 몇년 전 얘기지만 Jekyll, Hexo 두 정적 웹 생성 툴을 활용하여 깃헙 블로그를 만든 적이 있었으나 게으름과 노션이라는 GOAT 툴의 등장으로 번거로운 깃 블로그는 ‘굳이?’가 되고 말았다.
그런데 생각보다 굳이 벨로그 등등 들어가서 가입하고 지지고 볶고 하기도 귀찮고 명색이 예전에 해봤는데 대충 맘에 드는 테마 하나 뽑아다 가이드 읽고 고대로 하면 되겠지ㅎ 라고 생각하기 무섭게 거진 2년만에 들여다 보는 hexo 뭉텅이가 생각보다 낯설었다. 새로 레포까지 만들어버릴까 하다가 굳이 뻥커밋은 찍기 싫어서 내용물과 히스토리만 날려버리기로 결심했다.
일단 노드부터 깔고, hexo좀 깔고, 간만에 깃 좀 만지고, 테마좀 찾고, 테마 적용 좀 하고, 첫 포스트 쓰고, 배포 좀 하면 되지^^7 로고 생각했으나 생각보다 삽질이 길어져 챗지피티와 인터넷 동문들의 도움으로 얼추 깃블로그 3차 개장한 파이프라인을 정리해보고자 한다.
node & hexo 환경설정 (macOS 기준)
정적 사이트 생성기 Hexo는 node 기반으로 돌아가므로 당연히 노드가 깔려있어야 설치가 가능하다.
homebrew로 설치하려 했으나 여러 버전이 기존에 깔려있어서 그냥 nvm(Node Version Manager) 으로 깔았다. 편하다.
1. 노드 깔려있는지 확인
1 | node -v |
2. nvm 설치
1 | curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash |
설치 후 터미널 재시작 혹은 source ~/.zshrc 로 nvm 활성화한다.
3. 원하는 버전의 node 설치
여러 버전을 동시에 설치해도 상관 없다.
1 | # 14버전 설치 |
4. 필요에 따른/내키는 버전 활성화
1 | # 14버전 사용 |
5. Hexo 설치
오래 전에 설치해두었다면 hexo version으로 확인 가능하고, 최신 버전으로 업데이트 하는 것과 설치 명령어는 같다. -g 옵션을 적용하였으므로 전역 Hexo CLI 업데이트가 가능해졌다.
1 | npm install -g hexo-cli |
설치 후 깃 블로그 루트 디렉토리로 이동한 후 프로젝트 내 Hexo 및 기타 등등들을 위한 의존성 업데이트를 진행한다.
1 | npm update |
얼추 환경설정은 끝났다. 로컬에서 미리보기 돌려서 잘 작동되는지 확인해준다.
1 | # version check |
에러 없이 잘 돌아간다면 브라우저에 들어가서 http://localhost:4000에 들어가 hexo 기본 페이지가 정상적으로 나타나는지 확인한다. 혹시 포트에러가 난다면 원하는 포트를 변경해서 지정할 수 있다.
1 | hexo server -p 5000 |
5000번 포트에서 서버를 실행할 수 있다.
새 Hexo 플젝 생성 및 포스트 작성
1. 새 Hexo 프로젝트 생성
편한 위치로 이동하여 깃 블로그로 사용할 새 Hexo 사이트를 생성&이동한다.
1 | hexo init site_name |
만약 이미 해당 디렉토리를 만들어 놓았다면 해당 위치에서 init 해버려도 된다.
1 | hexo init . |
2. 필수 패키지 설치
1 | npm install |
2.5 git 설정
당연히 git init이나 git clone 으로 깃 관련 설정은 해놨을 것으로 간주한다. git remote -v 로 원격 레포지토리에 잘 연결이 되어 있나 한 번 확인하고 넘어가자.
3. 사이트 필수 설정
Hexo 블로그 루트 디렉토리 안의 _config.yml 을 열고 url을 https://username.github.io 로 변경하여 저장한다.
4. 신규 포스트 작성
이제사 글을 작성할 수 있다. 자동으로 source/_posts 아래 .md 파일이 야무지게 생성된다. 적을 때도 마크다운으로 적으면 된다.
1 | hexo new "새로_작성할_포스트_이름" (_posts 디렉토리 외에 디렉토리 경로) |
"" 이런 따옴표들이 필수인지는 모르겠다. 추측컨데 띄어쓰기 때문인 것 같다. 난 없이 했다.
다시 한 번 미리보기로 새 포스트가 나오나 확인해보자.
1 | hexo server |
테마 설정 및 서브모듈 설정
한줄평: 그냥 똑똑한 사람들이 만들어 놓은 거 쓸걸…
1. 새 테마 찾기
여기에서 찾아보도록 하자.
2. 설치 방법 확인하기
똑똑한 사람들이 installation guide 다 써줘서 그거 보고 진행하면 된다. 혹시 내 경우처럼 git submodule 명령어가 있어도 쫄지 말고 루트 디렉토리에서 복붙하면 자동으로 서브모듈이라는 별도의 하위 레포지토리로 잘 붙어있게 된다.
나중가서 불거진 문제였지만 테마를 만든 사람의 레포지토리가 붙어버려서 내 커스텀 설정을 만들고 싶어도 원격 저장소에 push가 불가능한 문제가 생겼다. 그래서 미리 fork 해두는 것을 추천한다.
서브모듈 및 배포 설정
지금껏 작성한 것들을 정적 사이트로 뽑아내려면 빌드 명령어를 써준다.
1 | hexo generate |
로컬 서버에서 다시 미리 봐주자.
1 | hexo server |
배포 명령어는 딱 한 줄이다.
1 | hexo deploy |
이 명령을 실행하면 Hexo가 사이트를 빌드하고 미리 지정한 GitHub 저장소로 push하므로 https://username.github.io로 내가 만든 정적 블로그를 방문할 수 있다.
하지만 그 전에 해야할 게 좀 있다.
1. 배포 설정 추가_config.yml 파일 끝부분 즈음에 deploy 옵션을 손봐줘야 한다. 이걸 안 하면 배포 자체가 안 된다. 난 예전에 해봤다고 방심하다가 여러 번 실패하고 삽질을 거쳐 해당 부분을 손봐줬다.
1 | deploy: |
2. 배포를 위한 플러그인 추가
이게 없으면 hexo deploy는 소용이 없다.
1 | npm install hexo-deployer-git --save |
3. 배포 GO
나의 사이트를 Github Pages 로 배포하자.
1 | hexo deploy |
빌드 실패시
GitHub 저장소의 Action 탭에서 왜 실패했는지 확인 가능하다.
우선 _config.yml 파일의 theme에 이름이 정확하게 지정되었는지 확인하자. 이외에도 배포 설정도 확인해줘야 한다.
정적 사이트 생성에 대한 깨달음
자꾸만 소스코드를 올리는 것으로 착각하고 git pull, git push 를 하다가 계속 컨플릭트가 나서 git push origin main --force-with-lease 명령어로 해결했다. 결국 정적 사이트 파일들만 올라가는 것에 대한 전반적인 이해도가 낮아서 발생한 문제였다.
hexo generate 로 정적 파일들을 생성한 후 hexo deploy 시마다 원격 저장소에 public/ 폴더에 있는 정적 파일(html,css,js)들이 원격 저장소에 올라가는 개념이다. 그러므로 프로젝트 코드 자체를 원격 저장소에 push&pull 할 필요가 없다. 필요하다면 코드 자체 형상 관리용으로 비공개 레포를 따로 파자.
작업 순서
- 로컬에서 작업
- 로컬에서 커밋
hexo clean,hexo generate,hexo deploy