목차
Hexo 로 깃허브 블로그를 꾸며볼까?
IT 기술은 정말이지 계속 알아가도 모르는게 다시 나오는거 같습니다. 며칠전까지 “깃허브 블로그” 운영에 대해 다소 회의적인 시각을 가졌었는데 좀더 자세히 확인을 해보면서 대안을 찾게 되었습니다.
깃허브 블로그는 내 깃허브 계정에서 Page 라는 공간에 “정적 사이트 생성기” 를 올려서 웹을 구동하는 원리입니다. 별도의 DB 가 필요없이 Raw 데이터로 사이트를 운영할 수 있는 도구라고 볼 수 있지요.
기존에 제가 소개해 드렸던 “Jekyll(지킬)” 은 루비 기반의 정적 사이트 생성기인데, 지킬의 경우에는 내가 작성한 원본 글과 그림 파일들이 전부 나의 깃허브 저장소에 모두 “공개”가 됩니다. 따라서 이런 부분이 꺼려진다면 깃허브 블로그를 운영하는게 회의적일 수 있습니다.
반면에 “Hexo” 의 경우에는 원본 소스를 한번 더 Deploy(빌드) 를 통해 웹 페이지 파일을 생성한 후 이 파일들을 내 깃허브 페이지에 업로드하게 됩니다. 따라서 원본 소스는 별도의 “Private” 저장소에 올려놓을 수 있습니다.
물론 내 깃허브 페이지의 저장소는 “Public” 상태여서 이미지 파일이나 HTML 파일들을 누구나 다운로드 하는 것은 가능합니다. 대신에 원본 소스는 공개가 되지 않으므로 지킬과는 약간 다릅니다.
아예 Deploy 된 파일들을 공개하고 싶지 않으면 별도의 클라우드 서버를 약간의 비용을 들여서 정적 사이트 생성기를 통해 업로드 하는 방법도 존재합니다. 그런데 저 같은 경우에는 Hexo 를 설치하여 Deploy 하는 방식으로 운영하는 것도 괜찮겠다는 생각도 듭니다. (테스트로 운영해보고 추후 별도의 클라우드로 옮길지는 검토가 필요)
정적 사이트 생성기에 대해 이리저리 알아보니 나름 구미가 당기는 도구들이 있네요. 제가 웹쪽을 다뤄보지 않아서 지금까지 잘 몰랐던 부분이었는데 이번 기회에 알게 되어서 꽤나 흥미로운거 같습니다.
- Github Page + Jekyll(Ruby)
- Github Page + Hexo(Node.js)
- Github Page + Gatsby(React)
최근에 알게 된 정적 사이트 생성기 도구들과 깃허브의 조합입니다. 지킬의 경우에는 정적 사이트 생성기의 원조격인데 개발언어가 “루비”로 되어 있어서 루비에 익숙하지 않은 분들이 많아 최근에는 Hexo 나 Gatsby 등을 많이 사용하는거 같습니다.
저도 Hexo 를 알게 되어서 Hexo 로 깃허브 블로그를 꾸며 보려고 합니다. 일단 빠르고 테마도 나름 개발 및 배포가 되고 있다고 하니 이참에 Node.js 도 익힐겸 해서 한번 시도를 해봐야 겠군요.
Hexo 로 깃허브 블로그 설치시 준비사항
만약 깃허브 블로그를 처음 사용해보신다면 아래 링크 글을 참고하셔서 깃허브 계정 가입과 Git 을 다운로드 하여 설치하시기 바랍니다.
Hexo 의 경우에는 Ruby(루비) 설치를 하지 않아도 됩니다.
내 PC에 git 까지 설치를 했으면 이제 Node.js 를 다운로드 하여 설치합니다.
Node.js 는 LTS 버전을 다운로드 받아 설치하시면 됩니다. 또한 각자의 PC 환경에 맞게 다운로드 및 설치를 하심 됩니다. 저는 Windows 기반의 환경입니다.
설치가 완료되었으면 이제 Hexo 를 설치해 보겠습니다.
Hexo 설치 및 프로젝트 생성
내 PC 에서 Command 창을 실행시켜서 Hexo 를 설치 하도록 합니다. 설치는 npm 명령어로 진행합니다.
$ npm install -g hexo-cli
위와 같이 설치가 되었다면 hexo 프로젝트를 생성합니다.
$ hexo init <디렉토리명>
그러니 다음과 같은 파일들이 다운로드 됩니다.
그럼 시험삼아 위 블로그를 내 로컬 PC에서 구동시켜 볼까요?
$ hexo server
그런 다음에 웹 브라우저에서 “127.0.0.1:4000” 으로 접속해 봅니다. 그럼 위와 같이 현재 설치된 Hexo 블로그를 확인할 수 있습니다.
Hexo 에서 글쓰기
포스트 파일 생성
Hexo 로 글을 쓰려면 “마크다운” 문법 형태로 글을 작성 후 발행을 하면 과정은 기존에 제가 설명해 드렸던 Jekyll 과 유사합니다.
Jekyll 의 경우에는 블로거가 임의로 .md 파일을 형식에 맞게 생성해 줘야 하지만 Hexo 의 경우에는 명령어로 새 파일을 생성할 수 있습니다.
hexo new [layout] <포스트제목> 예) hexo new draft title1 (임시 형태로 title1 이라는 파일 생성) 예) hexo new post title2 (포스트 형태로 title2 라는 파일 생성) 예) hexo new page title3 (페이지 형태로 title3 라는 파일 생성)
포스트 발행
만약 Draft(임시) 글로 파일을 생성하고 나서 글 작성이 완료되었다면 발행을 해주면 됩니다.
hexo publish <포스트제목>
그런 다음 아래의 명령어로 생성 파일을 삭제하고 다시 생성 처리를 해 줍니다.
hexo clean hexo generate
Hexo 에서 글 배포
깃허브 저장소에 Deploy 를 위해서 “hexo-deployer-git” 을 설치합니다.
npm install hexo-deployer-git --save
npm 으로 설치를 한 다음 _config.yml 에서 depoly 환경을 아래와 같이 설정해 줍니다.
# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: <repository url> branch: [branch] message: [message]
위와 같이 _config.yml 파일을 수정한 다음에 아래와 같이 파일 생성 및 배포를 진행합니다.
hexo generate hexo deploy # hexo d -g 명령으로 동시에 진행도 가능합니다.
Hexo 테마 설치
Hexo 또한 꽤나 다양한 테마가 개발 및 배포가 되고 있습니다.
이 중에서 본인이 마음에 드는 테마를 설치하는게 가능합니다.
Hexo의 테마 중에서는 위와 같이 “icarus” 테마가 유명하고 업데이트도 잘 이뤄지는거 같습니다. 설치 절차는 아래와 같습니다.
$ npm install hexo-theme-icarus $ hexo config theme icarus
내 Hexo 파일을 내 깃허브 저장소에 Push 하기
이제 원본 파일은 내 깃허브 저장소에 Push를 하면 됩니다.
새로 위와 같이 Private 저장소를 하나 생성해 주세요.
git init git add . git commit -m "message" git branch -M main git remote add origin "내 private 깃 저장소 주소" git push -u origin main
그런 다음 위의 절차로 현재 소스를 커밋한 다음 내 Private 저장소를 remote 로 추가하여 Push 를 진행합니다. 이렇게 하면 나의 Private 저장소로 변경사항이 업로드가 됩니다.
이렇게 별도로 원본 소스를 Private 저장소에 Push 하여 관리하는게 가능합니다. 대신에 글 수정 사항이 있을 때마다 commit 및 push 를 해야 해서 다소 귀찮을 수가 있습니다.
Hexo 에서 deploy 시 커스텀 도메인 풀려버리는 문제 해결 Tip
자 이제 Hexo + 이카루스 테마를 설치 및 설정, 파일 생성 및 배포까지 진행을 하였습니다. 이제 내가 배포한 파일로 Hexo 블로그가 잘 동작하는지 확인해볼 차례인데요.
그런데 이상하게도 Deploy 만 하면 제 개인 도메인 연결이 풀려버리는 현상이 발생합니다.
제 블로그 저장소의 페이지 설정 부분인데 위의 빨간 네모에 연결된 개인 도메인 설정값이 날아가 버리는군요. 관련하여 약간의 검색을 해보니 해결책이 있습니다.
Hexo 디렉토리에서 하위 “source” 디렉토리에 “CNAME” 이라는 파일 하나를 생성합니다.
그런 다음에 CNAME 파일 안에 연결한 개인 도메인을 입력해 줍니다. 저장 한 후에 이대로 “Deploy” 를 하면 이후에는 개인 도메인 설정이 날아가지 않습니다.
