휴고 설치부터 실행, 웹사이트 제작 초보자를 위한 가이드

메모

안내 가이드

Hugo 설치 및 환경 설정

Hugo는 정적 사이트 생성기(SSG)로 웹사이트를 빠르고 효율적으로 생성할 수 있게 도와줍니다. 이를 설치하려면 몇 가지 도구가 필요합니다. 이 글에서는 Windows에서 Hugo와 관련된 도구들을 설치하는 방법을 자세히 설명합니다.


1. Windows Terminal 설치

Windows Terminal은 Microsoft에서 제공하는 새로운 커맨드 라인 인터페이스입니다. 여러 셸(PowerShell, Command Prompt, WSL)을 하나의 창에서 사용할 수 있어 매우 편리합니다.

  • 설치 방법:
    1. Microsoft Store에서 Windows Terminal을 검색하여 설치합니다.
    2. 설치 후, 프로그램을 실행하여 PowerShell, Command Prompt, 또는 WSL을 선택할 수 있습니다.

2. Visual Studio Code 설치

Visual Studio Code(이하 VS Code)는 무료 코드 편집기로, 웹 개발과 다양한 프로그래밍 작업에 최적화된 도구입니다.

  • 설치 방법:
    1. Visual Studio Code 공식 웹사이트에 접속합니다.
    2. 다운로드 버튼을 클릭하여 운영 체제에 맞는 설치 파일을 다운로드합니다.
    3. 설치 후, VS Code를 실행하여 코드 편집을 시작할 수 있습니다.
    4. VS Code에서 필요한 확장 기능(예: Markdown Preview, GitLens 등)을 추가하여 더 효율적인 작업 환경을 만들 수 있습니다.

3. Git 설치

Git은 소스 코드 버전 관리를 위한 분산형 버전 관리 시스템입니다. 프로젝트 변경 사항을 추적하고 팀원 간에 협업을 원활하게 할 수 있게 해줍니다.

  • 설치 방법:
    1. Git 공식 웹사이트에서 최신 버전을 다운로드합니다.
    2. 설치 과정에서 기본 설정을 그대로 두고 설치를 완료합니다.
    3. 설치 후, git --version 명령어로 설치된 Git 버전을 확인할 수 있습니다.

4. Go 설치

Go는 Google에서 개발한 컴파일 언어로, 효율적이고 병렬 처리에 강점이 있는 언어입니다. Hugo는 Go 언어로 작성된 도구이므로, Hugo를 설치하기 위해서는 Go 언어가 필요합니다.

  • 설치 방법:
    1. Go 공식 웹사이트에서 최신 버전을 다운로드합니다.
    2. 설치 파일을 실행하여 Go를 설치합니다.
    3. 설치 후, go version 명령어로 Go가 제대로 설치되었는지 확인합니다.

5. Hugo 설치

이제 Hugo를 설치할 준비가 되었습니다. Hugo는 Go 언어로 작성된 정적 사이트 생성기입니다.

  • 설치 방법:
    1. Windows에서 Hugo 설치:

      • choco install hugo -confirm 명령어를 사용하여 Chocolatey 패키지 매니저를 통해 설치할 수 있습니다.
      • 설치 후, hugo version 명령어로 설치된 Hugo 버전을 확인합니다.

      참고: Hugo는 공식 Hugo GitHub 페이지에서도 설치 파일을 다운로드할 수 있습니다.

    2. macOS/Linux에서 Hugo 설치:

      • macOS에서는 brew install hugo 명령어를 사용하여 설치할 수 있습니다.
      • Linux에서는 각 배포판에 맞는 패키지 관리자를 통해 설치할 수 있습니다.

최종 확인 및 사이트 실행

  1. 사이트 생성: Hugo 설치가 완료되면, 다음 명령어를 통해 새로운 사이트를 생성할 수 있습니다.

    hugo new site mysite
    

    mysite라는 이름으로 새로운 사이트가 생성됩니다.

  2. 테마 설치: Hugo는 다양한 무료 테마를 제공합니다. Hugo Themes에서 원하는 테마를 선택하고, 테마 설치 방법을 따라 설치합니다.

  3. 사이트 빌드: Hugo로 만든 사이트는 다음 명령어로 빌드할 수 있습니다:

    hugo
    

    빌드가 완료되면, public/ 폴더 안에 정적 HTML 파일이 생성됩니다.

  4. 로컬 서버 실행: 사이트를 로컬에서 확인하려면 다음 명령어를 사용하여 로컬 서버를 실행할 수 있습니다:

    hugo server
    

    이제 브라우저에서 http://localhost:1313 주소로 웹사이트를 확인할 수 있습니다.


결론

이 과정을 따라가면 Hugo를 설치하고, Obsidian과 연동하여 웹사이트를 쉽게 만들 수 있습니다. GitHub Pages, Netlify와 같은 호스팅 서비스와 함께 사용하면 무료로 웹사이트를 운영할 수 있습니다. Hugo와 관련된 도구들을 활용해 자신만의 웹사이트를 만들어 보세요.

참조

댓글 쓰기