Hugo로 정적 웹사이트 시작하기 (1부)

 Hugo로 정적 웹사이트 시작하기 (1부)

1. Hugo란 무엇인가?

Hugo는 오픈 소스 정적 사이트 생성기로, 빠르고 효율적으로 웹사이트를 제작할 수 있는 도구입니다. 다른 동적 CMS와 달리 Hugo는 콘텐츠 대부분을 마크다운(Markdown) 형식으로 작성하고 HTML로 컴파일합니다. CSS와 JavaScript와 함께 번들로 묶어 웹사이트를 최적화하며, 속도와 사용 편리성에서 큰 장점을 제공합니다.

2. 정적 사이트와 동적 사이트의 차이점

정적 웹사이트는 단순한 HTML, CSS, JavaScript 파일로 구성되며 서버 측 데이터베이스와의 연결이 필요하지 않습니다. 반면 동적 웹사이트(예: WordPress)는 데이터베이스와 백엔드 코드(PHP 등)와 상호작용하며 사이트를 실시간으로 생성합니다.
Hugo의 장점:

• 빠른 로딩 속도: 정적 파일만 제공하므로 빠른 응답을 보장합니다.
• 쉬운 유지 관리: 데이터베이스나 복잡한 서버 설정이 필요하지 않아 간편합니다.

3. Hugo 설치하기

설치 환경 준비

• Windows: Chocolatey와 Homebrew를 사용해 설치 가능.
• Mac: Homebrew 사용 추천.
• Linux: 패키지 관리자를 통해 설치.

Hugo 설치 명령어 (Mac 예시)

bash코드 복사

brew install hugo

웹사이트 생성

1. Hugo를 설치한 후, 작업할 디렉터리로 이동합니다.
2. 다음 명령어를 통해 새로운 Hugo 사이트를 생성합니다.

   bash코드 복사
   hugo new site my-hugo-site
   

3. 사이트 폴더에 YAML 형식의 구성 파일이 자동 생성됩니다.

Read More

Hugo로 정적 웹사이트 시작하기 (3부)

 Hugo로 정적 웹사이트 시작하기 (3부)

5. 콘텐츠 추가 및 게시

마크다운 파일로 게시물 작성:

1. Hugo의 콘텐츠 폴더에 새 마크다운 파일을 생성합니다.

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

2. Visual Studio Code에서 해당 파일을 열고 아래와 같이 작성합니다:

   markdown
   ---
   title: "첫 번째 게시물"
   date: 2024-10-23
   draft: false
   ---
   # 첫 번째 게시물
   Hugo의 사용법을 배우는 중입니다.
   

6. Netlify로 배포하기

Netlify 설정:

1. GitHub에 Hugo 사이트 저장소를 업로드합니다.
2. Netlify에 로그인하여 GitHub 저장소를 연결합니다.
3. Hugo 빌드 명령을 추가하고, 배포를 시작합니다.

7. 마무리 및 추가 팁

정적 사이트는 유지 관리가 용이하며 빠르게 실행됩니다. Hugo는 다양한 기능을 제공하며, Netlify와 같은 무료 호스팅 서비스를 사용하면 추가 비용 없이도 사이트를 운영할 수 있습니다.

이제 Hugo와 Netlify를 활용해 나만의 웹사이트를 손쉽게 운영할 수 있습니다. 추가적인 테마 커스터마이징과 레이아웃 수정은 Hugo의 문서를 참고해 도전해 보세요!

Read More