hexo

hexo로 blog만들기

,

1. 필수 파일 설치

  • git 다운로드

    • 다운로드 후 설치가 잘 됐는지 확인하자!(cmd관리자로 확인!)

      1
      $ git --version

  • node 다운로드

    • 다운로드 후 설치가 잘 됐는지 확인하자!
    1
    $ node -v

  • git과 node를 설치 했다면 cmd창으로 hexo를 설치하자

    • hexo는 npm을 통해서 설치가능
1
$ npm install -g hexo-cli

  • 위는 window 환경에 최적화가 되었지 않아 발생 것 입니다.
  • 신경 쓰지 않고 진행하자!

2. git 설정

  • 자신의 git 아이디에 blog용 저장소(Repositories)를 생성합니다.
    • blog용 repo는 자신의 아이디(username) 뒤에 .github.io를 붙여서 생성(ex. bangilwoo.github.io)
  • git bash 실행합니다.
    • 이 작업은 처음 한번만 실행(hexo와 git을 연결)
1
2
git config --global user.name 계정명
git config --global user.email 사용자 이메일

3. blog 만들기

  • cmd창을 열어서 blog폴더를 생성하기 위한 경로를 지정합니다.(자신이 편하게 이용하는 위치)
    • 위치를 지정할 때는 주로 사용되는 용어를 몇개 알아보자!
      • dir: 현재 지정한 위치의 폴더들을 확인할 수 있습니다.
      • cd 디렉토리명: 현재 경로에서 다음 경로를 추가합니다.(ex. cd Documents를 입력하면 Documents가 지정, 뒤로 가려면 cd ..를 입력)

폴더를 생성합니다.

1
2
mkdir makeblog # 폴더 생성 명령어
cd makeblog # 생성한 폴더로 위치 지정

임의의 blog 파일을 만듭니다.

1
2
hexo init myblog
cd myblog
  • npm 설치한다.
1
npm install

  • hexo-deployer-git 플러그인 설치합니다.

  • hexo 블로그를 github에 배포할 때 필요한 플러그인을 설치합니다.

1
npm install hexo-deployer-git --save

  • 위는 추후 9버전을 사용할 수 없다는 경고입니다.
  • 설치를 진행하자!
1
ERROR Deployer not found: git

  • 위의 Error가 발생하면 hexo-deployer-git을 실행하자!

  • _config.yml파일 설정

    • 방금 만든 blog파일로 이동하여 _config.yml을 실행합니다.
    • 정보를 수정(아래에 나온 목록들을 수정하자!)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    title: 블로그 제목
    subtitle: 블로그 부제목
    description: 블로그 설명
    author: 블로그 사용자 이름

    url: https://bangilwoo.github.io # 자신의 사이트 주소

    # Deployment
    deploy:
      type: git
      repo: https://github.com/bangilwoo/bangilwoo.github.io.git # 자신의 repo 주소
      branch: main

    4. github 배포

  • 배포를 하기전에 blog에 자료를 업로드 합니다.

1
hexo generate
  • 업로드 후 파일이 잘 올라 갔는지 확인합니다.
    • 업로드가 잘 되었다면 블로그 화면이 출력
      1
      2
      hexo server
      hexo server -o
  • hexo server는 localhost:4000 주소에 블로그 환경을 보여 줍니다.
    • hexo server -o는 자동으로 localhost:4000로 창을 열어 줍니다.

github에 배포를 진행합니다.

  • 아래의 두 명령어는 동일하게 작동
1
2
hexo deploy --generate
hexo generate --deploy
  • 배포를 완료 했다면 브라우저(browser)에 username.github.io로 접속해 정상적으로 blog가 열리는지 확인합니다.

주의 사항

deploy를 진행 하였으나 업로드가 정상적으로 진행 되지 않는 경우가 발생할 경우 clean 작업 후 배포하면 해결됩니다. 

1
2
hexo clean
hexo deploy --generate

5. Theme 설정

hexo에서 가장 많이 사용되는 ICARUS로 변경 합니다.

  • 실행 전에 _config.yml에서 theme = icarus로 변경
1
git submodule add https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus
  • 실행 후 ‘fatal: Not a git repository (or any of the parent directories): .git’과 같은 Error가 발생하면 터미널에 git init 실행
    • git repository라는 Error가 발생 하는 이유는 해당디렉토리를 사용하기 위한 초기화 작업이 진행되지 않아서 발생
  • 위의 테마 명령을 실행 한 다음 hexo server 실행
1
2
3
4
5
6
7
ERROR Package bulma-stylus is not installed.
ERROR Package hexo-component-inferno is not installed.
ERROR Package hexo-renderer-inferno is not installed.
ERROR Package inferno is not installed.
ERROR Package inferno-create-element is not installed.
ERROR Please install the missing dependencies your Hexo site root directory:
ERROR npm install --save bulma-stylus@0.8.0 hexo-component-inferno@^0.2.4 hexo-renderer-inferno@^0.1.3 inferno@^7.3.3 inferno-create-element@^7.3.3
  • 위와 같은 Error가 발생 한다면 아래의 패키지를 설치합니다.
1
2
3
4
5
6
npm install bulma-stylus
npm install hexo-component-inferno
npm install hexo-renderer-inferno
npm install inferno
npm install inferno-create-element
npm install --save bulma-stylus@0.8.0 hexo-component-inferno@^0.4.0 hexo-renderer-inferno@^0.1.3 inferno@^7.3.3 inferno-create-element@^7.3.3
  • 패키지를 설치 했다면 hexo server로 테스트를 진행하고 실행이 잘 된다면 github로 배포를 진행하면 끝 입니다.
1
2
hexo deploy --generate
hexo generate --deploy
  • 혹시 ICARUS가 아닌 다른 테마로 바꾸고 싶다면 아래의 링크로 이동해서 선택하면 됩니다.
Share