HEXO 설치 및 테마 적용법
HEXO 설치 및 테마 적용법
소개
이번 블로그에서는 다음과 같이 Github Page와 HEXO를 사용하여
GitHub Page
- GitPage는 정적 페이지를
username.github.io로 쉽게 호스팅하도록 도와줍니다 - 자세한 소개
HEXO
- 정적 페이지를 쉽게 만들 수 있도록 도와주는 블로그 프레임워크이다.
- 자세한 소개
- 장점으로는
- npm을 사용해 간단히 설치 가능하다.
- Node.js 기반으로 매우 빠른 생성 속도를 제공한다.
- 다양한 플러그인을 지원
- Markdown의 모든 기능을 지원하기 때문에 Markdown으로 블로그 작성가능하다.
GitHub Page 사용하여 호스팅하기
- GitPage는 Github에 가입이 되어있어야 사용이 가능합니다. 그러기 위해서는 Github 회원가입 하기에서 가입을 해주시고 다음으로 넘어가주세요ㅎ
- Git Repo 생성하기
- gitPage를 만들기 위해서는
username.github.io라는 이름을 가진 Repository를 생성 해주어야 하는데 다음 사진에서 Repository name에 다음과 같이username.github.io라는 Repo를 생성해줍니다. - 다음 Public과 Private중 선택해주어야 하는데 public은 해당 Repo를 다른 사람들과 코드를 공유할 수 있게 해주는 부분이고 Private은 다른사람에게 해당 Repo를 공유하지 않는 부분입니다.
- 그 다음 ReadMe file은 추가를 해주어도 되고 안해주어도 됩니다.(저는 이부분에서 ReadMe 파일을 추가해주지 않고 생성해주었습니다. 추가하지 않으면 원하는 폴더와 git remote해주는 설명이 나옵니다.
그렇지만 처음 하시는 분들은 ReadMe파일을 생성하고 만들어 주세요~!!)
- 정적 페이지 테스트
- 위에서 생성한 repository가 정적 페이지로 잘 올라갔나 확인 해볼 차례입니다.
- 자신의 블로그 주소는
https://{userName}.github.io/입니다.{userName}부분에는 자신의 user이름을 넣어주시면 됩니다. 저의 경우는 userName이youngheakim이므로https://youngheakim.github.io/이 저의 블로그 주소가 됩니다.
Hexo 설치
주의사항
- Hexo를 설치할때 Node.js가 설치되어 있어야합니다.
- Node.js가 설치되어 있지 않다면 Node.js 설치하기로 들어가셔서 노드 LTS버전을 설치하고 진행해 주세요.
1. Hexo 클라이언트 설치
HEXO를 사용하기 위해서 npm에서 Hexo 클라이언트를 설치해야합니다.
터미널이나 CMD를 열고 다음 명령어를 입력해주세요
1
npm install hexo-cli -g
2. Hexo 블로그 폴더 생성
위의 클라이언트 설치가 완료되면 다음 코드를 순차적으로 실행하여 주세요
Hexo를 통해 폴더를 생성 (blogName 부분에 원하는 폴더 이름을 입력해주면 됩니다.)
1
hexo init blogName
위에서 만든 폴더로 이동합니다.
1
cd blogName
hexo로 만든 폴더안에서 npm을 설치하여 줍니다.
1
npm install
위의 단계를 모두 문제없이 완료하셨다면 블로그는 생성이 되었습니다.
다음의 코드를 사용하여 확인해 보시면 됩니다.
1
hexo s
실행이 완료되면
http://localhost:4000/로 접속하여 확인하시면 밑에 페이지가 나오면 성공입니다.
블로그 수정
이제 블로그를 나에게 맞게 수정하는 법을 알아보도록 하겠습니다.
위에서 만든 블로그 폴더를 열어보면 _config.yml이라는 파일이 생성되있는것을 볼 수 있습니다.
_config.yml을 열어서 기본 정보를 수정해보겠습니다.
1. site 기본정보 수정
1 | # Site |
저의 경우에는 다음과 같이 변경하였습니다.
1 | # Site |
2. URL 정보 수정
- 다음과 같은 부분을 찾아서 자신에게 맞게 URL을 변경해주어 github Page와 연결 시켜 줍니다.
url부분에http://example.com대신https://{userName}.github.io/를 넣어주면 됩니다. - permalink는 md파일을 생성시 url 뒤에 붙는 parameter를 말합니다.
1
2
3
4
5
6
7
8
9# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://example.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks - 저의 경우에는 다음과 같이 변경해주었습니다.
1
2
3
4
5
6
7
8
9# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: https://youngheakim.github.io/
root: /
permalink: :title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks3. Deploy 설정
- 다음은 해당 코드를 업데이트할 부분을 설정하여 gitpage와 연결 시켜 줄 차례입니다.
- 해당 부분을 다음과 같이 변경해 주세요
- 저희는 git과 연결해줄 것이기 떄문에 다음과 같이 type은 git으로 변경해 주고 위에서 만들어 주었던 Repo를 연결해줍니다.
- branch의 경우 저는 master 브랜치에 올릴것이기 떄문에 master라고 작성하여 주었습니다.
1
2
3
4# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: '' - 저의 경우에는 다음과 같이 변경해주었습니다.
1
2
3
4
5
6# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/YoungHeaKim/YoungHeaKim.github.io.git
branch: master - 위의 순서를 차례대로 진행하여 문제없으셨다면 성공입니다.
Github에 배포하기
- 이제 github과 헥소 블로그를 연결시켜 github로 배포를 해 볼 차례입니다.
hexo를 이용하여 정적 웹 리소스 생성 및 배포하기
hexo g는 웹 리소스를 생성해주는 코드입니다.hexo d는 github에 배포해주는 코드입니다.- 다음과 같이 한번에 줄여서 사용 가능합니다.
1
hexo g -d
다음과 같은 오류 발생 시
다음과 같은 코드를 실행하여 에러를 해결해 주세요1
ERROR Deployer not found: git
1 | npm install hexo-deployer-git --save |
hexo블로그 gitpage로 블로그 설정 완료
- 여기까지 성공하셨다면
https://{userName}.github.io/로 접속하여 hexo페이지가 나온다면 블로그와 gitPage 연동이 완료된 것 입니다.
HEXO 설치 및 테마 적용법
