Hugo에서 나만의 css 수정하기

November 5, 2019
web hugo css

이 블로그를 Hugo로 만들었습니다. 만들었다기보다 minimal 테마를 적용하니 뚝딱 완성되었죠. 물론 디플로이 할 때까지 10시간 정도 삽질은 했습니다. 삽질 없이 되는 게 뭐 있을까요 ㅎㅎ…

가장 힘든 삽질 중 하나가 테마 위에 나의 css를 겹쳐 쓰는 거였습니다. 테마에서 기본적으로 적용되는 css를 제 입맛에 맞게 수정해서 쓰는 거죠. 그런데 어디에서 수정해야 하는지! 많은 검색 끝에 minimal 테마 깃허브 이슈 코너에서 겨우 찾아냈습니다.

일단 테마의 레이아웃이나 css를 수정하면 로컬 서버에서는 작동하는 것 같지만, 디플로이되면 소용없습니다. 테마를 적용할 때 git submodule을 사용했다면, 깃허브에서 해당 테마를 다이렉트로 참조해 버리니까요. 그래서 테마를 수정하지는 않도록 합니다.

나의 블로그 root에서 static 폴더에 들어가, css 폴더를 만들고 (이것은 자유) custom.css 파일(이름도 자유)을 생성합니다. 그 파일 안에 나의 맞춤형 스타일을 작성합니다.

그리고 root에 있는 핵심 파일인 config.toml에서 [params] 섹션 안에 다음과 같은 설정을 작성합니다. css = ["css/custom.css"]

그러면 디플로이 상태에서 나의 custom.css가 적용됩니다. 다만, 테마에 따라 css 우선순위가 밀릴 수 있으니 브라우저 검사기를 통해 css 적용 순서를 잘 확인하세요. 저는 css를 다음과 같이 작성했는데…

    body { 
        font-size: 1.6rem; 
    }

그런데 테마의 css body에 순위가 밀려 적용되지 않길래, 다시 이렇게 고쳐 썼습니다.

    html body { 
        font-size: 1.6rem; 
    }

그래서 1순위를 따냈습니다. 핫핫핫…

이 방법은 minimal theme에서 확인한 것으로, 다른 테마에는 적용되지 않을 수도 있다는 점 유념하시기 바랍니다. 그럼 즐거운 휴고 하세요!