[Hugo + github.io] 포트폴리오 제작하기 01

그동안 진행했던 프로젝트들을 정리하면서 필요성을 느껴 포트폴리오 제작을 시작하게 되었습니다 ✨

어떤 프레임워크를 사용할까 고민하면서, 그 종류와 각각의 장단점을 정리해 살펴봤습니다.

장점 : 페이지 구축 속도가 빠르고, 템플릿을 이용해 쉽게 웹 사이트를 만들 수 있습니다.

단점 : 다른 프레임워크에 비해 템플릿의 다양성이 적습니다.

장점 : 가장 많은 사용자를 보유하고 있으며, github의 접근성이 가장 좋습니다.

단점 : 내용 수정이 발생되면 전체를 다시 컴파일하기 때문에, 다른 프레임워크에 비해 빌드 시간이 오래걸립니다.

장점 : 기본 테마가 다양합니다.

단점 : git으로 포스트 버전관리가 안됩니다.

저는 포트폴리오 제작이 목적이기도 하고, 테마를 이용하면 간단한 정적 웹페이지를 빠르고 쉽게 만들 수 있다는 장점 때문에 Hugo를 선택하게 되었습니다.

그래서 오늘은 Hugo를 설치하고, 다운받은 테마를 적용한 웹 사이트를 구동시키는 과정까지 해보도록 하겠습니다.

homebrew를 먼저 설치해줍니다.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

homebrew를 설치했다면, hugo를 설치해줍니다.

brew install hugo

설치를 확인하려면:

hugo version

아래 명령어를 입력하여 폴더에 새로운 hugo 사이트를 생성합니다.

hugo new site quickstart

테마 목록은 theme을 참조합니다. 먼저 GitHub에서 테마를 다운로드하고 사이트 themes 디렉토리에 추가합니다.

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

사이트 구성에 테마를 추가합니다.

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

여기서 ananke 대신에 선택한 테마명을 입력하면 됩니다. new 명령을 사용하면 콘텐츠 파일을 추가할 수도 있습니다.

hugo new posts/my-first-post.md

초기 설정을 완료했다면 Hugo 서버를 구동해 사이트를 확인할 수 있습니다.

hugo server -D

localhost:1313를 통해 웹 사이트를 확인합니다. 내용을 수정하거나 새로고침하면 변경 사항을 빠르게 확인해볼 수 있습니다.

다음 포스팅에서는 만든 정적 사이트를 github.io에 빌드해보도록 하겠습니다..!

728x90

EB.Log