Syshin

Hugo 블로그 생성 연습

5 min read

Summary

기존 Jekyll 기반 블로그에서 Hugo 기반 블로그로 전환하기 전, Hugo를 실습하며 익히는 과정을 정리한 노트이다. Hugo 설치, 테마 적용, 설정 방법, 그리고 Jekyll과의 차이점을 다루며 마이그레이션 준비를 한다.

Intro:

기존 Jekyll기반 블로그에서 Hugo기반 블로그로 전환 이전에 Hugo를 어느정도 다뤄보고 이전하는것이 좋을것 같아 이것저것 만져보려고 한다.

일단은 Hugo 메인 페이지에 있는 Quickstart를 따라해보고, Docs를 읽어보는것으로 시작해보자

Quickstart

Prerequisites

  1. Hugo
  2. Git

Hugo extended edition for MacOS

brew install hugo

시행착오

나는 hugoplate 템플렛을 골라서 진행하고자 했었다

템플릿 README에도 Quickstart 방법이 설명되어 있지만, npm을 사용한 커스텀 스크립트를 사용하길래 일단은 정식 Hugo 시작방법을 따라가보았다. 정석대로 진행해보고 문제가 생긴다면 ReadMe를 따라해볼 생각이다.

hugo new site quickstart
cd quickstart
git submodule add https://github.com/zeon-studio/hugoplate
hugo server

문제가 생겼지만 일단은 http://localhost:1313/ 에 띄워졌다고 한다. 가보자

망할. 오류를 살펴보자

WARN  found no layout file for "html" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN  found no layout file for "html" for kind "home": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

휴고가 특정 페이지 유형을 렌더링하기 위한 레이아웃 파일을 찾지 못했음을 나타내고 있다

  1. “found no layout file for ‘html’ for kind ‘taxonomy’”: 휴고가 분류 페이지(카테고리나 태그와 같은)를 렌더링하기 위한 레이아웃 파일을 찾고 있으나 찾지 못했다는 것을 나타낸다. 분류 페이지는 특정 태그를 가진 모든 게시물과 같이 자동으로 생성되는 컨텐츠 목록이다.

  2. “found no layout file for ‘html’ for kind ‘home’”: 휴고가 사이트 홈페이지를 위한 레이아웃 파일을 찾지 못했다는 것을 나타낸다.

vscode에서 열어 살펴보자

파일 구조를 살표보니 아주 개판이다. layouts 폴더가 submodule로 클론한 hugoplate안에도 있고 밖에도 있다. 연습용이니 일단은 quickstart대로 다시 따라해보자

템플릿 submodule 제거, quickstart에 예시로 있는 theme submodule로 추가

rm -rf hugoplate

시작하기

 
hugo new site quickstart
cd quickstart
 
 
 
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

hugo.toml 설정 파일에 theme 추가

echo "theme = 'ananke'" >> hugo.toml

run server

hugo server

http://localhost:1313 로 가보자

새 포스트 추가하기

hugo new content posts/my-first-post.md

기존 terminal은 server가 돌아가고 있기 때문에 새로운 terminal로 진행했다

편집기 content/posts 에 새로 생긴 my-first-post.md파일을 열어 아래 내용을 추가해주자

---
 
title: "My First Post"
 
date: 2022-11-20T09:03:20-08:00
 
draft: true
 
---
 
## Introduction
This is **bold** text, and this is *emphasized* text.
 
Visit the [Hugo](https://gohugo.io) website!

적용!!

hugo server --buildDrafts 
hugo server -D

새로운 port로 여는것 확인. 기존에 실행되고 있던 터미널은 없애주자..

환경 설정

hugo.toml파일에서 환경설정

Publish

hugo

기존에 만든 포스트가 안보인다면 content/posts/my-first-post.md 설정에 drafts: True가 설정되어있어서 그렇다. 이의 경우 hugo server -D를 실행해야만 보이고, drafts:True를 빼준다면 그냥 실행해도 보이는 것을 확인할 수 있다

Graph View