Jekyll과 블로그를 만드는 방법

Sep 11, 2025

어떻게

(이미지 크레디트 : 그물)

이 튜토리얼은 정적 사이트 생성기에 대해 들어 본 사람들을위한 것입니다. 그리고 하나를 사용하여 자신의 사이트를 구축 할 때 가기를 원합니다. 여기에 우리가 당신을 보여줄 것입니다 블로그를 시작하는 방법 jekyll을 사용합니다.

명령이 모두 상당히 간단하다는 것에 따라 터미널에 대한 기본 지식이 좋습니다. GitHub 페이지의 사이트는 장면 뒤에있는 Jekyll에 의해 구동되므로 GitHub 페이지와 함께 사용하면 웹 사이트를 무료로 호스팅하고 관리 할 수있는 방법을 만듭니다 (최상의 목록보기 웹 호스팅 다른 옵션을위한 서비스 또는 다른 유형의 유형을 원한다면 목록을 볼 수 있습니다. 웹 사이트 빌더 짐마자

이 튜토리얼은 Mac에 있다고 가정합니다. Jekyll은 Ruby 프로그램이므로 Windows에서 실행할 수 있지만 공식적으로 지원되지 않습니다. Windows에서 다음을 따르는 경우, 홉 이상 루비를 설치하는 데 도움이됩니다.

이 자습서를 완료 한 후 Jekyll 블로그를 만들고 기능과 템플릿 언어가 개인 블로그를 구축 할 수있는 방법을 배웠습니다. 이것은 자신의 사이트를 개발하기위한 훌륭한 출발점입니다. 그리고 많은 디자인 아이디어 나 미디어 파일을 많이 가지고 있다면 최선을 안전하게 유지하십시오. 클라우드 스토리지 ...에

이 자습서의 파일을 찾으십시오 여기 ...에

10 최고의 정적 사이트 생성기

01. 설정하기

Mac에서는 기본적으로 Ruby가 설치되어 있어야하지만 타이핑하여 확인하겠습니다. 루비 -V. 당신의 터미널에서.

이제 우리는 실제로 사이트에서 Jekyll을 실행할 수 있습니다. 사이트를 작성하려는 디렉토리에 있는지 확인하고 간단히 입력하십시오. 보석은 Jekyll Bundler를 설치합니다 ; 그런 다음 컴퓨터가 이동하고 사이트를 실행하는 데 필요한 모든 종속성을 잡습니다.

02. 로컬로 봉사하거나 빌드하십시오

Jekyll과 함께 사용할 두 개의 주요 명령이 있습니다. 서브 과 짓다 ...에 사이트를 로컬로 실행하려면 Jekyll Serve. 명령 줄에서. 이렇게하면 변경 내용을 미리 볼 수있는 http://127.0.0.1:4000에서 버전이 실행됩니다. 이미 GEM 및 기타 종속성이있는 경우이 명령은 종속성 버전의 불일치로 인해 실패 할 수 있습니다. 이 경우 시도하십시오 Bundle Exec Jekyll Serv. 대신에. 똑같이 실행하지만 단어와 함께 실행됩니다 짓다 사이트를 컴파일합니다.

03. 초보자 파일을 가져옵니다

이 시점 에서이 튜토리얼과 함께 제공된 파일을 복사하여 작업 할 기초를 제공합니다. 이렇게하면 사이트의 홈페이지, 블로그 목록, 세부 정보 페이지 및 자산 구조가 제공됩니다. http://127.0.0.1:4000에서 페이지를 새로 고칩니다. 이제 우리는 이제 빌드 할 기본 페이지가 있음을 알 수 있습니다. Jekyll 사이트가 어떻게 작동하는지에 대한 간략한 개요를 살펴 보겠습니다.

Jekyll 사이트는 따르기 쉬운 방법으로 구성됩니다. 모든 컬렉션 (게시물 유형)은 레이아웃과 포함 된 것과 같이 자체 폴더에 개최됩니다. '_site'폴더가 표시됩니다. 이는 Jekyll이 실행할 때 사용하는 폴더입니다. Jekyll Build. 명령.

Generate CSS — CSS 생성을 위해 9 월 26 일에 런던에 가입하십시오 - 이미지를 클릭하여 티켓을 예약하십시오. (이미지 크레디트 : 미래)

04. 구성

Build a blog with Jekyll: Configuration — Jekyll은 당신에게 일할 수있는 훌륭한 구조를 제공하고, 관리하기 쉬운 구성 파일을 제공합니다. (이미지 크레디트 : 그물)

텍스트 편집기에서 _config.yml을 열고 자신의 세부 정보를 추가하십시오. 하나의 키 영역을 확인하는 것은 기본 URL을 설정하는 것입니다. 이것은 사이트가로드중인 폴더입니다. 구성 파일은 WordPress 테마를 구축 한 경우 WP-Config 파일과 결합 된 전역 옵션을 사용하는 것과 유사합니다.

제목 및 메타 설명, 이메일 및 소셜 계정과 같은 핵심 정보를 제어 할 수 있으며, 사이트가 사용 된 모든 플러그인과 같이 사이트가 컴파일 해야하는 모든 정보를 제어 할 수 있습니다. 당신은 당신이 달성하고자하는 것에 따라 HTML과 페이지의 핵심을 히술 할 수 있습니다. 그러나 홈페이지 및 목록 페이지와 같은 사용자 정의 페이지는 일반적으로 HTML이지만 게시물 및 설정된 템플릿을 사용하는 기타 일반 페이지가 마찰됩니다.

05. 전면 문제

전면은 파일의 맨 위에있는 YAML의 스 니펫입니다. Jekyll은 변수를 보관하기 위해 그것을 사용합니다. Ofter.md 파일을보고, 사용하려는 제목, 작성자 및 관련 이미지를 볼 수 있습니다.

06. 액체 태그

Build a blog with Jekyll: Liquid tags — 액체 태그는 템플릿으로 작업 할 수있는 쉬운 방법을 제공하며 Shopify Themes에서도 사용됩니다. (이미지 크레디트 : 그물)

Jekyll은 객체, 태그 및 필터를 사용하는 템플릿 언어입니다. 우리는 그를 사용합니다 목적 이중 괄호로 둘러싸인 태그 {{}} 프런트 물질 변수 및 중괄호 및 논리에 대한 중괄호 및 백분율 표시 {% %} ...에

07. 탐색을 빌드하십시오

정적 탐색이 아닌 구성 파일의 전원을 사용하여 컨텐츠를 템플릿에서 분리합니다. 우리는 '데이터'폴더의 탐색 항목을 구성 파일로 탐색 한 다음 Navigation.html에서 루프합니다. 우리는 템플릿으로 돌아 가지 않고도 우리가 원하는 페이지와 링크를 입력 할 수 있습니다. 탐색 공간이 오류가 발생하기 때문에 POST 시작시 NAVIGITION.YML 또는 전면 문제와 같은 구성 파일을 편집 할 때 공백으로 정말로주의하십시오.

구성 파일이 이미 설정되어 있으므로 'navigation.html'포함 파일에 다음 코드를 입력하십시오.

 site.data.Navigation %의 항목의 경우}
     & lt; {site.baseurl} {{{item.link}} / {{item.link}} {% IF PAP.URL == item.link %} class = "현재"{% endif %} & gt; {{item .Name}}}}}}
   {% endfor %}

우리는 액체 로직 태그를 사용하여 탐색 구성 파일을보고 각 항목에 대한 링크와 이름을 루프와 기본적으로 루프에 대한 표준 단지 루프합니다.

08. 홈 페이지를 만듭니다

우리의 홈페이지에서 우리는 우리의 최신 블로그 게시물을 영웅으로 나열한 다음 링크가있는 페이지에 대한 스 니펫을 가져올 것입니다. 영웅 블록으로 시작합시다. index.html을 열고 다음 코드를 추가하십시오.

 {% 할당 post = site.posts.first %}
& lt; div class = "c-hero"style = "배경 : URL ({{post.thumbnail_image.large | relative_url}}) 하단 센터 / 덮개 없음 - 반복 없음;"& gt;
   & lt; h1 class = "c-hero__title"& gt; {{post.title}}}} & gt;
   {{POST.INTRO | Markdownify}}
   & lt; a href = "{{post.url}}"class = "btn - hero"& gt; 전체 POST & lt; / a & gt;
& lt; / div & gt;

우리가 먼저 최신 게시물을 지정한 다음 게시물 정면에서 설정된 미리보기 이미지를 참조하는 것을 알 수 있습니다. 포스트 소개는 액체 필터를 사용합니다 마크 다운화 MarkDown을 HTML로 변환하는 방법.

이 곳에서는 정보 페이지에서 티저를 추가 해 봅시다. 다음을 추가하십시오.

 & lt; div class = "c-feature"& gt;
   {it Site.Pages의 페이지의 경우 %}
       {% IF PAP.URL == '/ bake.html'%}
           & lt; img src = "{{page.profile_image.small}}"Alt = "profie picture"class = "c-feature__image"/ & gt;
           & lt; div class = "c-feature__text"& gt;
               & lt; h2 & gt; & lt; a href = "{{PAGE.URL}}"& gt; {{PAGE.TITLE}}}} & lt; / a & gt;
               {{PAGE.INTRO}}}} & lt; p & gt;
           & lt; / div & gt;
          
       {% endif %}
   {% endfor %}
& lt; / div & gt;

이번에는 A를 사용하고 있습니다 ...에 대한 루프는 사이트의 페이지를 확인합니다. 우리는 사용하고 있습니다 Page.URL. 정보 페이지를 필터링하고 페이지의 정보를 출력하려면 비슷한 템플릿 스타일을 영웅으로 사용합니다.

09. 블로그 목록

Build a blog with Jekyll: Blog list — CSS Grid 및 FlexBox를 사용하는 사이트의 나머지 게시물의 간단한 카드 레이아웃 (이미지 크레디트 : 그물)

생성 된 홈페이지로 블로그 목록 페이지로 이동할 수 있습니다. 목록 페이지를 만들려면 다시 액체 태그를 사용하여 'Posts'폴더의 모든 파일을 루프 할 논리를 제공합니다.

영웅은 홈페이지와 동일한 프로세스를 따르기 때문에 사용자를 위해 완성됩니다. 'blog.html'의 영웅 아래에 다음을 추가하십시오.

& lt; div class = "constrain"& gt;
   & lt; h1 & gt; 나머지 & lt; / h1 & gt;
   & lt; 섹션 클래스 = "카드 목록"& gt;
           {site.posts offset : 1 %의 게시물}
           & lt; div class = "카드"& gt;
                   & lt; img src = "{{post.thumbnail_image.small}}"/ & gt;
                   & lt; div class = "카드 세부 정보"& gt;
                   & lt; h3 & gt; {{post.date | 날짜 : "% d % b"}} - {{post.title}}}}}
               & lt; a href = "{{post.url}}"class = "btn"& gt; 자세한 내용을 읽으십시오.
                   & lt; / div & gt;
               & lt; / div & gt;
           {% endfor %}
          
   & lt; / section & gt;
& lt; / div & gt;

다시 우리는 A를 사용합니다 ...에 대한 루프 게시물 컬렉션을 통과합니다. 그러나 우리가 이미 늦은 영웅의 최신을 반복 한 것처럼 우리는이 루프를 오프셋하여 두 가지를 시작합니다. 액체 필터는 날짜를 선택한 형식으로 변환하는 데 사용됩니다.

10. 블로그 세부 사항 페이지

지금 가기가 오래 가지 않습니다 : 우리는 거의 모든 기본 요소를 함께 가지고 있습니다. 주소로 남아있는 한 가지 중요한 부분은 탐색입니다. 블로그 게시물을 읽을 때 더 많은 것을 순환시키고 더 읽을 수있는 방법이 필요합니다. 우리는 페이지 변수를 사용하여 사이트에 좋은 페이지 매김을 추가 할 수 있습니다. 레이아웃 폴더에서 Post.html을 열고 다음을 추가하십시오.

 & lt; div class = "c- 페이지 매김"& gt;
   {% IF PAP.previous %}
   & lt; div & gt;
       & lt; h3 & gt; 이전 & lt; / h3 & gt;
       {{PAGE.PREVIOVE.TITLE}}}}} & lt; p & gt;
       & lt; a class = "btn"href = "{{page.baseurl}} {{PAGE.BASEURL}} {{PAGE.BASEURL}} {{PAGE.BASEURL}}"& gt;
   & lt; / div & gt;
   {% endif %}
   {% IF PAP.NEXT %}
   & lt; div & gt;
       & lt; h3 & gt; 다음 & lt; / h3 & gt;
       {{PAGE.NEXT.TITLE}}}}}}}}
       & lt; a class = "btn"href = "{{page.next.url}} {{PAGE.NEXT.URL}} {{PAGE.NEXT.URL}}"& gt;
   & lt; / div & gt;
   {% endif %}
& lt; / div & gt;

우리는 그를 사용합니다 Page.previous. 과 페이지 변수를 클릭 할 게시물이 있는지 확인하십시오. 그런 다음 블록을 출력하고 게시물의 제목과 링크를 포함 할 수 있습니다.

11. 빌드 및 게시

GitHub 페이지는 우리를 위해 SASS 파일을 렌더링하므로 실행할 때 Jekyll Build. 컴파일 된 파일은 _site 폴더에 작성됩니다. 꿀꺽 꿀꺽 꿀꺽 꿀꺽 마시고 멋진 린 스타일! SASS 출력을 사이트의 Main Config.yml 파일의 설정으로 분산 할 수도 있습니다. 이 디렉토리의 내용은 선택한 호스팅으로 전송 될 수 있습니다. 알고있는 한 가지는 GitHub 페이지가 실제로 Jekyll을 지원하므로 마스터 브랜치를 사용하여 사이트를 소스로 빌드하고 호스팅 할 수 있다는 것입니다. 이것에 대한 자세한 정보를 찾을 수 있습니다 여기 ...에

이 기사는 원래 문제 320에 게시되었습니다 그물 웹 디자이너 및 개발자를위한 세계 최고의 잡지. 여기 문제를 구입하십시오 또는 여기를 구독하십시오 ...에

관련 기사:

그리드와 FlexBox가있는 블로그를 구축하십시오
최고의 무료 블로깅 플랫폼
Gatsby와 블로깅 사이트를 만드는 방법

Jekyll과 블로그를 만드는 방법

01. 설정하기

02. 로컬로 봉사하거나 빌드하십시오

03. 초보자 파일을 가져옵니다

04. 구성

05. 전면 문제

06. 액체 태그

07. 탐색을 빌드하십시오

08. 홈 페이지를 만듭니다

09. 블로그 목록

10. 블로그 세부 사항 페이지

11. 빌드 및 게시

어떻게 - 가장 인기있는 기사

LINO PRINTMAKING : 소개

그림 그리기 : 초보자 가이드

Formik와 반응 형식 상태 관리

Chiaroscuro Art : 단계별 가이드

원격 팀을위한 마스터 버전 제어

멋진 인쇄 프로모션 재료를 만들기위한 3 가지 팁

수채화로 글레이즈를 만드는 방법

게임 플레이 디자인을위한 우주선 모델링

카테고리