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

Hugo는 가장 인기 있는 오픈 소스 정적 사이트 생성기 중 하나입니다. 개발자는 Hugo 커뮤니티에서 사용할 많은 테마( https://themes.gohugo.io/ )를 만듭니다. 다음은 이러한 테마를 Hugo 사이트에 추가하는 방법에 대한 빠른 가이드입니다.

휴고 설치



macOS, Windows, Linux, OpenBSD, FreeBSD 및 GO(AKA Golang) 컴파일러 도구 체인을 실행할 수 있는 모든 시스템에 Hugo를 설치할 수 있습니다.

Here's the official installation guide: https://gohugo.io/getting-started/installing/



Chocolatey를 통해 Windows에 Extended Hugo 설치:




choco install hugo-extended -confirm


확장 버전은 Sass/SCSS 기능만 있습니다.
  • 설치 후 Hugo 버전을 확인하여 특정 테마에 적합한 버전이 있는지 확인하십시오. 경우에 따라 일부 테마가 완벽하게 작동하려면 확장 버전을 설치해야 할 수도 있습니다. 그러니 이것도 잘 지켜보세요.

  • Hugo 버전을 확인하려면 다음을 실행하십시오.

    hugo version
    


    새 Hugo 사이트 만들기




    hugo new site newhugo
    


    위의 명령은 newhugo 폴더에 새로운 Hugo 프로젝트를 생성합니다.

    디렉토리의 루트 내부로 이동하려면 다음을 실행하십시오.

    cd newhugo
    


    Hugo 테마 포크



    이 자습서에서는 this theme을 사용하고 있습니다. 어쨌든 this page에서 수천 개의 테마를 찾을 수 있습니다.
  • 특정 테마를 사이트에 추가하기 전에 포크하는 것이 좋습니다. 업스트림 저장소가 삭제되더라도 포크된 테마는 삭제되지 않습니다. 따라서 테마는 유지됩니다.

  • newhugo 사이트에 포크된 테마 추가



    Before adding a git submodule, we have to initialize the git repository. So run this:



    git init
    


    Now we can add that theme as a git submodule.



    git submodule add https://github.com/apvarun/blist-hugo-theme.git themes/mytheme
    


    이제 테마가 폴더themes/mytheme에 추가됩니다.

    테마에서 콘텐츠를 복사합니다.



    테마의 exampleSite에서 우리 사이트로 모든 콘텐츠를 복사하려면 다음을 실행하십시오.

    cp -a themes/mytheme/exampleSite/. .        
    


    config.toml 파일 구성



    다음과 같이 테마 이름을 설정합니다.

    theme = "mytheme"
    


    노드 모듈 설치[필요한 경우]



    일반적으로 Hugo 테마는 PostCSS와 같은 도구를 사용하지 않는 한 노드 모듈이 필요하지 않습니다.

    Copy the package.json from the themes/mytheme, and paste it to our newhugo root folder. and run this:



    npm install
    


    휴고 사이트 운영



    빌드를 생성하려면 다음을 실행합니다(루트 폴더에서).

    hugo
    


    웹 사이트를 제공하려면 다음을 실행하십시오.

    hugo serve
    


    이렇게 하면 localhost:1313에서 페이지가 렌더링됩니다.

    좋은 웹페이지 즐겨찾기