Hugo로 정적 블로그 구축

빠른 정적 웹 사이트를 만들고 싶다면 권장합니다Hugo. Go로 작성되었으며 필요에 따라 구성하고 적용하는 데 실제로 사용됩니다. 또한 팀과 커뮤니티에서 만든 다른 항목themes을 통해 선택하거나 직접 만들 수도 있습니다.

여기에서는 Hugo로 하나의 블로그를 만드는 방법과 GitHub 및 GitHub Pages에서 호스팅 및 배포하는 방법을 몇 가지 단계로 설명합니다. 자세한 내용이 필요하면 공식Hugo docs을 방문하십시오.

시작

먼저 Homebrew을 사용하여 Hugo를 설치해야 합니다.

brew install hugo

설치된 버전 확인:

hugo version

사이트 만들기

Hugo가 설치되면 다음 명령을 사용하여 웹사이트를 만들 수 있습니다.

hugo new site your-blog-name

그런 다음 your-blog-name라는 새 폴더가 표시되고 내부를 보면 다음 트리가 표시됩니다.

원형은 hugo new 명령을 실행할 때 사용되는 프로젝트의 콘텐츠 템플릿 파일입니다.

콘텐츠는 모든 게시물과 페이지가 저장되는 곳입니다. 이 폴더의 동일한 구조는 렌더링된 사이트의 URL을 구성하는 데 사용됩니다.

데이터는 사이트 생성을 위한 추가 데이터를 저장하는 폴더입니다.

레이아웃은 테마를 사용하지 않는 경우 사이트의 템플릿이 저장되는 폴더입니다.

정적은 사이트의 모든 정적 파일을 저장합니다.

테마는 설치한 테마가 저장되는 위치입니다.

config.toml은 사이트의 기본 구성을 저장합니다.

테마 설치

이미 생성된 테마를 사용하려면 두 가지 방법이 있습니다. 기존 테마를 확인하려면 각 테마의 데모를 볼 수 있는 공식Hugo themes 웹사이트를 방문하세요.

먼저 프로젝트 내에서 git repo를 초기화해야 합니다.

cd your-blog-name;\
git init;

그런 다음 themes 폴더 안에 리포지토리를 복제할 수 있습니다.

git clone https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend

변경하지 않으려면 테마를 git 하위 모듈로 포함하는 것이 좋으며 사용 가능한 경우 새 업데이트를 받을 수 있습니다. 다음과 같이 하세요:

git submodule add https://github.com/panr/hugo-theme-hello-friend.git themes/hello-friend

콘텐츠 만들기

첫 번째 블로그 게시물을 생성하려면 명령hugo new을 사용하고 원하는 경로를 설정할 수 있습니다(필자의 경우posts).

hugo new posts/my-first-post.md

다음 파일을 얻을 수 있습니다.


첫 번째 섹션은 매개변수용이고 두 번째 섹션은 이 경우 마크다운의 콘텐츠용입니다. 이 Markdown Cheatsheet 빠른 참조 및 쇼케이스를 확인하십시오.

사이트 운영

게시물을 만든 후에는 hugo server 명령을 사용하여 사이트를 구축할 수 있습니다. 플래그-D는 렌더링 초안용입니다.

hugo server -D

그러면 렌더링 로그가 표시되고 마지막에 다음과 유사한 메시지가 표시됩니다.

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)

URL을 브라우저에 복사하면 사이트가 실행되는 것을 볼 수 있습니다!

GitHub의 호스트

사용자/조직 페이지https://<USERNAME|ORGANIZATION>.github.io/를 사용하겠습니다.

GitHub에서 <YOUR-PROJECT> 리포지토리를 생성합니다. 이 저장소에는 Hugo의 콘텐츠 및 기타 소스 파일이 포함됩니다.
<USERNAME>.github.io GitHub 저장소를 생성합니다. Hugo 웹 사이트의 완전히 렌더링된 버전을 포함할 저장소입니다.

git clone https://github.com/<USERNAME>/<YOUR-PROJECT>
cd <YOUR-PROJECT>

명령hugo server을 사용하거나 테마hugo server -t <THEME_NAME>를 사용하는 경우 웹 사이트를 로컬에서 실행합니다. 액세스하려면 콘솔의 지침을 따르십시오. 웹 서버는 http://localhost:1313/에서 사용할 수 있어야 합니다.

마지막으로 사이트를 재생성한 후 웹사이트를 업데이트하려면 <USERNAME>.github.io 폴더 안에 public 저장소를 git 하위 모듈로 추가해야 합니다.

git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public

RSA 쌍 키를 구성하지 않은 경우 HTTP를 통해 하위 모듈을 추가해야 합니다.

git submodule add -b master https://github.com/<USERNAME>/<USERNAME>.github.io.git public

다음 단계를 자동화하려면 deploy.sh에 저장할 수 있습니다. 다음을 사용하여 실행 가능하게 만드는 것을 잊지 마십시오.

chmod +x deploy.sh

배포.sh

#!/bin/bash

echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`

# Go To Public folder
cd public
# Add changes to git.
git add .

# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
  then msg="$1"
fi
git commit -m "$msg"

# Push source and build repos.
git push origin master

# Come Back up to the Project Root
cd ..

도움이 되었기를 바라며 의견, 질문 또는 제안이 있는 경우 여기에 댓글을 달거나 내 소셜 미디어에서 저에게 연락하십시오.