Skip to main content
설명서에 자주 업데이트를 게시하며 이 페이지의 번역이 계속 진행 중일 수 있습니다. 최신 정보는 영어 설명서를 참조하세요.

Jekyll을 사용하여 GitHub Pages 사이트에 테마 추가

테마를 추가하고 사용자 지정하여 Jekyll 사이트를 개인 설정할 수 있습니다.

GitHub Pages는 GitHub Free 및 조직에 대한 GitHub Free가 있는 퍼블릭 리포지토리와 GitHub Pro, GitHub Team, GitHub Enterprise Cloud, GitHub Enterprise Server가 있는 퍼블릭 및 프라이빗 리포지토리에서 사용할 수 있습니다. 자세한 내용은 “GitHub 제품”을 참조하세요.

리포지토리에 대한 쓰기 권한이 있는 사용자는 Jekyll을 사용하여 GitHub Pages 사이트에 테마를 추가할 수 있습니다.

분기에서 게시하는 경우 변경 내용이 사이트의 게시 원본에 병합될 때 을 사이트에 자동으로 게시합니다. 사용자 지정 GitHub Actions 워크플로에서 게시하는 경우 워크플로가 트리거(일반적으로 기본 분기로 푸시)될 때마다 변경 내용이 게시됩니다. 변경 내용을 먼저 미리 보려면 GitHub Enterprise Cloud 대신 로컬에서 변경할 수 있습니다. 그런 다음 로컬에서 사이트를 테스트합니다. 자세한 내용은 “Jekyll을 사용하여 로컬로 GitHub Pages 사이트 테스트”를 참조하세요.

테마 추가

  1. GitHub Enterprise Cloud에서 사이트의 리포지토리로 이동합니다. 1. 사이트의 게시 원본으로 이동합니다. 자세한 내용은 "GitHub Pages 사이트에 대한 게시 원본 구성"을(를) 참조하세요.

  2. _config.yml로 이동합니다.

  3. 파일 보기의 오른쪽 위 모서리에서 을 클릭하여 파일 편집기를 엽니다.

    파일 편집 단추

    참고: 기본 파일 편집기를 사용하여 파일을 편집하고 커밋하는 대신 선택적으로 옆에 있는 드롭다운 메뉴를 클릭하고 github.dev에서 열기를 선택하여 github.dev 코드 편집기를 사용하도록 선택할 수 있습니다.

    파일 편집 버튼 드롭다운

  4. 테마 이름의 파일에 새 줄을 추가합니다.

    • 지원되는 테마를 사용하려면 테마 리포지토리의 추가 정보에서와 같이 theme: THEME-NAME을 입력하여 THEME-NAME을 테마 이름으로 바꿉니다. 지원되는 테마 목록은 GitHub Pages 사이트에서 “지원되는 테마”를 참조하세요. 구성 파일에서 지원되는 테마
    • GitHub에 호스트된 다른 Jekyll 테마를 사용하려면 테마 리포지토리의 추가 정보와 같이 remote_theme: THEME-NAME을 입력하여 THEME-NAME을 테마 이름으로 바꿉니다. 구성 파일에서 지원되지 않는 테마 1. 페이지 아래쪽에 파일에 대한 변경 내용을 설명하는 짧고 의미 있는 커밋 메시지를 입력합니다. 커밋 메시지에서 둘 이상의 작성자가 커밋의 특성을 지정할 수 있습니다. 자세한 내용은 “여러 공동 작성자와 함께 커밋 만들기”를 참조하세요. 변경 내용에 대한 메시지 커밋
  5. GitHub.com의 계정과 연결된 전자 메일 주소가 두 개 이상 있는 경우 이메일 주소 드롭다운 메뉴를 클릭하고 Git 작성자 전자 메일 주소로 사용할 전자 메일 주소를 선택합니다. 이 드롭다운 메뉴에는 확인된 이메일 주소만 표시됩니다. 이메일 주소 개인정보 보호를 사용하도록 설정한 경우 <username>@users.noreply.github.com이 기본 커밋 작성자 이메일 주소입니다. 자세한 내용은 “커밋 이메일 주소 설정”을 참조하세요. 커밋 이메일 주소 선택 1. 커밋 메시지 필드 아래에서 현재 분기 또는 새 분기에 커밋을 추가할지 여부를 결정합니다. 현재 분기가 기본 분기인 경우 커밋에 대한 새 분기를 만든 다음 끌어오기 요청을 만들도록 선택해야 합니다. 자세한 내용은 “새 끌어오기 요청 만들기”를 참조하세요. 분기 커밋 옵션 1. 파일 변경 제안을 클릭합니다. 파일 변경 제안 단추

테마의 CSS 사용자 지정

이 지침은 GitHub Pages에서 공식적으로 지원하는 테마에 가장 적합합니다. 지원되는 테마의 전체 목록은 GitHub Pages 사이트에서 “지원되는 테마”를 참조하세요.

테마의 원본 리포지토리는 테마를 사용자 지정하는 데 도움이 될 수 있습니다. 예를 들어 "Minima의 추가 정보 파일"를 참조하세요.

  1. GitHub Enterprise Cloud에서 사이트의 리포지토리로 이동합니다. 1. 사이트의 게시 원본으로 이동합니다. 자세한 내용은 "GitHub Pages 사이트에 대한 게시 원본 구성"을(를) 참조하세요.

  2. /assets/css/style.scss라는 새 파일을 만듭니다.

  3. 다음 콘텐츠를 파일의 맨 위에 추가합니다.

    ---
    ---
    
    @import "{{ site.theme }}";
    
  4. @import 줄 바로 뒤의 사용자 지정 CSS 또는 Sass(가져오기 포함)를 추가합니다.

테마의 HTML 레이아웃 사용자 지정

이 지침은 GitHub Pages에서 공식적으로 지원하는 테마에 가장 적합합니다. 지원되는 테마의 전체 목록은 GitHub Pages 사이트에서 “지원되는 테마”를 참조하세요.

테마의 원본 리포지토리는 테마를 사용자 지정하는 데 도움이 될 수 있습니다. 예를 들어 "Minima의 추가 정보 파일"를 참조하세요.

  1. GitHub에서 테마의 원본 리포지토리로 이동합니다. 예를 들어 Minima의 원본 리포지토리는 https://github.com/jekyll/minima 입니다.
  2. _layouts 폴더에서 테마의 default.html 파일로 이동합니다.
  3. 파일 콘텐츠를 복사합니다.
  4. GitHub Enterprise Cloud에서 사이트의 리포지토리로 이동합니다. 1. 사이트의 게시 원본으로 이동합니다. 자세한 내용은 "GitHub Pages 사이트에 대한 게시 원본 구성"을(를) 참조하세요.
  5. _layouts/default.html라는 파일을 만듭니다.
  6. 이전에 복사한 기본 레이아웃 콘텐츠를 붙여넣습니다.
  7. 원하는 대로 레이아웃을 사용자 지정합니다.

추가 참고 자료