Hugo로 초고속 정적 사이트를 구축하는 방법

게시 됨: 2021-10-26

Hugo는 백엔드 애플리케이션 및 서비스 개발에 자주 사용되는 고성능 컴파일 프로그래밍 언어인 Go(Golang이라고도 함)로 작성된 SSG(정적 사이트 생성기)입니다.

오늘날 Hugo는 몇 초 안에 대부분의 웹사이트를 생성할 수 있습니다(페이지당 <1ms). 이것이 Hugo가 스스로를 "웹사이트 구축을 위한 세계에서 가장 빠른 프레임워크"라고 자처하는 이유를 설명합니다.

이 기사에서 우리는 Hugo의 역사, 무엇이 그렇게 빠른지, 그리고 어떻게 당신만의 Hugo 정적 사이트 구축을 시작할 수 있는지 살펴볼 것입니다.

휴고란? 그리고 왜 인기가 있습니까?

Steve Francia는 원래 2013년에 Hugo 정적 사이트 생성기를 개발했으며 2015년에 Bjrn Erik Pedersen이 프로젝트의 수석 개발자로 인수했습니다. Hugo는 오픈 소스 프로젝트이므로 누구나 코드를 보고 개선할 수 있습니다.

정적 사이트 생성기인 Hugo는 Markdown 콘텐츠 파일을 가져와 테마 템플릿을 통해 실행하고 온라인으로 쉽게 배포할 수 있는 HTML 파일을 내보냅니다. 이 모든 작업을 매우 빠르게 수행합니다.

2021년에는 수백은 아니더라도 수십 개의 정적 생성기가 있습니다. 모든 정적 사이트 생성기에는 매력이 있습니다. Jekyll은 Ruby 개발자들 사이에서 인기가 있으며 다른 옵션만큼 빠르지는 않지만 널리 채택된 최초의 정적 사이트 생성기 중 하나였습니다. Gatsby는 기능이 동적인 정적으로 배포 가능한 사이트를 개발하는 데 적합한 또 다른 인기 있는 SSG입니다.

그렇다면 SSG가 너무 많은 가운데 Hugo가 눈에 띄는 이유는 무엇입니까?

Hugo는 스스로를 '웹사이트 구축을 위한 세계에서 가장 빠른 프레임워크'라고 자칭합니다 ️ 정적 사이트를 빠르게 구축하는 방법을 찾고 있다면 여기에서 시작하세요 ️ 트윗하려면 클릭

휴고는 빠르다

원시 성능 측면에서 Hugo는 세계 최고의 정적 사이트 생성기입니다. Forestry에서는 Jekyll과 비교하여 Hugo가 35배 더 빠른 것으로 나타났습니다. 마찬가지로 Hugo는 10,000페이지 분량의 사이트를 10초 만에 렌더링할 수 있습니다. Gatsby가 완료하는 데 30분 이상이 걸리는 작업입니다. Hugo는 빌드 시간 면에서 가장 빠른 SSG일 뿐만 아니라 설치도 빠릅니다.

Hugo는 패키지 관리자를 사용하여 종속성을 설치해야 하는 Jekyll, Gatsby 및 기타 SSG와 달리 독립 실행 파일로 제공됩니다. 즉, 소프트웨어 종속성에 대해 걱정할 필요 없이 즉시 Hugo를 다운로드하고 사용할 수 있습니다.

템플릿은 Hugo에서 쉽습니다.

SSG 용어에서 "템플릿"은 HTML 페이지 내에 동적 콘텐츠 삽입을 위한 자리 표시자를 추가하는 프로세스를 나타냅니다. 페이지 제목에 액세스하려면 {{ .Title }} 변수를 사용할 수 있습니다. 따라서 Hugo HTML 템플릿 내에서 다음과 같이 H1 태그로 래핑된 {{ .Title }} 을 보는 것이 일반적입니다.

 <h1>{{ .Title }}</h1>

빌드 시 Hugo는 자동으로 콘텐츠 파일 내의 제목을 잡고 두 <h1> 태그 사이에 제목을 삽입합니다. Hugo에는 다양한 템플릿 변수가 내장되어 있으며 빌드 시 데이터를 처리하는 사용자 정의 함수를 작성할 수도 있습니다. 템플릿을 위해 Hugo는 Go의 내장 html/template 및 text/template 라이브러리를 사용합니다. 이것은 Hugo가 템플릿을 위해 타사 라이브러리를 설치할 필요가 없기 때문에 애플리케이션 팽창을 줄이는 데 도움이 됩니다.

다음은 인기 있는 Ananke 테마의 index.html 홈페이지 템플릿의 예입니다. 보시다시피 몇 가지 추가 템플릿 코드가 있는 표준 HTML 파일과 유사합니다.

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

휴고 설치 방법

Hugo는 컴파일된 실행 파일로 제공되므로 시작하기 위해 많은 종속성을 다운로드하고 관리할 필요가 없습니다. macOS, Windows 및 Linux에서 사용할 수 있습니다.

macOS 및 Linux에 Hugo를 설치하는 방법

macOS 및 Linux에 권장되는 설치 방법에는 응용 프로그램 설치 및 업데이트를 위한 패키지 관리자인 Homebrew가 필요합니다. Homebrew가 아직 설치되지 않은 경우 터미널에서 아래 명령을 실행하여 설치할 수 있습니다.

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

Homebrew가 설치된 후 아래 명령을 실행하여 Hugo를 설치합니다.

 brew install hugo

Windows에 Hugo를 설치하는 방법

Windows 사용자의 경우, Chocolatey 또는 Scoop 패키지 관리자를 사용하여 Hugo를 설치할 수 있습니다. Chocolatey 및 Scoop 설치 지침은 Homebrew보다 약간 더 복잡하므로 여기와 여기에서 공식 문서 페이지를 참조하는 것이 좋습니다.

Chocolatey 또는 Scoop를 설치한 후 다음 명령 중 하나를 사용하여 Hugo를 설치할 수 있습니다(패키지 관리자에 따라 다름).

 choco install hugo-extended -confirm

 scoop install hugo-extended

Hugo가 올바르게 설치되었는지 확인하는 방법

Hugo가 올바르게 설치되었는지 확인하려면 다음 명령을 실행하십시오.

 hugo version

이 터미널 명령은 다음과 같이 현재 설치된 Hugo 버전에 대한 정보를 출력해야 합니다.

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Hugo 명령 및 구성

Hugo를 사용하여 정적 사이트를 생성하기 전에 Hugo의 다양한 CLI 명령 및 구성 파일 매개변수에 대해 알아보겠습니다.

Hugo CLI 명령

hugo check – 다양한 검증 체크 실행
Hugo hugo config – Hugo 사이트에 대한 구성을 표시합니다.
hugo convert – 콘텐츠를 다른 형식으로 변환
hugo deploy – 사이트를 클라우드 제공업체에 배포합니다.
Hugo hugo env – Hugo 버전 및 환경 정보를 표시합니다.
hugo gen – 다양한 발전기에 대한 액세스 제공
hugo help – 명령에 대한 정보를 표시합니다.
hugo import – 다른 위치에서 사이트를 가져올 수 있습니다.
hugo list – 다양한 콘텐츠 유형의 목록을 표시합니다.
hugo mod – 다양한 모듈 도우미에 대한 액세스 제공
hugo new – 사이트에 대한 새 콘텐츠를 만들 수 있습니다.
hugo server – 로컬 개발 서버 시작
Hugo hugo version – 현재 Hugo 버전을 표시합니다.

또한 Hugo CLI에는 일부 명령에 대한 추가 옵션을 지정하는 다양한 플래그가 있습니다. Hugo 플래그의 전체 목록(많은 플래그가 있음)을 보려면 사용 가능한 모든 플래그 목록을 표시하기 위해 hugo help 명령을 사용하는 것이 좋습니다.

Hugo 구성 파일

Hugo의 구성 파일은 YAML, TOML 및 JSON의 세 가지 형식을 지원합니다. 마찬가지로 Hugo 구성 파일은 config.yml , config.toml 또는 config.json 이며 Hugo 프로젝트의 루트 디렉터리에서 찾을 수 있습니다.

YAML 형식의 일반적인 Hugo 구성 파일은 다음과 같습니다.

 DefaultContentLanguage: en theme: - kinsta-static-site contentdir: content layoutdir: layouts publishdir: public paginate: 5 title: Kinsta Static Site description: "This is a static site generated with Hugo!" permalinks: post: :slug/ page: :slug/ tags: "tag/:slug/" author: "author/:slug/"

이전에 WordPress 또는 다른 CMS를 사용한 적이 있다면 일부 구성 옵션이 익숙할 것입니다. 예를 들어, kinsta-static-site 는 사이트 테마의 이름이고 Kinsta Static Site 는 SEO 메타 제목이며 paginate (페이지당 게시물 수)는 5 입니다.

Hugo에는 공식 Hugo 문서에서 탐색할 수 있는 수십 가지 구성 옵션이 있습니다. Hugo 사이트를 개발하는 동안 전역 구성을 변경해야 하는 경우 이 구성 파일을 편집해야 할 수 있습니다.

Hugo 사이트를 만드는 방법

이제 Hugo CLI 설치 및 사용 방법과 Hugo 구성 파일의 기본 사항을 살펴보았으므로 새로운 Hugo 사이트를 생성해 보겠습니다.

Hugo 사이트를 만들려면 아래 명령을 사용하십시오(원하는 경우 my-hugo-site 를 다른 것으로 자유롭게 변경하십시오).

 hugo new site my-hugo-site

다음으로 사이트 폴더로 이동하면 config.toml 파일, archetypes 폴더, 콘텐츠 폴더, 레이아웃 폴더, 테마 폴더, 데이터 폴더 및 정적 폴더와 같은 파일과 폴더가 표시됩니다. 각 파일과 폴더가 무엇인지 빠르게 살펴보겠습니다.

Hugo의 config.toml 파일

위에서 강조했듯이 Hugo의 기본 구성 파일에는 사이트에 대한 전역 설정이 포함되어 있습니다.

휴고의 원형 폴더

archetypes 폴더는 Markdown 형식의 콘텐츠 템플릿을 저장하는 위치입니다. 원형은 사이트에 여러 콘텐츠 형식이 있는 경우 특히 유용합니다. Hugo 원형을 사용하면 사이트의 각 콘텐츠 유형에 대한 템플릿을 만들 수 있습니다. 이렇게 하면 생성된 Markdown 파일을 필요한 모든 구성 설정으로 미리 채울 수 있습니다.

예를 들어, 팟캐스트 에피소드를 표시하기 위한 팟캐스트 콘텐츠 유형이 있는 경우 archetypes/podcast.md 에서 아래 콘텐츠로 새 원형을 생성할 수 있습니다.

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

이 팟캐스트 유형을 사용하면 아래 명령을 사용하여 새 게시물을 만들 수 있습니다.

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

이제 새로 생성된 게시물을 열면 다음과 같이 표시되어야 합니다.

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

원형이 없으면 새로 만드는 모든 게시물에 대해 머리말 매개변수를 수동으로 지정해야 합니다. 원형은 처음에는 복잡하고 불필요해 보일 수 있지만 결국에는 많은 시간을 절약할 수 있습니다.

휴고의 콘텐츠 폴더

콘텐츠 폴더는 실제 게시물 콘텐츠가 있는 곳입니다. Hugo는 Markdown 및 HTML 형식을 모두 지원하며 Markdown은 사용 편의성으로 인해 더 많이 사용되는 옵션입니다. 게시물의 일반적인 저장 공간일 뿐만 아니라 콘텐츠 폴더를 사용하여 게시물 콘텐츠를 추가로 정리할 수 있습니다.

Hugo는 콘텐츠 폴더의 각 최상위 디렉터리를 콘텐츠 섹션으로 취급합니다. Hugo의 콘텐츠 섹션은 WordPress의 사용자 정의 게시물 유형과 유사합니다. 예를 들어 사이트에 게시물, 페이지 및 팟캐스트가 있는 경우 콘텐츠 폴더에는 이러한 다양한 게시물 유형에 대한 콘텐츠 파일이 있는 게시물 , 페이지 및 팟캐스트 디렉토리가 있습니다.

Hugo의 레이아웃 폴더

레이아웃 폴더에는 사이트의 구조를 정의하는 HTML 파일이 포함되어 있습니다. 어떤 경우에는 레이아웃 폴더가 없는 Hugo 사이트를 볼 수 있습니다. 레이아웃 폴더가 프로젝트의 루트 디렉터리에 있을 필요가 없고 대신 테마 폴더에 있을 수 있기 때문입니다.

템플릿에 PHP를 사용하는 WordPress 테마와 유사하게 Hugo 템플릿은 Golang의 내장 html/template 및 text/template 라이브러리로 구동되는 추가 동적 템플릿이 있는 기본 HTML로 구성됩니다. 사이트의 HTML 마크업을 생성하는 데 필요한 다양한 HTML 템플릿 파일은 레이아웃 폴더에 있습니다.

휴고의 테마 폴더

템플릿 파일 및 자산을 저장하는 보다 독립적인 방법을 선호하는 사이트의 경우 Hugo는 테마 폴더를 지원합니다. Hugo 테마는 테마 디렉토리에 저장되고 테마가 작동하는 데 필요한 모든 템플릿을 포함한다는 점에서 WordPress 테마와 유사합니다.

일부 Hugo 사용자는 프로젝트의 루트 디렉토리에 테마 관련 파일을 보관하는 것을 선호하지만 이러한 파일을 테마 폴더에 저장하면 관리 및 공유가 더 쉽습니다.

휴고 데이터 폴더

Hugo의 데이터 폴더는 사이트 페이지를 생성하는 데 필요한 추가 데이터(JSON, YAML 또는 TOML 형식)를 저장할 수 있는 곳입니다. 데이터 파일은 콘텐츠 또는 템플릿 파일에 직접 저장하기 어려울 수 있는 더 큰 데이터 세트에 유용합니다.

예를 들어, 1960년부터 2020년까지의 USD 인플레이션율 목록을 생성하려는 경우 데이터를 나타내는 데 약 80줄이 필요합니다(매년 한 줄). 이 데이터를 콘텐츠나 템플릿 파일에 직접 넣는 대신 데이터 폴더에 만들고 필요한 정보로 채울 수 있습니다.

휴고 정적 폴더

Hugo의 정적 폴더는 추가 처리가 필요하지 않은 정적 자산을 저장하는 곳입니다. 정적 폴더는 일반적으로 Hugo 사용자가 이미지, 글꼴, DNS 확인 파일 등을 저장하는 위치입니다. Hugo 사이트를 생성하여 쉽게 배포할 수 있도록 폴더에 저장하면 정적 폴더에 있는 모든 파일이 그대로 복사됩니다.

JavaScript 또는 CSS 파일에 대해 언급하지 않은 이유가 궁금하다면 사이트 개발 중에 파이프라인을 통해 동적으로 처리되는 경우가 많기 때문입니다. Hugo에서 JavaScript 및 CSS 파일은 추가 처리가 필요하기 때문에 일반적으로 테마 폴더에 저장됩니다.

Hugo 사이트에 테마를 추가하는 방법

미리 만들어진 테마를 다운로드하고 설치하는 것은 Hugo를 시작하는 좋은 방법입니다. Hugo 테마는 모든 모양과 크기로 제공되며 공식 Hugo 테마 저장소에서 대부분 무료로 사용할 수 있습니다. Hugo 사이트에 인기 있는 Hyde 테마를 설치해 보겠습니다.

먼저 터미널에서 프로젝트의 테마 폴더로 이동합니다.

 cd <hugo-project-directory>/themes/

다음으로 Git을 사용하여 Hyde 테마를 프로젝트의 테마 디렉토리에 복제합니다.

 git clone https://github.com/spf13/hyde.git

다음으로 config.toml 파일에 다음 줄을 추가하여 Hyde 테마를 활성화합니다.

 theme = "hyde"

이 시점에서 Hyde 테마가 설치 및 구성됩니다. 다음 단계는 웹 브라우저에서 사이트를 보기 위해 Hugo의 내장 개발 웹 서버를 시작하는 것입니다.

Hugo 사이트를 미리 보는 방법

Hugo는 개발 목적으로 통합 웹 서버와 함께 제공됩니다. 즉, 로컬에서 사이트를 보기 위해 Nginx 또는 Apache와 같은 타사 웹 서버를 설치할 필요가 없습니다.

Hugo의 웹 서버를 시작하려면 프로젝트의 루트 디렉토리에서 아래 명령을 실행하십시오.

 hugo server -D

그런 다음 Hugo는 사이트의 페이지를 빌드하고 http://localhost:1313/ 에서 사용할 수 있도록 합니다.

웹 브라우저에서 URL을 방문하면 Hyde 테마가 있는 Hugo 사이트가 표시되어야 합니다.

하이드 테마의 휴고 사이트. — Hyde 테마로 표시되는 Hugo 사이트.

기본적으로 Hugo의 로컬 개발 서버는 변경 사항을 감시하고 사이트를 자동으로 다시 빌드합니다. Hugo의 빌드 속도가 매우 빠르기 때문에 사이트에 대한 업데이트를 거의 실시간으로 볼 수 있습니다. 이는 정적 사이트 생성기 세계에서 보기 드문 일입니다. 이를 보여주기 위해 Hugo에서 첫 번째 게시물을 만들어 보겠습니다.

Hugo 사이트에 콘텐츠를 추가하는 방법

Hugo 사이트에 콘텐츠를 추가하는 것은 WordPress 또는 Ghost와 같은 본격적인 CMS와 매우 다릅니다. Hugo에는 콘텐츠를 관리하기 위한 내장 CMS 레이어가 없습니다. 대신 적절하다고 생각되는 대로 관리하고 구성해야 합니다.

즉, Hugo에서 콘텐츠 관리를 수행하는 명시적으로 "올바른" 방법은 없습니다. 이 섹션에서 콘텐츠를 추가하고 관리하는 한 가지 방법을 공유하지만 Hugo에 익숙해지면 자유롭게 변경할 수 있습니다.

Hugo의 콘텐츠 섹션

Hugo에서 사용할 수 있는 첫 번째 콘텐츠 구성 도구는 콘텐츠 섹션입니다. Hugo의 콘텐츠 섹션은 WordPress의 게시물 유형과 유사합니다. 콘텐츠 필터로 사용할 수 있을 뿐만 아니라 사용자 지정 테마를 만들 때 식별자로 사용할 수도 있습니다.

예를 들어 블로그 콘텐츠 섹션 폴더가 있는 경우 이 폴더를 사용하여 모든 블로그 게시물을 저장하고 블로그 게시물에만 적용되는 특정 페이지 템플릿을 렌더링할 수 있습니다.

Hugo에서 게시물을 추가하는 방법

이를 염두에 두고 블로그 게시물에 대한 콘텐츠 섹션을 만들고 몇 가지 콘텐츠를 추가해 보겠습니다. 프로젝트의 콘텐츠 폴더에 posts 라는 새 폴더를 만듭니다. 이것은 콘텐츠 섹션입니다.

2021 폴더를 생성하여 포스트 폴더 안에 또 다른 조직 레이어를 생성해 보겠습니다. 이 시점에서 콘텐츠 디렉터리는 다음과 같아야 합니다.

이제 첫 번째 게시물을 작성해 보겠습니다. 앞서 논의한 바와 같이 Hugo는 콘텐츠에 대해 Markdown 및 HTML 파일을 모두 지원합니다. 일반적으로 Markdown 파일은 쓰기, 형식 지정 및 읽기가 더 쉽기 때문에 계속 사용하는 것이 좋습니다.

content/posts/2021 폴더에서 .md (Markdown 파일 확장자)로 끝나는 새 파일을 만듭니다. 파일 이름은 원하는 대로 지정할 수 있지만 Hugo 콘텐츠 파일 이름 지정에 권장되는 구문은 YYYY-MM-DD-a-sample-post.md 입니다.

콘텐츠 파일을 수동으로 만드는 것 외에도 Hugo CLI를 사용하여 아래 명령으로 새 게시물을 만들 수도 있습니다(프로젝트 디렉터리에서 명령을 실행해야 함).

 hugo new posts/2021/2021-08-30-a-sample-post.md

콘텐츠 폴더가 위의 경로에서 어떻게 누락되었는지 확인하십시오. Hugo는 모든 콘텐츠 파일이 기본적으로 콘텐츠 폴더에 들어갈 것이라고 가정하기 때문입니다.

새로 생성된 콘텐츠 파일을 열면 문서 상단에 다음과 같은 몇 줄의 메타데이터가 표시되어야 합니다.

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

YAML 형식으로 된 이 메타데이터를 "전문"이라고 합니다. 자동 생성된 앞부분은 Hugo CLI 사용의 중요한 이점 중 하나입니다. 머리말은 게시물에 대한 고유 데이터(게시물 이름, 데이터, 초안 상태, 태그, 카테고리 등)가 저장되는 곳입니다. 서론의 기본 형식은 원형을 사용하여 섹션별로 구성할 수 있습니다.

이제 게시물에 텍스트를 추가해 보겠습니다. 게시물을 작성할 때 다음과 같이 항상 콘텐츠가 머리말 아래에 있는지 확인하십시오.

콘텐츠 파일을 저장하면 터미널에서 Hugo가 사이트를 재구축하는 것을 볼 수 있습니다. 아래 스크린샷에서 Hugo가 22ms 만에 전체 사이트를 재구축한 것을 볼 수 있습니다!

웹 브라우저에서 Hugo 사이트를 방문하면 새 게시물이 표시되어야 합니다.

Hugo에서 페이지를 추가하는 방법

이제 Hugo 사이트에 게시물을 추가했으므로 페이지를 추가해 보겠습니다. WordPress를 포함한 대부분의 콘텐츠 관리 시스템은 게시물과 페이지를 구분합니다. 일반적으로 게시물은 날짜가 표시된 콘텐츠인 반면 페이지는 지속적이거나 정적인 콘텐츠로 구성됩니다.

페이지를 생성하려면 먼저 페이지 콘텐츠 섹션이 필요합니다. 이렇게 하려면 Hugo의 콘텐츠 폴더에 페이지 라는 폴더를 만듭니다. 그런 다음 아래 명령을 사용하여 사이트에 새 "정보" 페이지를 추가합니다.

 hugo new pages/about.md

페이지의 명명 규칙이 게시물과 어떻게 다른지 확인하십시오. 게시물과 달리 페이지는 특정 날짜에 묶여 있지 않으므로 파일 이름에 생성 날짜를 포함할 필요가 없습니다.

이제 "정보" 페이지에 텍스트를 추가해 보겠습니다.

이 시점에서 웹 브라우저에 정보 페이지가 표시되어야 합니다.

이제 게시물과 페이지라는 두 개의 콘텐츠 섹션이 있으므로 제목 및 설명 편집, 사이드바 메뉴에 정보 페이지 추가, 영구 링크 형식 변경 및 제거와 같이 사이트를 몇 가지 사용자 지정하는 방법을 살펴보겠습니다. 게시물 피드의 페이지.

사이트 제목 및 설명을 변경하는 방법

사이트 제목 및 설명을 변경하는 정확한 방법은 사이트 구성 및/또는 활성 테마에 따라 다릅니다. Hyde 테마의 경우 사이트 제목 및 설명은 Hugo 설정 파일( config.toml )에서 변경할 수 있습니다.

사이드바를 렌더링하는 다음 테마 코드로 인해 이를 알 수 있습니다.

 <aside class="sidebar"> <div class="container sidebar-sticky"> <div class="sidebar-about"> <a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a> <p class="lead"> {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}} </p> </div> <nav> <ul class="sidebar-nav"> <li><a href="{{ .Site.BaseURL }}">Home</a> </li> {{ range .Site.Menus.main -}} <li><a href="{{.URL}}"> {{ .Name }} </a></li> {{- end }} </ul> </nav> <p>{{ with .Site.Params.copyright }}{{.}}{{ else }} {{ now.Format "2006"}}. All rights reserved. {{end}}</p> </div> </aside>

집중해야 할 두 부분은 다음과 같습니다.

 {{ .Site.Title }}

그리고…

 {{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

핸들바 {{ }} 는 Hugo 템플릿 엔진의 일부이며 렌더링된 페이지에서 동적으로 생성된 데이터를 허용합니다. 예를 들어 {{ .Site.Title }} 은 Hugo에게 config.toml 파일을 확인하고 Title 키에 매핑된 값을 가져오도록 지시합니다.

Hugo의 기본 구성은 My New Hugo Site 를 사이트 제목으로 사용하기 때문에 사이드바에 표시되는 내용입니다. config.toml 의 사이트 제목을 다른 것으로 변경하면 변경 사항이 프런트엔드에도 반영됩니다.

계속해서 config.toml 의 title 매개변수를 My New Hugo Site 에서 Kinsta's Hugo Site 로 변경해 보겠습니다.

사이트 설명으로 이동하면 Hugo의 템플릿 엔진이 조건부 논리를 지원한다는 것을 알 수 있습니다. 일반 영어로 번역된 아래 코드는 config.toml 파일의 설명 키에 Params 값이 할당되었는지 확인하도록 Hugo에 지시합니다. 그렇지 않은 경우 대신 사용할 기본 문자열이 있습니다.

 {{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

config.toml 파일에 구성된 설명이 없기 때문에 Hugo는 기본적으로 "@mdo에서 만든 Hugo를 위한 우아한 오픈 소스 및 모바일 우선 테마. 원래 지킬을 위해 만들어졌어."

이제 다음에서 config.toml 파일을 업데이트하겠습니다.

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde"

에게:

 baseURL = "http://example.org/" languageCode = "en-us" title = "Kinsta's Hugo Site" theme = "hyde" [params] description = "Kinsta is a premium managed WordPress hosting company."

예상대로 변경 사항은 이제 프런트엔드에서도 볼 수 있습니다.

게시물 피드에서 페이지를 제거하는 방법

대부분의 블로그에서 홈페이지의 게시물 피드에는 게시물만 표시되는 것이 일반적입니다. 기본적으로 Hyde 테마에는 게시물 피드의 모든 콘텐츠 파일이 포함됩니다. 이 동작을 변경하려면 홈 페이지를 생성하는 index.html 템플릿에서 range 함수를 편집해야 합니다.

Hugo의 range 함수는 정의된 항목 집합을 반복한 다음 데이터로 작업을 수행합니다. 기본적으로 Hyde 테마의 index.html 템플릿은 .Site.RegularPages 에 걸쳐 있으며 HTML을 렌더링하기 전에 영구 링크, 게시물 제목 및 게시물 요약과 같은 데이터를 필터링합니다.

.Site.RegularPages 는 게시물과 페이지를 포함하여 Hugo의 모든 일반 페이지를 포함하므로 "정보" 페이지가 렌더링됩니다. range 항목을 .Site.RegularPages "Section" "posts" 로 변경하면 이전에 만든 게시물 폴더의 콘텐츠 파일인 게시물 섹션의 일반 페이지만 필터링하도록 Hugo에 지시할 수 있습니다.

WordPress 사이트를 위한 빠르고 안정적이며 완전히 안전한 호스팅이 필요하십니까? Kinsta는 이 모든 것과 WordPress 전문가로부터 연중무휴 24시간 세계적 수준의 지원을 제공합니다. 우리의 계획을 확인하십시오

이제 다음에서 템플릿을 편집하여 변경해 보겠습니다.

 {{ define "main" -}} <div class="posts"> {{- range .Site.RegularPages -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

이에:

 {{ define "main" -}} <div class="posts"> {{- range where .Site.RegularPages "Section" "posts" -}} <article class="post"> <h1 class="post-title"> <a href="{{ .Permalink }}">{{ .Title }}</a> </h1> <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time> {{ .Summary }} {{ if .Truncated }} <div class="read-more-link"> <a href="{{ .RelPermalink }}">Read More…</a> </div> {{ end }} </article> {{- end }} </div> {{- end }}

이 변경 사항을 적용한 후 홈 페이지에는 다음과 같은 게시물만 표시됩니다.

Hugo에서 Partial을 사용하는 방법

Hugo의 가장 강력한 템플릿 기능 중 하나는 다른 HTML 템플릿에 포함된 HTML 템플릿인 부분입니다. 부분을 사용하면 각 파일의 코드를 관리하지 않고도 여러 템플릿 파일에서 코드를 재사용할 수 있습니다.

예를 들어, 테마의 baseof.html 템플릿 파일 내에서 호출되는 별도의 부분 파일에서 다른 페이지 섹션(머리글, 바닥글 등)을 보는 것이 일반적입니다.

Ananke 테마의 baseof.html 파일 내에서 Line 18 – {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

이 경우 {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} 는 /layouts/partials 폴더에 있는 18행의 내용을 site-style.html 로 바꾸도록 Hugo에 지시합니다. /partials/site-style.html 로 이동하면 다음 코드가 표시됩니다.

 {{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }} <link rel="stylesheet" href="{{ .RelPermalink }}" > {{ end }} {{ range site.Params.custom_css }} {{ with partialCached "func/style/GetResource" . . }}{{ else }} <link rel="stylesheet" href="{{ relURL (.) }}"> {{ end }} {{ end }}

이 코드를 별도의 파일로 오프로드하여 baseof.html 템플릿 파일을 구성하고 읽기 쉽게 유지할 수 있습니다. 특히 기본 프로젝트의 경우 부분 항목이 필요하지 않지만 기능이 더 복잡한 대규모 프로젝트에 유용합니다.

Hugo에서 단축 코드를 사용하는 방법

Hugo 단축 코드는 다양한 페이지에서 코드를 재사용할 수 있다는 점에서 부분 코드와 유사합니다. 단축 코드는 /layouts/ shortcodes 폴더에 있는 HTML 파일입니다. 주요 차이점은 부분은 HTML 템플릿에 적용되는 반면 단축 코드는 Markdown 콘텐츠 페이지에 적용된다는 것입니다.

Hugo에서 단축 코드를 사용하면 각 페이지의 코드 변경을 관리하지 않고도 사이트의 페이지에서 사용할 수 있는 기능 모듈을 개발할 수 있습니다.

블로그를 운영하는 경우 게시물의 본문 내용을 살펴보고 연도 참조를 현재 연도로 업데이트해야 할 수 있습니다. 사이트에 있는 게시물 수에 따라 이 작업은 시간이 오래 걸릴 수 있습니다!

콘텐츠 파일에 Hugo 단축 코드를 사용하면 연도 참조를 다시 업데이트하는 것에 대해 걱정할 필요가 없습니다!

아래 내용으로 /layouts/shortcodes/current_year.html 에 단축 코드를 만드는 것으로 시작하겠습니다.

 {{ now.Format "2006" }}

{{< shortcode_name >}} 구문을 사용하여 짧은 코드를 게시물에 포함할 수 있습니다. 우리의 경우 다음과 같이 {{< shortcode_name >}} 를 사용하여 current_year.html 단축 코드를 호출할 수 있습니다.

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true --- This post was created in the year {{< current_year >}}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu. Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

웹 브라우저에서 게시물을 보면 다음과 같이 게시물의 첫 번째 줄에 현재 연도가 표시되어야 합니다.

Hugo에서 게시물에 이미지를 추가하는 방법

WordPress 및 기타 본격적인 콘텐츠 관리 시스템과 달리 Hugo에는 이미지 관리를 위한 끌어서 놓기 시스템이 포함되어 있지 않습니다. 따라서 이미지 관리 시스템 설계는 최종 사용자에게 맡겨집니다.

Hugo에는 이미지를 관리하는 표준화된 방법이 없지만 널리 사용되는 방법 중 하나는 /static 폴더에 이미지를 저장하고 단축 코드를 사용하여 게시물과 페이지에서 이미지를 참조하는 것입니다. Hugo에서 기본 이미지 구성을 수행하는 방법을 살펴보겠습니다.

가장 먼저 해야 할 일은 이미지 라이브러리의 조직 구조를 만드는 것입니다. 복잡하게 들리지만 /static 폴더 내에 몇 개의 추가 디렉토리를 생성하기만 하면 됩니다.

/static 에 업로드 폴더를 만드는 것부터 시작하겠습니다. 업로드 폴더 내에서 2021년에 업로드된 모든 이미지를 저장할 2021 이라는 폴더를 만듭니다.

다음으로 2021 폴더에 두 개의 이미지( blue1.jpg 및 blue2.jpg )를 추가해 보겠습니다.

HTML에서 이미지는 <img> 태그를 사용하여 표시됩니다. 예를 들어 blue1.jpg 를 표시하려면 아래 HTML을 사용할 수 있습니다.

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

이 HTML을 Markdown 콘텐츠 파일에 직접 추가할 수 있지만 업로드 폴더의 이미지를 표시하는 데 사용할 수 있는 단축 코드를 만드는 것이 좋습니다. 이렇게 하면 img 태그를 업데이트해야 하는 경우 img 태그의 각 인스턴스를 편집하지 않고도 단축 코드 템플릿을 편집할 수 있습니다.

단축 코드 템플릿을 만들려면 /layouts/shortcodes/img.html 에 아래 내용으로 새 파일을 만듭니다.

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

그런 다음 블로그 게시물에 아래의 단축 코드를 추가합니다.

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

단축 코드 템플릿에서 {{ .Get "src" }} 및 {{ .Get "alt" }} 는 단축 코드를 호출할 때 src< 및 alt< 매개변수의 내용을 가져오도록 Hugo에 지시합니다.

이제 블로그 게시물을 다시 로드하면 다음과 같은 이미지가 표시되어야 합니다.

Hugo 사이트를 배포하는 방법

이 게시물까지 Hugo를 설치하고, 사이트를 만들고, 테마를 추가하고, 구성 파일을 기본적으로 편집하고, 부분 및 단축 코드를 사용하여 사이트의 기능을 확장하는 방법을 배웠습니다. 이 시점에서 온라인으로 배포할 준비가 된 기능적인 사이트가 있어야 합니다.

Hugo는 정적 사이트 생성기이므로 웹 서버가 있는 곳이면 어디에서나 생성하는 HTML, CSS 및 JS를 배포할 수 있습니다. 정적 사이트를 제공하기 위한 기술 요구 사항이 매우 낮기 때문에 Netlify, Vercel, Cloudflare Pages 등과 같은 다양한 제공업체에서 무료로 호스팅할 수 있습니다.

이전에는 hugo server -D 를 사용하여 로컬 개발 서버를 가동하여 실시간으로 사이트의 변경 사항을 미리 볼 수 있었습니다. 사이트를 완전히 생성하려면 프로젝트의 루트 디렉토리에서 hugo 명령을 사용할 수 있습니다. 사이트 생성이 완료되면 프로젝트 디렉토리에 새 공용 폴더가 표시되어야 합니다. 이 폴더 안에는 서버나 Amazon S3와 같은 클라우드 스토리지 서비스에 업로드해야 하는 모든 파일이 있습니다.

사이트를 로컬로 생성하고 이를 Amazon S3 또는 Nginx를 실행하는 서버에 수동으로 업로드하는 것은 정적으로 생성된 사이트를 배포하는 한 가지 방법입니다. 그러나 변경할 때마다 새 파일을 수동으로 업로드해야 하므로 가장 효율적이지 않습니다.

대신 더 나은 옵션은 Hugo 프로젝트 폴더를 GitHub 리포지토리에 연결하고 GitHub 리포지토리를 Netlify와 같은 자동화된 배포 서비스에 연결하는 것입니다. 이 설정을 사용하면 사이트를 편집하고, 변경 사항을 GitHub에 푸시하고, 수동 개입 없이 Netlify에서 새 빌드 및 배포를 트리거할 수 있습니다. 이제 이 모든 작업을 수행하는 방법을 살펴보겠습니다.

GitHub에 Hugo 프로젝트를 업로드하는 방법

먼저 프로젝트에 대한 GitHub 리포지토리를 만들어야 합니다. 이렇게 하려면 GitHub 계정을 만들고(아직 계정이 없는 경우) 공식 GitHub 데스크톱 앱을 다운로드합니다. GitHub 앱을 설치한 후 메뉴 표시줄에서 파일 을 클릭하고 New Repository 를 선택합니다. 리포지토리에 원하는 이름을 지정하고 다른 옵션은 현재 기본 상태로 두고 Create Repository 를 클릭합니다.

기본적으로(macOS에서) GitHub 앱은 /Users/username/Documents/GitHub 에 새 리포지토리를 만듭니다. 저장소 이름을 my-hugo-site 로 지정했기 때문에 저장소는 /Users/brianli/Documents/GitHub/my-hugo-site 에서 찾을 수 있습니다.

그런 다음 원본 프로젝트 폴더의 모든 파일을 새 GitHub 리포지토리 폴더로 이동합니다. GitHub에 해당 폴더를 업로드할 필요가 없으므로 공용 폴더를 삭제해야 합니다.

GitHub 앱으로 다시 이동하면 이제 변경된 파일 목록이 표시됩니다. GitHub에 리포지토리를 업로드하려면 요약을 추가하고 Commit to main 을 클릭한 다음 오른쪽 상단에서 Publish Repository 를 클릭합니다.

기본적으로 "이 코드를 비공개로 유지" 옵션이 선택되어 있습니다. If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

고르다 — Select “GitHub” for continuous deployment.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Hugo는 매우 빠른 정적 사이트 생성기이기 때문에 배포는 기본 사이트의 경우 몇 초 밖에 걸리지 않습니다. 배포가 완료되면 Netlify 대시보드에서 스테이징 URL을 볼 수 있습니다. URL을 클릭하여 배포된 사이트를 봅니다.

다음은 Netlify의 Hugo 사이트입니다. 보시다시피 로컬 환경의 사이트와 동일합니다.

이 시점에서 Netlify 호스팅 사이트에 대한 사용자 지정 도메인 및 SSL 인증서를 설정할 수 있습니다. 그렇게 하려면 공식 Netlify 설명서를 참조하는 것이 좋습니다.

Netlify를 GitHub에 연결했기 때문에 Hugo 프로젝트 GitHub 리포지토리에 대한 새로운 커밋이 자동으로 Netlify에 대한 새 배포를 트리거합니다!

기록적인 시간에 정적 사이트를 구축할 준비가 되셨습니까? Hugo로 시작하세요 ️ 트윗하려면 클릭하세요

요약

Hugo는 세계에서 가장 인기 있는 정적 사이트 생성기 중 하나이며 그럴만한 이유가 있습니다. 매우 빠른 빌드 처리를 제공할 뿐만 아니라 부분 및 단축 코드를 지원하는 강력한 템플릿 기능도 함께 제공됩니다.

이 자습서에서는 Hugo를 구성하고, 새 프로젝트를 만들고, 콘텐츠 파일을 추가하고, 테마 파일을 편집하고, 완성된 정적 사이트를 배포하는 방법을 배웠습니다. Hugo 및 사용자 정의 기능, 서론 및 CSS/JS 빌드팩과 같은 고급 기능에 대해 자세히 알아보려면 공식 Hugo 문서를 참조하는 것이 좋습니다.

Hugo 및 기타 정적 사이트 생성기에 대해 어떻게 생각하십니까? 아래 댓글로 알려주세요!