본문 바로가기
블로그

개인 블로그 만들기를 위한 여정5 - hexo theme 바꾸기

by devscb 2023. 11. 9.
반응형

hexo 에서 블로그 디자인을 쉽게 바꿀 수 있는 부분이 theme 기능입니다.
제 블로그도 theme을 적용하였는데요, 어떻게 적용하는지 살펴보겠습니다.

hexo theme 둘러보기

어떤 디자인을 선정할 것인지 아래 주소에서 확인할 수 있습니다.
https://hexo.io/themes/index.html

다음과 같이 여러 theme들을 확인할 수 있고,
Visit preview site 를 누르면 해당 theme을 다운받을 수 있는 사이트가 나옵니다.

대부분은 github으로 연결됩니다

hexo theme 다운 및 설정

  1. 먼저, 사용하려는 hexo theme 의 github을 가서 주소를 복사합니다.
    이 포스트에서는 아래 테마를 사용해보겠습니다.
    https://github.com/CodeDaraW/Hacker
  2. 그다음, hexo 블로그위치의 themes 폴더에서 아래 명령어를 실행해줍니다 : git clone [git 주소]

3. 다운이 완료되었으면, 블로그가 설치된 _config.yml의 theme 부분에 theme 폴더 이름을 써 줍니다.

4. 이제, 아래 명령어로 hexo 를 실행하고, 브라우저를 켜 봅시다.

hexo server

그러면 다음과 같이 theme이 적용된 화면을 웹브라우저에서 확인할 수 있습니다.

 

theme 경우에 따라서는 아래와 같이 추가 플러그인을 설치해야하는 경우도 있습니다.
theme 마다 다르니, 각 theme의 install 가이드를 확인해주세요.

npm install hexo-render-pug hexo-renderer-stylus

총평

hexo theme이 생각보다 다양하지는 않는거 같아서 아쉽습니다.
그래서 내가 원하는 비슷한 theme을 찾고, 커스터마이징을 좀 해야하는 부분도 좀 존재하는 문제점이 존재합니다.
또한, theme 찾는것도 hexo 기본 사이트에서 카테고라이징 되어 있지 않아 탐색도 힘든거 같습니다.
theme이 적은건 다른 static blog generator들도 마찬가지인거 같은데,
theme이 가장 다양한건 bootstrap인거 같기에 내가 원하는 디자인이 없으면
"bootstrap theme"으로 구글링하고 찾아서 내가 직접 스타일링을 해야할거 같습니다.
그런데 그렇게까지 할 정도면 차라리 blog 가 아니라 general 한 사이트를 만드는 vue나 react를 고려해봐야하지 않나 싶기도 합니다.
아무튼 그래도 간편하게 theme을 적용할 수 있어서 hexo에는 거부감이 들지 않았습니다.

#blog,#블로그,#hexo,#헥소,#theme,#테마

728x90
반응형

댓글