hugo 테마 적용하기

이번에는 hugo themes를 적용하는 방법에 대해 알아보겠다

 

https://gethugothemes.com/free-hugo-themes

40+ Best Completely Free Hugo Themes For 2024

+ 원래는 유료이지만 무료로 몇 개 풀어 놓은 테마가 있다

여기서도 마음에 드는 테마 찾아서 한 번 적용해보시길 바란다

 

 

+ 테마마다 구조가 다르다. 테마에 따라 추가적인 폴더가 있거나, 일부 폴더의 위치나 이름이 다를 수도 있다.

+ 설정이나 데이터 관리를 위해 JSON 파일을 포함하는 것도 있고, 어떤 테마는 YAML 혹은 TOML 형식의 파일만 사용하므로 테마 구조를 잘 살펴봐야 한다. 

 

 

 

 

https://themes.gohugo.io/themes/tella/

Tella

 

https://github.com/opera7133/tella?tab=readme-ov-file#install-dependencies

GitHub - opera7133/tella: Tella, A Hugo theme for Companies.

 

 

위 테마를 적용해보려고 한다.

 

 

 

 

1. 프로젝트 만들기

hugo new site tella

 

 

 

 

 

 

2. 테마 가져오는 두 가지 방법

 

테마를 복사하는 방법에는 두 가지가 있다.

 

1️⃣

$ git clone https://github.com/opera7133/tella themes/tella

 

2️⃣

$ git submodule add https://github.com/opera7133/tella.git themes/tella

 

clone이나 submodule를 사용하여 복사한다.

 

 

(위 그림은 tella 휴고 테마의 문서이다.)

 

 

 

테마 복사하기

cd tella
git init
git submodule add https://github.com/opera7133/tella.git themes/tella

 

 

 

 

 

 

 

여기서 끝나면 좋겠지만,, 여기서 끝이 아니다

종속성 설치

package.json, tailwind.config.js, postcss.congfig.js 파일을 root 폴더로 옮긴 후

npm install 명령어를 실행하라고 나와있다.

 

 

themes/tella/exampleSite 

에 package.json, postcss.config.js, tailwind.config.js 가 존재하는데 위 파일을 루트 폴더로 복사해야 한다.

 

 

 

copy themes\tella\exampleSite\package.json c:\Hugo\project\tella
copy themes\tella\exampleSite\tailwind.config.js c:\Hugo\project\tella
copy themes\tella\exampleSite\postcss.config.js c:\Hugo\project\tella

cmd에서는 이렇게 작성하면 되고, 그냥 마우스로 복사 붙여넣기 해도 된다

 

 

 

 

 

 

그러면 이렇게 루트폴더에 복사가 된다! 

 

 

 

 

npm install

루트 디렉터리에서 npm install을 해준다. 

 

 

 

 

npm install 하기 전에!

 

npm을 사용하기 위해서는 node.js를 설치해줘야 한다. 

 

https://nodejs.org/en/download/prebuilt-installer

Node.js — Download Node.js®

위 다운로드 페이지에 가서 다운로드를 받아준다.

다 기본으로 다운 받았다

 

그리고 cmd창에 들어가서

node -v

라고 입력했을 때 버전 정보가 잘 나오면 제대로 설치가 된 것이다. 

 

 

 

 

 

 

hugo.toml 설정

 

 

exampleSite > config.toml에 있는 내용을 복사하여

루트 디렉토리에 있는 hugo.toml에 붙여넣는다.

 

문서에는 config.toml파일을 복사해서 루트에 붙여넣기 하라고 하는데, 적용이 잘 안돼서 그냥 hugo.toml에 붙여넣었더니 잘 됐다!

 

 

 

여기까지 저장하고 

 

hugo server

를 하면 실행된다. 

 

위에 접속 가능한 링크가 뜬다 (http://localhost:1313/) 

1313 사용중이면 다른 포트 번호가 뜰 것이다. 

 

 

 

 

 

 

+ 테마의 예시 글, 데이터가 다 보이길 원한다면?

 

필자는 데모 사이트처럼 사진과 글이 다 보였으면 했다. 

그렇게 보이게 하려면 exampleSite에 있는 파일을 루트 디렉토리로 복사해와야 한다.

 

 

archetypes
content
data
static

을 루트 디렉토리로 복사해왔다 

글에 필요한 데이터를 복사해 온 것이다. 

 

 

 

 

 

 

 

 

examplesite를 복사해왔더니 이런식으로 테마가 잘 보였다.

이제 내가 원하는 대로 테마를 가공해서 사용하면 된다.