Hexo

JJ·2022년 7월 1일

Git

목록 보기
4/5

Hexo 를 통해 Github블로그 만들기

우선 Hexo 사용을 위해선 node.js가 선행으로 설치되어있어야 한다.
또한 깃허브에 username.github.io 저장소를 생성해놔야한다.

node.js를 설치하지 않았다면 nodejs.org 홈페이지에서 설치할 수 있다.

node.js를 설치했다면 터미널을 켜고 다음의 명령어를 입력한다.

$ npm install -g hexo-cli

npm는 node.js를 설치하면 함께 설치된다고 한다.
위의 명령어를 입력한다면 아래와 같이 hexo가 설치 될 것이다.

Hexo가 잘 설치되었는지 확인하고싶다면 터미널에 hexo라고 입력해보면 된다.

$ hexo

hexo를 입력하면 위와같이 뜬다.

hexo가 잘 설치 되었다면 이제 블로그를 만들 디렉토리를 잘 확인하고 다음과 같은 명령어를 입력하면 된다.

$ hexo init <folder>

그 뒤 폴더를 확인해보면 다음과 같이 여러 파일이 생성되어있다.

입력하면 위와 같이 새로운 마크다운 파일이 생성된다.

첫 포스트 파일이 생성됐다! 😊
위에 보이는 디렉토리에 있는 파일을 원하는대로 수정해주면 된다.

파일을 열어보면 title, date, tags만이 있을것이다.
이러한 것들을 Front-matter 라고 부른다고 한다.
저것들의 형식을 망가뜨리면 오류가 난다고 하니 저장하기 전 정확히 입력했는지 봐야한다.

title과 tags에 원하는 제목과 태그를 적고 저장한다.
태그를 적을 때엔 하이픈 띄어쓰기 태그명으로 작성하면 된다.

다 적고 저장했다면 터미널로 돌아가 다음의 명령어를 입력한다.

$ hexo generate

약간 git의 add 같은 느낌인 것 같다.

여기까지 완료한 후 과연 만든 페이지가 제대로 출력되는지 확인하고싶을것이다.
다음과 같은 명령어를 입력해 로컬 서버를 만들어 미리 출력물을 확인해볼 수 있다.

$ hexo server

위의 명령어를 입력하면 위처럼 http://localhost:4000/ 에서 hexo가 동작되고있다고 나온다.
http://localhost:4000/에 들어가 원하는대로 출력되는지 확인해보면 된다.
Ctrl + c를 누르면 로컬 서버가 종료된다.

만약 원하는대로 작동한다면 git에 올리기 위해 다음과 같은 명령어를 입력한다.

$ npm install hexo-deployer-git --save

위의 명령이 Hexo가 지원하는 빠르고 편한 deployment 전략인 One-Command Deployment라고 한다.
명령어 입력 후 아까 깔린 파일들 리스트를 확인한다.

위 파일들 중 _config.yml 파일을 열어 title, subtitle, description[optional], keywords[optional], author, url, 아래로 쭉 내려서 type, repo를 자신의 정보 혹은 블로그에 맞게 바꿔준다.


특히 url은 초기에 https:// 가 아닌 http://로 되어있으니 이 부분을 유의해야한다.

이제 새로운 글을 올리기 위해 다음과 같은 명령을 입력해준다.

$ hexo clean
위의 명령어는 public 폴더를 삭제하는 명령어라고 한다. 삭제하고 싶지 않다면 입력하지 않아도 된다.

$ hexo deploy
위에서 만들어놓은 포스트 파일을 게시해주는 명령어이다.

이와 같은 과정이 다 끝났다면 https://username.github.io에 들어가 글이 잘 게시됐는지 확인하면 된다.

테마 변경

만약 hexo 블로그의 테마를 바꾸고 싶다면 다음의 페이지에 들어가 원하는 테마를 골라서 바꾸면 된다.

hexo

각 테마마다 적용 방법이 약간 다르다고 한다.
원하는 테마를 골랐다면 그 테마를 클릭하여 어떻게 적용하는지 확인한다.

Next 테마의 경우에는 다음과 같은 명령어를 입력하면 된다고 한다.

$ npm install hexo-theme-next

설치해줬다면 아까 사용했던 파일인 _config.yml 파일을 열어 theme 부분을 수정해준다.

테마가 잘 적용됐는지 확인하기 위해 다시 한 번 generate 와 server 명령을 입력 후 잘 적용됐다면 deploy 하면 끝난다!

profile
신규...개발자가...되자...

0개의 댓글