() translation by (you can also view the original English article)
지킬(Jekyll)은 정적 사이트 생성 시스템으로 데이터베이스, 보안 문제, 업데이트 및 기타 CMS 및 블로그 플랫폼과 함께 발생할 수있는 기타 문제에 대해 걱정할 필요없이 일반 텍스트 파일을 가져 와서 정교한 블로그로 변환 할 수 있습니다.
대부분의 사이트 관리 시스템과 마찬가지로 지킬 사이트에서도 테마를 사용할 수 있습니다. 그러나 현재 지킬은 당신이 익숙한 방식으로 주제를 사용하지 않습니다.
현재 지킬 테마는 자체 패키지가 설치 프로그램을 통해 적용될 필요가 없습니다. 지킬 테마를 다운로드하면 실제로 지킬 전체 사이트를 실행하는 데 필요한 모든 파일을 다운로드하게됩니다.
지킬의 향후 버전에서 변경 될 예정이지만, 지금은 지킬 테마를 다루는 방법을 알아야 할 것입니다.
이 튜토리얼에서는 처음부터 지킬 테마를 설정하는 과정을 설명합니다. 몇 가지 기본 설치 조언부터 새 테마의 기능을 익히는 방법을 단계별로 설명하고 새 사이트 설정 또는 다시 시작하는 방법에 대한 도움말을 살펴 보겠습니다. 기존의 것을 테마로합니다.
시작해 봅시다!
Jekyll on Envato Market
Envato Market의 지킬 카테고리에는 19달러에서 24달러에 이르는 다양한 테마가 있습니다. 나중에 설치를 시연하기 위해 "Writer"와 "Astro"(현재 가장 많이 팔리는 두 명의 판매자)를 사용하게 될 것입니다.
지킬 설치하기
지킬은 자신의 컴퓨터에서 오프라인으로 관리되고 정적 HTML 사이트에 구축 된 다음 배포되도록 설계되었습니다. 컨텐츠를 추가 할 때 기본 프로세스는 마크 다운 파일을 작성하고 상단 부분을 맨 위에 추가하고 파일의 나머지 부분을 컨텐츠로 채운 다음 사이트를 다시 빌드하는 것입니다.
사이트가 구축되면 FTP 또는 git 명령을 통해 원하는 방식으로 배포 할 수 있습니다. 그러나 이 튜토리얼에서는 배치에 초점을 맞추지 않을 것이므로 이 주제에 대한 자세한 내용은 지킬 문서를 참조하십시오.
오히려 우리는 컴퓨터에서 오프라인으로 발생하는 지킬 사이트 설치 프로세스 부분에 집중할 것이며,이 과정은 모두 설치로 시작됩니다.
선결 요건
지킬과 함께 일하는 것은 약간의 명령 행 사용법을 포함하지만 명령 행을 사용 해본 적이 없다면 이전에 명령 행을 사용하지 마십시오. 웹 디자인 튜토리얼 시리즈의 커맨드 라인에있는 몇 가지 항목을 살펴 보는 것이 좋습니다.
컴퓨터에서 Windows를 실행하는 경우 불행히도 지킬은 공식적으로 지원되지 않습니다. 그렇다고해서 문제를 해결할 수는 없지만 몇 가지 장애물을 뛰어 넘어야 할 수도 있습니다. Windows에서 지킬을 사용하여 실행하려면 지킬 문서에서 자세한 내용을 확인하십시오.
그렇지 않으면 Mac OS X, Linux 또는 Unix를 사용하는 경우 다음 필수 구성 요소가 설치되어 있어야 합니다.
Ruby가 설치되어 있는지 확인하려면 ruby -v 명령을 실행하십시오. Ruby Gems를 확인하려면 gem -v를 실행하십시오. 두 경우 모두 이 명령은 터미널에 반환된 번호가 표시되면 버전 번호를 확인합니다.
우리는 지킬 3.1.x와 함께 작업 할 것이므로 지킬 설치 문서 페이지에서 언급 한 것처럼 NodeJS 또는 Python을 요구하지 않을 것입니다.
지킬 설치 실행
이제 지킬을 컴퓨터에 설치하려면 다음 명령을 실행하십시오. gem install jekyll
쓰기 권한이 없다는 메시지가 표시되면 sudo로 명령을 입력하고 프롬프트가 표시되면 암호를 입력하십시오.
그러면 설치 프로세스가 실행 중임을 보여주는 터미널에 몇 줄의 내용이 인쇄됩니다. "1 gem installed"라고 말하면 끝납니다.
기본 지켈 사이트 만들기
지킬l 사이트를 신속하게 만들어 기본값, 테마 외의 상태에서 보이는 모습을 보고 파일 및 폴더 구조에 익숙해 지도록 하십시오. 사이트를 저장할 폴더를 만든 다음 폴더가 가리키는 터미널을 열고jekyll new .를 실행하십시오.
참고 : 어떤 시점에서 s 하위 폴더에 새로운 Jekyll 사이트를 만들려면 다음 명령을 사용하십시오. jekyll new subfolder_name
사이트 설정이 완료되면 터미널에 “New jekyll site installed in <path>”.라는 메시지가 표시됩니다. 이 시점에서 폴더 안에 Jekyll 사이트의 표준 내용이 표시되어야 합니다.
이제 jekyll serve명령을 실행하여 사이트를 가동시켜 오프라인으로 실행하십시오.
터미널에서 “Server running... press ctrl-c to stop”라는 메시지가 표시되면 브라우저에서 http:// localhost:4000 주소로 이동하여 기본 Jekyll 사이트를 체크 아웃 할 수 있습니다.
이제 기본 Jekyll 사이트의 파일 및 폴더 구조는 물론 테마가 적용되지 않은 상태를 보았으므로 일반적인 Jekyll 테마 다운로드에서 볼 수있는 내용을 더 잘 이해할 수 있습니다.
빠른 데모 새로운 테마
지금까지이 튜토리얼에서 이야기 한 내용에서 알 수 있듯이 Jekyll 테마에는 현재 전체 사이트를 실행하는 데 필요한 모든 파일이 있습니다. 그리고 마지막 섹션에서 보았듯이 모든 파일이 있으면 jekyll serve을 실행하면 브라우저에서 해당 사이트를 볼 수 있습니다.
이것은 당신이 새로운 지킬 테마를 다운로드 할 때 당신은 그것을 추출 할 수 있고 jekyll serve을 실행하고 완전히 기능을 가진 지킬 사이트에서 테마를 데모 할 수 있다는 것을 의미합니다. 많은 주제가 이미 포함 된 데모 컨텐츠와 함께 제공됩니다.
"Writer"및 "Astro"테마를 사용하여 몇 가지 예를 살펴 보겠습니다.
압축을 푼 후에는 지킬 사이트의 모든 파일이 들어있는 루트 폴더를 찾을 때까지 테마의 구조를 검색하십시오. 당신은 초기 Jekyll 설치에서 이 폴더를 인식 할 수 있어야 합니다. _config.yml 파일, _includes 디렉토리 등을 찾으십시오.
그런 다음 폴더 내부의 터미널을 열고 jekyll serve를 실행하십시오.
모두 성공적이면 “Server address: ”메시지가 표시되며 URL은 터미널의 끝 부분에 표시됩니다. 이 URL을 복사하여 브라우저에 붙여 넣으면 새로운 테마의 데모가 보입니다.
누락 종속성?
경우에 따라 jekyll serve를 실행하려고 하면 오류 메시지가 표시 될 수 있습니다. 이 경우 메시지가 의존성이 누락되었다는 메시지가 표시되는지 확인해야합니다. 예를 들어, 테마가 작동하기 위해 필요한 항목이 설정에서 누락되었습니다.
이 예에서는 빨간색 오류 텍스트에서 "jekyll-paginate"젬이 없음을 확인할 수 있습니다.
빠른 Google 검색을 사용하면 문제의 보석에 대한 Github 저장소를 표시하고 설치에 필요한 명령을 제공합니다.
명령을 실행하고 누락 된 종속성을 설치 한 후 jekyll serve는 테마와 함께 예상대로 실행될 수 있습니다.
데모가 로드되지 않는 경우
제공된 URL로 이동하여 사이트가 보이지 않는 경우 (예 :
... _config.yml 파일의 baseurl 값을 확인하십시오. 나중에 자세히 설명할 이 파일은 전체 사이트의 전체 구성을 제어합니다.
baseurl 변수는 주 도메인에 추가되며, 오프라인으로 작업 할 때 http://localhost:4000입니다.
위의 예에서 우리 사이트는 http://localhost:4000에 나타나기를 원합니다. _config.yml 파일에서 baseurl 변수는 다음과 같이 설정됩니다.
1 |
baseurl: "http://localhost" |
이것은 처음에는 당연한 것으로 보일지도 모르지만 이 값이 주 도메인에 추가되기 때문에 실제로 사이트 http://localhost:4000http://localhost에서 로드하려고 시도합니다.
따라서 다음과 같이 값을 빈 문자열로 변경해야합니다.
1 |
baseurl: "" |
그러면 사이트가 예상대로 로드됩니다.
대신 하위 디렉토리에서 사이트를로드하려면 baseurl 값을 하위 디렉토리의 이름으로 변경하고 슬래시를 시작하고 끝내야합니다.
1 |
baseurl: "/themedemo/" |
테마에 익숙해지기
기존 구조에서 바로 테마를 제공하여 시작하는 것이 가장 좋은 이유 중 하나는 (예상대로 실행되는지 확인하는 것 이외에) 테마의 기능 및 워크 플로를 익힐 수있는 기회를 제공한다는 것입니다.
Jekyll은 꽤 많은 유연성을 제공하기 때문에 테마는 완전히 다른 기능을 제공 할 수 있습니다. 새로운 테마의 데모를 제공 한 후 주변을 둘러보고 어떤 유형의 구조가 있는지 살펴보십시오. 테마에 카테고리 페이지, 추천 이미지, 작성자 페이지 등이 있는지 여부를 확인하십시오. 테마의 문서를 검색하고 사용법을 배울 수 있도록 이러한 기능을 기록해 두십시오.
또한 테마의 파일 및 폴더 구조를 살펴 봐야합니다. 조사하고자 하는 주요 영역은 다음과 같습니다.
- 테마가 _layouts 폴더에 있을 수 있는 모든 사용자 정의 페이지 레이아웃
- 모든 맞춤 변수는 콘텐츠의 전면에서 설정해야합니다.
또한 소셜 미디어 URL, 작성자 정보, 탐색 링크 등과 같이 테마의 기능을 사용하려면 사이트의 _config.yml 파일에 설정해야하는 사이트 전체 구성 옵션을 찾아야합니다.
당신의 것 만들기
이제 테마를 살펴보고 스스로 익숙해 질 기회를 얻었으므로 이제는 자신의 사이트에서 사용할 시간입니다. 이미 작성한 데모 버전을 변경하지 않고 그대로 유지하여 새로 빌드 한 사이트를 비교하십시오.
데모 내용 지우기
컴퓨터에 새 폴더를 만들고 테마 파일을 다시 추출합니다.
이번에 _posts 폴더로 가서 거기에있는 모든 파일을 삭제하면 데모 게시물이 제거됩니다.
그 후 모든 데모 페이지가 사라지도록 루트 폴더에서 .md (markdown) 파일을 삭제하십시오.
원하는 경우 미리보기 이미지와 같이 데모 컨텐츠에서 사용 된 이미지를 찾아서 삭제할 수도 있습니다 (직접 교체하려는 경우). 데모 콘텐츠 이미지의 존재 여부는 테마마다 다를 수 있습니다.
테마에 삭제하려는 데모 이미지가 있지만 어디에 있는지 잘 모르는 경우 테마 설명서에서 확인해야 할 내용을 확인하십시오. 그렇지 않으면 테마 템플리트의 코드를 살펴보고 거기에서 알아 내야 할 수도 있습니다.
사이트 구성 설정
그런 다음 루트 폴더에서 _config.yml 파일을 열고 테마에 필요한 사이트 전체 변수를 설정해야합니다. 일부 설정은 일반적으로 모든 _config.yml 파일에 공통적으로 적용됩니다 (예 : title, email, description 및 기타 몇 가지 설정). 그러나 일부 설정은 해당 테마에만 적용됩니다.
사이트 구성 파일에서 수행해야 할 작업은 특정 테마에 따라 다르므로 각 설정의 내용에 대한 지침은이 문서의 테마 설명서를 참조하는 것이 좋습니다.
예를 들어 Writer 테마에서는 nav_list 변수를 사용하여 사용자 정의 탐색 메뉴를 설정하여 메뉴 항목 목록을 정의 할 수 있습니다. 각각에는 레이블, 퍼머 링크 및 글꼴 썸네일 아이콘이 옆에 표시되는 클래스가 있습니다.
반대로 Astro 테마는 Writer의 특정 nav_item 변수를 사용하지 않고 다양한 소셜 미디어 계정에 대한 링크를 추가하고 Disqus 주석 등을 활성화 할 수있는 고유 한 사용자 지정 변수가 있습니다.
원하는대로 설정 될 때까지 자신의 테마 _config.yml 파일의 변수를 통해 작업하십시오.
jekyll serve를 사용하여 새 사이트를 처음 제공 한 후에 이와 같이 변경하면 CTRL + C로 프로세스를 중지하고 다시 시작해야 이후의 변경 사항이 적용됩니다.
홈페이지 설정 (필요한 경우)
일부 테마는 홈페이지에 대한 여러 레이아웃 중에서 선택하고 디스플레이를 제어하는 컨트롤을 설정할 수있는 옵션을 제공합니다. 이 경우에는 루트 폴더에서 index.html 파일의 앞부분에서 설정을 변경할 수 있습니다.
여러 레이아웃을 사용할 수있는 경우 layout 설정 값을 수정하여 다른 레이아웃을 선택할 수 있습니다. 가능한 값을 사용할 수 있는지 알아 보려면 테마 설명서를 참조해야합니다.
파일을 편집하는 동안 홈페이지에 표시 될 내용을 적용하기 위해 변경해야하는 다른 값이 있는지 확인하십시오. 예를 들어 Writer 테마에서는 추천 제목뿐만 아니라 홈페이지에 표시되도록 맞춤 제목과 설명을 설정할 수 있습니다.
나만의 페이지 추가
'정보'또는 '연락처'와 같은 페이지를 추가하려면 지금 시간이 필요합니다. 설치하려는 각 페이지의 사이트 루트 폴더에 .md (markdown) 문서를 추가합니다.
참고 : 일부 테마는 루트 폴더 대신 모든 페이지가 하위 폴더 (일반적으로 "페이지"라고 함)에 배치되도록 설정되므로 테마 문서를 확인하여 이 경우인지 확인하십시오.
예를 들어, 여기에 "About the Site"페이지 (about.md)가 추가되었습니다. "About Me"제작자 프로필 페이지 (author-kezz.md), 및 "연락처"페이지 (contact.md)가 있습니다.
페이지 파일을 추가 할 때 특정 레이아웃 템플릿 및 / 또는 프론트 매뉴를 사용해야하는지 알고 싶을 것입니다. 알아 내려면 테마의 문서를 참조하거나 테마를 수행 한 데모 설치의 마크 다운 파일을 복사하여 붙여 넣기 만하면됩니다.
예를 들어 Writer 데모에서 기존 작성자 페이지를 복사 한 다음 이름을 바꾸고 내용과 내용을 편집하여 내 자신으로 변환했습니다.
게시물 추가
이제 사이트 구조 설정의 필수 사항이 있으므로 이제 게시물을 추가 할 차례입니다. 데모 사이트의 _posts 폴더에서 게시물을 복사하여 작업중인 설치에 붙여 넣는 것이 좋습니다. 그런 다음 새 기사에 대해 원하는 날짜와 permalink로 이름을 바꿀 수 있습니다. 데모 게시물을 재사용함으로써 모든 필요한 전면 자료가 마련되어 업데이트 만하면됩니다.
카테고리, 태그 및 기타 추가 기능
일부 테마는 카테고리 및 태그 페이지를 지원합니다. 그렇다고 항상 그런 것은 아니며 구현이 테마마다 다를 수 있습니다. 사이트의 카테고리 및 태그를 사용하여 작업해야 할 일에 대해 주제별 문서를 확인하십시오.
예를 들어 Writer 테마에서 "범주"라는 사이트 하위 폴더에 폴더와 서식 파일을 수동으로 설정하려면 사용할 각 범주에 대해 필요합니다.
또한 사용중인 특정 테마에 사용할 수있는 다른 추가 기능이 몇 가지있을 수 있습니다. 테마의 기능 목록 및 문서를 통해 좋은 내용을 읽으면서 포함되어있는 모든 항목에 걸쳐 있는지 확인하십시오.
기존 사이트의 테마 전환
Jekyll 사이트가 이미 있고 새로운 테마를 적용하기를 원한다면 위에서했던 것과 거의 같은 과정을 거쳐야 할 것입니다. 새로운 페이지와 게시물을 추가하는 대신 기존 사이트의 콘텐츠를 복사 할 수있을 때 데모 콘텐츠를 삭제하면 차이가 발생합니다.
페이지가 이미있는 지킬 사이트가 이미있는 경우 이전 사이트의 관련 마크 다운 파일을 복사하여 새 페이지에 붙여 넣으십시오. 각 페이지를 살펴보고 앞의 내용을 업데이트하여 새 테마의 레이아웃과 필수 변수를 사용하십시오.
그런 다음 이전 _posts 폴더의 모든 게시물 파일을 새 파일로 복사하십시오. 약간 지루 하겠지만 대부분 각 게시물 파일을 하나씩 살펴보고 새 테마에 필요한 모든 설정으로 프론트 문제를 업데이트하고 이전 테마에 필요한 모든 내용을 삭제해야합니다 더 이상 사용되지 않습니다.
이전 사이트의 페이지 및 게시물에 사용 된 이미지 및 기타 미디어가있는 폴더가있는 경우 전체 폴더를 새 사이트 구조로 복사하십시오. 귀하의 게시물과 페이지는 여전히 동일한 이미지 위치를 참조해야 계속해서 귀하의 콘텐츠에 나타날 수 있습니다.
마무리
그래서 그것들은 당신이 지킬 테마를 설치하는 방법의 필수 요소입니다! 프로세스의 미세한 점은 테마마다 다를 수 있지만 각 경우에 필수 단계를 따를 수는 있습니다. 그 단계가 무엇인지 간단히 요약 해 봅시다.
- 추출하고 실행하여 새로운 테마를 빠르게 데모하십시오 :
jekyll serve - 누락 된 종속성을 설치하여 테마가 제공되지 못하도록하십시오.
- 데모 사이트의 프론트 엔드를 탐색하고 사용 방법을 알아 두십시오.
- 파일 구조, 특히 _layouts 폴더를 탐색하여 사용할 사용자 정의 레이아웃과 변수를 확인하십시오.
- 테마의 두 번째 설치를 만들고 데모 콘텐츠 페이지, 게시물 및 이미지 (선택 사항)를 지웁니다.
- 귀하의 사이트에 맞게 _config.yml의 설정을 채우십시오.
- 루트 폴더에있는 index.html 파일의 front matter 변수를 편집하여 홈페이지를 설정하십시오 (필요한 경우).
- 필요한 전면 자료로 페이지 마크 다운 파일을 만들거나 데모 사이트 / 기존 사이트에서 복사하여 붙여 넣으십시오.
- _posts 폴더에 필요한 전면 표지와 함께 게시물 markdown 파일을 만들거나 데모 사이트 / 기존 사이트에서 복사하여 붙여 넣습니다.
- 카테고리 템플릿을 만드는 경우와 같이 테마에 필요한 추가 설정을 수행하십시오.
이 튜토리얼이 커스텀 테마로 새로운 지킬 사이트를 설정하거나 기존 사이트의 테마를 새로운 테마로 바꾸는 것에 자신감을 갖게 해주기를 바랍니다.
Jekyll 사용에 대한 철저한 가이드를 보려면 Guy Routledge의이 과정을 확인하십시오.
읽어 주셔서 감사 드리며 곧 다시 만나겠습니다!
