Jekyll 튜토리얼: 정적 웹사이트를 만드는 방법

게시 됨: 2023-05-18

오늘날의 디지털 시대에 온라인 입지를 구축하고 브랜드를 홍보하며 잠재 고객에게 다가가려면 웹 사이트를 보유하는 것이 필수적입니다. 그러나 웹 사이트를 만드는 것은 어려운 작업이 될 수 있습니다.

여기에서 정적 사이트 생성기(SSG)가 등장합니다. 복잡한 백엔드 시스템이나 데이터베이스 없이도 아름답고 빠르게 로드되는 웹사이트를 쉽게 만들 수 있습니다.

이 기사에서는 인기 있는 SSG 중 하나인 Jekyll을 소개하고 작동 방식과 이를 사용하여 정적 웹 사이트를 만드는 방법을 알아봅니다.

다음은 Jekyll로 구축할 블로그 사이트의 라이브 데모입니다.

자세히 살펴보고 싶다면 프로젝트의 GitHub 리포지토리에 액세스할 수 있습니다.

지킬이란?

Jekyll은 Ruby 프로그래밍 언어로 구축되고 실행되는 무료 오픈 소스 SSG입니다. Jekyll을 사용하기 위해 Ruby가 어떻게 작동하는지 이해할 필요가 없습니다. 컴퓨터에 Ruby만 설치하면 됩니다.

Jekyll은 데이터베이스나 WordPress와 같은 콘텐츠 관리 시스템을 사용하지 않고도 개인 블로그, 포트폴리오 웹사이트, 문서 웹사이트와 같은 다양한 유형의 정적 사이트를 구축하는 데 사용할 수 있습니다.

Jekyll이 SSG 중에서 돋보이는 이유는 다음과 같습니다.

사용하기 쉬움 : Jekyll은 일반 텍스트 파일과 마크다운 구문을 사용하여 콘텐츠를 만들고 관리하므로 시작하는 데 HTML이나 CSS에 대한 지식이 필요하지 않습니다.
빠르고 안전함: Jekyll은 서버 측 데이터베이스나 스크립팅을 처리하지 않으므로 취약성과 공격의 위험이 적습니다. 웹 사이트를 매우 빠르고 안전하게 만드는 정적 HTML 파일을 생성합니다.
사용자 정의 가능: Jekyll은 사용자 정의가 가능하여 레이아웃과 템플릿을 사용하거나 플러그인을 만들어 기능을 확장할 수도 있습니다.
쉬운 배포 : Jekyll은 동적 콘텐츠 관리 시스템 없이도 웹 서버나 호스팅 공급자에 배포할 수 있는 정적 HTML 파일을 생성합니다.
대규모 커뮤니티의 지원: Jekyll에는 대규모 사용자 및 개발자 커뮤니티가 있으므로 도움이 필요하거나 사이트의 기능을 확장하려는 경우 많은 리소스를 사용할 수 있습니다.

새로운 웹사이트를 만드는 것은 고통일 수 있습니다! Jekyll로 더 쉽고 빠르게 만드는 방법은 다음과 같습니다. 트윗하려면 클릭

지킬 설치 방법

Jekyll 문서에 설명된 대로 Jekyll 설치를 진행하려면 먼저 컴퓨터에 Ruby를 설치해야 합니다.

macOS에 지킬을 설치하는 방법

기본적으로 Ruby는 macOS와 함께 사전 설치되어 제공되지만 이러한 버전의 Ruby를 사용하여 Jekyll을 설치하는 것은 권장되지 않습니다. 예를 들어, Apple의 최신 운영 체제인 Ventura에서 사전 설치된 Ruby 버전은 2.6.10이며 그 중 최신 버전은 3.1.3입니다(이 기사가 작성되는 시점).

이 문제를 해결하려면 chruby와 같은 버전 관리자를 사용하여 Ruby를 올바르게 설치해야 합니다. 먼저 터미널에서 아래 명령을 사용하여 Mac에 Homebrew를 설치해야 합니다.

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

설치가 완료되면 터미널을 종료하고 다시 시작한 다음 다음 명령을 실행하여 Homebrew를 실행할 준비가 되었는지 확인합니다.

 brew doctor

" Your system is ready to brew"가 표시되면 이제 아래 명령을 사용하여 chruby 및 ruby-install을 설치할 수 있습니다.

 brew install chruby ruby-install

이제 방금 설치한 ruby-install 패키지를 사용하여 루비의 최신 버전인 3.1.3을 설치할 수 있습니다.

 ruby-install 3.1.3

이 작업은 몇 분 정도 소요됩니다. 성공하면 아래 명령으로 chruby 자동으로 사용하도록 셸을 구성합니다.

 echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc echo "chruby ruby-3.1.3" >> ~/.zshrc

이제 터미널을 종료하고 다시 시작한 다음 다음 명령을 실행하여 모든 것이 작동하는지 확인할 수 있습니다.

 ruby -v

ruby 3.1.3 이어야 합니다.

이제 컴퓨터에 Ruby의 최신 버전이 설치되었습니다. 이제 최신 Jekyll 및 번들러 gem 설치를 진행할 수 있습니다.

 gem install jekyll bundler

Windows에 Jekyll 설치하는 방법

Windows 컴퓨터에 Ruby와 Jekyll을 설치하려면 RubyInstaller를 사용합니다. 이는 RubyInstaller 다운로드에서 Ruby+Devkit 버전을 다운로드 및 설치하고 기본 설치 옵션을 사용하여 수행할 수 있습니다.

설치 마법사의 마지막 단계에서 gem을 설치하는 데 사용되는 ridk install 단계를 실행합니다. 자세한 내용은 RubyInstaller 문서를 참조하세요.

옵션에서 MSYS2 및 MINGW 개발 도구 체인을 선택하십시오. 새 명령 프롬프트 창을 열고 아래 명령을 사용하여 Jekyll 및 Bundler를 설치합니다.

 gem install jekyll bundler

Jekyll이 제대로 설치되었는지 확인하는 방법

Jekyll이 컴퓨터에 올바르게 설치되었는지 확인하려면 터미널을 열고 다음 명령을 실행하십시오.

 jekyll -v

버전 번호가 보이면 Jekyll이 시스템에 설치되어 올바르게 작동한다는 의미입니다. 이제 Jekyll을 사용할 준비가 되었습니다!

Jekyll 명령 및 구성

Jekyll로 정적 사이트를 만들고 사용자 정의하기 전에 다양한 CLI 명령과 구성 파일 매개변수에 익숙해지는 것이 좋습니다.

Jekyll CLI 명령어

다음은 인기 있는 Jekyll CLI 명령 중 일부입니다. 그것들을 외울 필요는 없지만 그것들이 존재한다는 것만 알고 이 문서의 뒷부분에서 그것들의 사용법을 알게 되면 그것들이 무엇을 하는지 자유롭게 다시 확인하십시오.

jekyll build : _site 디렉토리에 정적 사이트를 생성합니다.
jekyll serve : 사이트를 구축하고 로컬 컴퓨터에서 웹 서버를 시작하여 http://localhost:4000의 브라우저에서 사이트를 미리 볼 수 있습니다.
jekyll new [site name] : 지정된 사이트 이름으로 새로운 디렉토리에 새로운 Jekyll 사이트를 생성합니다.
jekyll doctor : 있을 수 있는 모든 구성 또는 종속성 문제를 출력합니다.
jekyll clean : 생성된 사이트 파일이 저장되어 있는 _site 디렉토리를 삭제합니다.
jekyll help : Jekyll 도움말 문서를 출력합니다.
jekyll serve --draft : _drafts 디렉토리에 있는 게시물을 포함하여 Jekyll 사이트를 생성하고 제공합니다.

이러한 명령에 몇 가지 옵션을 추가할 수도 있습니다. Jekyll 문서에서 Jekyll 명령 및 옵션의 전체 목록을 참조하세요.

지킬 설정 파일

Jekyll 구성 파일은 Jekyll 사이트에 대한 설정 및 옵션을 포함하는 _config.yml 이라는 YAML 파일입니다. 사이트 제목, 설명, URL 및 기타 설정을 포함하여 사이트의 다양한 측면을 구성하는 데 사용됩니다.

다음은 가장 일반적으로 사용되는 구성 옵션 중 일부입니다.

제목: 사이트의 제목입니다.
설명: 사이트에 대한 간단한 설명입니다.
url: 사이트의 기본 URL입니다.
baseurl: 도메인의 하위 디렉터리에서 호스팅되는 경우 사이트의 하위 디렉터리입니다.
permalink: 게시물 및 페이지의 URL 구조입니다.
제외: 사이트 생성 프로세스에서 제외할 파일 또는 디렉터리 목록입니다.
포함: 사이트 생성 프로세스에 포함할 파일 또는 디렉터리 목록입니다.
paginate: 페이지 매김을 사용할 때 페이지당 표시할 게시물 수입니다.
플러그인: 로드할 Jekyll 플러그인 목록입니다.
theme: 기본적으로 이것은 minima 로 설정됩니다. 이름을 설정하고 이 문서의 뒷부분에서 배울 다른 설정을 구현하여 다른 테마를 사용할 수 있습니다.

구성 파일에서 사용자 정의 변수를 생성하고 사이트의 템플릿, 레이아웃 및 포함에서 사용할 수도 있습니다. 예를 들어 author_name 이라는 변수를 만든 다음 {{ site.author_name }} 과 같이 템플릿에서 사용할 수 있습니다.

Jekyll 구성 파일을 수정하려면 텍스트 편집기에서 Jekyll 프로젝트 디렉토리의 _config.yml 파일을 열고 변경합니다.

참고: 구성 파일에 대한 변경 사항은 다음에 jekyll build 또는 jekyll serve 로 사이트를 생성할 때 적용됩니다.

Jekyll에서 정적 웹사이트를 어떻게 만드나요?

이제 컴퓨터에 Jekyll을 설치했으므로 이제 몇 초 안에 하나의 명령으로 Jekyll 정적 웹 사이트를 만들 수 있습니다. 터미널을 열고 다음 명령을 실행합니다.

 jekyll new joels-blog

"joels-blog"를 원하는 사이트 이름으로 바꾸십시오.

그런 다음 웹사이트 폴더로 이동합니다. 다음과 같은 디렉토리와 파일을 포함하는 기본 Jekyll 사이트 구조를 확인할 수 있습니다.

 ├── _config.yml ├── _posts ├── Gemfile ├── Gemfile.lock ├── index.md └── README.md

각 디렉토리와 파일의 용도는 다음과 같습니다.

_config.yml: 사이트 설정 및 옵션이 포함된 Jekyll 구성 파일입니다.
_posts: 사이트의 콘텐츠(블로그 게시물일 수 있음)가 포함된 디렉토리입니다. 특정 파일 이름 지정 규칙( YEAR-MONTH-DAY-title.MARKUP ) 이 있는 Markdown 또는 HTML 파일일 수 있습니다.
Gemfile 및 Gemfile.lock: Bundler는 이 파일을 사용하여 사이트가 의존하는 Ruby gem을 관리합니다.
index.md: Markdown 또는 HTML 파일에서 생성된 사이트의 기본 홈페이지입니다.

하지만 Jekyll 웹사이트를 사용자 지정하는 데 사용할 수 있는 더 많은 파일/폴더가 있습니다. 이러한 폴더에는 다음이 포함됩니다.

_includes: 레이아웃 및 페이지에 포함될 수 있는 재사용 가능한 HTML 스니펫이 포함된 디렉토리입니다. navbar, footer 등
_layouts: 페이지 구조를 정의하는 HTML 레이아웃 템플릿이 포함된 디렉토리입니다.
자산: 이미지 및 CSS 파일과 같이 사이트에서 사용하는 모든 파일이 포함된 디렉토리입니다.
_sass: 사이트의 CSS를 생성하는 데 사용할 수 있는 Sass 파일이 포함된 디렉토리입니다.

이 파일 구조는 Jekyll 프로젝트를 위한 견고한 기반을 제공하지만 프로젝트의 특정 요구 사항에 맞게 필요에 따라 수정할 수 있습니다.

빠른 시작 옵션: GitHub 템플릿 사용

Jekyll CLI를 사용하여 프로젝트를 시작하는 대신 GitHub에서 Kinsta의 "Hello World" Jekyll 템플릿을 사용하여 Git 리포지토리를 생성할 수 있습니다. 이 템플릿 사용 > 새 리포지토리 만들기를 선택하여 자신의 GitHub 계정 내의 새 리포지토리에 시작 코드를 복사합니다.

Jekyll 사이트 미리보기 방법

이제 Jekyll 사이트가 생겼지만 필요에 맞게 사용자 지정을 시작하기 전에 웹 사이트가 어떻게 보이는지 미리 볼 수 있는 방법은 무엇입니까? 터미널을 열고 프로젝트 디렉터리로 이동한 후 다음 명령을 실행합니다.

 jekyll serve

이렇게 하면 프로젝트에서 생성된 모든 정적 파일을 포함하는 _site 폴더가 생성됩니다. 또한 Jekyll 서버가 시작되며 http://localhost:4000 을 통해 사이트를 미리 볼 수 있습니다.

웹 브라우저에서 URL을 방문하면 최소 테마의 Jekyll 사이트가 표시됩니다.

Jekyll 사이트를 사용자 지정하는 방법

Jekyll로 사이트를 만들고 테마를 사용하면 필요에 맞게 사이트를 사용자 지정할 수 있습니다. 예를 들어 새 페이지를 추가하거나 페이지 레이아웃을 변경하거나 일부 항목이 표시되는 방식을 조정할 수 있습니다. Jekyll에서는 이 모든 것이 가능합니다.

Jekyll에서 Front Matter가 작동하는 방식

프로젝트 폴더의 각 페이지 또는 블로그 게시물을 열면 페이지 상단의 세 개의 대시(—) 안에 정보 블록이 있음을 알 수 있습니다. 이것을 머리말 이라고 합니다.

Jekyll에서 페이지 또는 게시물에 대한 정보를 저장하는 데 사용되는 메타데이터 형식입니다. YAML 또는 JSON으로 작성할 수 있습니다.

 --- title: "Welcome to Jekyll!" description: "Introduction to what Jekyll is about and how it works" date: 2023-03-07 16:54:37 +0100 ---

위의 예에서 머리말에는 게시물의 제목, 설명 및 날짜와 같은 변수가 포함됩니다. 이러한 변수는 페이지나 게시물의 레이아웃 또는 콘텐츠에서 사용할 수 있습니다.

Jekyll은 머리말을 파싱하고 이를 사용하여 사이트의 출력 HTML을 생성합니다. 머리말을 사용하여 레이아웃, 퍼머링크, 게시 상태 등과 같은 다양한 옵션을 지정할 수 있습니다.

기본 머리말 구성 방법

또한 기본 머리말을 구성할 수 있으므로 유사한 파일에 대해 동일한 머리말을 정의할 필요가 없습니다. 예를 들어 각 블로그 게시물이 동일한 작성자 이름과 레이아웃을 사용하는 경우입니다. _config.yml 파일에서 사용자 정의 머리말을 정의하여 모든 블로그 게시물을 제공할 수 있습니다.

구조가 약간 복잡하지만 다음과 같습니다. _config.yml 파일의 마지막 구성 아래에 붙여넣습니다.

 defaults: - scope: path: "posts" # empty string means all files values: layout: "post" author: "John Doe"

이제 jekyll serve 명령을 실행하면 각 게시물의 레이아웃과 작성자를 정의하지 않아도 파일 내에서 액세스할 수 있음을 알 수 있습니다.

참고: 경로를 정의하지 않으면 모든 파일이 정의된 머리말 값을 사용합니다.

Jekyll에서 페이지 만들기

프로젝트의 루트 디렉토리에 파일을 생성하면 페이지로 간주됩니다. 파일에 지정한 이름은 URL에서 가장 많이 사용되므로 각 페이지 파일의 이름을 잘 울릴 수 있습니다.

예를 들어 URL이 https://example.com/about 인 페이지를 만들려면 about.htm l 또는 about.md 라는 파일을 만듭니다. 파일 확장자는 페이지 콘텐츠(HTML 또는 Markdown)에 사용할 마크업 언어를 결정합니다.

파일을 만든 후 적절한 머리말과 내용을 추가합니다. 파일을 저장하고 브라우저에서 Jekyll 사이트를 새로 고칩니다. 이제 파일 이름에 해당하는 URL에서 새 페이지에 액세스할 수 있습니다.

Jekyll에서 레이아웃 만들기

레이아웃을 사용하여 사이트 페이지 및 게시물의 구조와 디자인을 정의할 수 있습니다. 이것은 일반적으로 주로 HTML 코드로 수행됩니다. 페이지의 메타데이터에 머리글, 바닥글, 메타 정보를 포함할 수 있습니다.

첫 번째 단계는 프로젝트의 루트 디렉터리에 _layouts 폴더를 만드는 것입니다. 그런 다음 각 레이아웃에 대한 파일을 만듭니다. 파일에는 레이아웃의 목적을 반영하는 설명이 포함된 이름이 있어야 합니다. 예를 들어 page.htm l이라는 파일을 만들어 사이트의 모든 페이지에 대한 페이지 레이아웃을 정의할 수 있습니다.

HTML 또는 다른 마크업 언어를 사용하여 레이아웃의 전체 구조를 정의하는 것이 가장 좋습니다.

페이지 제목, 콘텐츠 및 메타데이터와 같이 레이아웃에 삽입될 모든 동적 콘텐츠에 대한 자리 표시자를 포함할 수 있습니다. 예를 들어 다음과 같이 머리글, 바닥글 및 콘텐츠 영역을 포함하는 기본 레이아웃을 만들 수 있습니다.

 <!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> </head> <body> <header> <!-- Navigation menu goes here --> </header> <main>{{ content }}</main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

이 예에서 {{ page.title }} 및 {{ content }} 자리 표시자는 렌더링되는 페이지의 실제 제목과 콘텐츠로 대체됩니다.

이 시점에서 페이지를 머리말에서 레이아웃 값으로 사용하는 모든 페이지나 게시물은 이 레이아웃을 갖게 됩니다. _layouts 폴더 내에서 여러 레이아웃을 만들고 원하는 대로 레이아웃 스타일을 지정할 수 있습니다. 유사한 이름으로 레이아웃을 정의하여 테마의 레이아웃을 재정의할 수도 있습니다.

Jekyll에서 _includes 폴더가 작동하는 방식

_includes 폴더에는 웹 사이트의 다른 부분에 포함할 수 있는 재사용 가능한 코드 스니펫이 포함되어 있습니다. 예를 들어, 포함 폴더에 navbar.html 파일을 만들고 {% include %} 태그를 사용하여 page.html 레이아웃 파일에 추가할 수 있습니다.

 <!DOCTYPE html> <html> <head> <title>{{ page.title }} </title> </head> <body> <header>{% include navbar.html %} </header> <main>{{ content }} </main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

빌드 시 Jekyll은 태그를 navbar.html 의 내용으로 대체합니다.

_includes 폴더에는 HTML, Markdown 또는 Liquid 파일과 같은 모든 유형의 파일이 포함될 수 있습니다. 주요 목표는 사이트 전체에서 코드를 재사용할 수 있도록 하여 코드를 DRY(Don't Repeat Yourself) 상태로 유지하는 것입니다.

Jekyll에서 게시물 반복

모든 블로그 게시물을 보관할 전용 블로그 페이지를 생성할 수 있습니다. 즉, 사이트의 모든 게시물을 가져와서 반복해야 한다는 의미입니다. Jekyll에서는 {% for %} 태그를 사용하여 쉽게 달성할 수 있습니다.

Jekyll 웹사이트의 모든 게시물은 site.posts 변수에 저장됩니다. 루프를 돌면서 {{ post.title }} Liquid 변수를 사용하여 다음과 같은 방식으로 각 게시물의 제목을 출력할 수 있습니다.

 {% for post in site.posts %} <h2>{{ post.title }}</h2> {% endfor %}

추가 Liquid 변수를 사용하여 게시물의 날짜 또는 작성자와 같은 각 게시물에 대한 기타 정보를 출력할 수도 있습니다.

 {% for post in site.posts %} <h2>{{ post.title }}</h2> <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p> {% endfor %}

위의 예에서 날짜 Liquid 필터는 각 게시물의 날짜 형식을 사람이 더 읽기 쉬운 형식으로 지정합니다.

이제 Jekyll 사이트에서 수행할 수 있는 몇 가지 기본 형식에 대한 아이디어가 생겼습니다. 하지만 필요에 맞는 테마를 항상 검색하고 Jekyll 사이트에 추가할 수 있기 때문에 처음부터 Jekyll 사이트를 구축하기 위해 이 모든 것을 사용할 필요는 없습니다.

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

쉽게 추가할 수 있는 다양한 테마가 있지만 좋은 점은 각 테마마다 GitHub의 ReadMe 파일에 설치 방법에 대한 명확한 정보가 항상 있다는 것입니다. 테마를 복제하거나 gem 기반 테마인 경우 프로세스가 더 쉽습니다.

이 기사에서는 블로그 테마를 설치하고 블로그 사이트를 Kinsta에 배포하도록 사용자 지정합니다. 이것은 gen 기반 테마이며 GitHub에서 해당 소스 코드 및 지침에 액세스할 수 있습니다.

gem 기반 테마를 추가하려면 사이트의 Gemfile을 열고 사용하려는 테마의 gem을 추가하세요. 우리가 사용할 테마는 jekyll-theme-clean-blog 입니다. Gemfile에서 기본 최소 테마를 바꿀 수 있습니다.

 gem "jekyll-theme-clean-blog"

사이트 디렉토리에서 bundle install 명령을 실행하여 테마의 gem과 종속 항목을 설치합니다.

사이트의 _config.yml 파일에서 다음 행을 추가하여 사용하려는 테마를 지정하십시오.

 theme: jekyll-theme-clean-blog

이 시점에서 테마를 사용할 준비가 되었습니다.

테마 레이아웃을 재정의하지 않으려면 _layouts 디렉토리의 모든 레이아웃을 제거해야 합니다.

그런 다음 테마 설명서에서 파일의 레이아웃 이름을 찾을 수 있습니다. 예를 들어 jekyll-theme-clean-blog 테마를 사용하는 경우 index.html 파일의 레이아웃 이름은 home 이고 다른 페이지는 page 이며 모든 게시물은 post 입니다.

마지막으로 jekyll serve 실행하여 새 테마를 사용하여 사이트를 구축하고 제공합니다.

그게 다야! Jekyll 사이트는 이제 추가한 새로운 gem 기반 테마를 사용해야 합니다. 사이트의 _layouts 디렉토리에서 레이아웃을 수정하여 테마를 추가로 사용자 정의할 수 있습니다.

Jekyll 테마 사용자 정의

이제 테마가 사이트에 추가되었습니다. 다음 작업은 필요에 맞게 사이트를 사용자 지정하고 의도한 대로 작동하도록 하는 것입니다. 예를 들어 각 페이지와 게시물의 이미지는 표시되지 않고 회색 배경으로 표시됩니다.

사용하려는 이미지의 경로를 지정하여 각 페이지 및 게시물에 머리말 옵션을 추가하여 이 문제를 해결할 수 있습니다. Jekyll에서 이미지와 같은 자산은 자산 폴더에 저장됩니다. 이 폴더에서 이미지를 구성할 하위 폴더를 만들도록 결정할 수 있습니다.

이제 머리말 블록에 배경 옵션을 추가하고 해당 이미지에 대한 경로를 추가할 수 있습니다. 예를 들어 about 페이지에서 이것은 머리말입니다.

 --- layout: page title: About description: This is the page description. permalink: /about/ background: '/assets/images/about-page.jpeg' ---

모든 페이지와 게시물에 대해 이 작업을 수행하면 페이지가 다음과 같이 표시됩니다.

수행할 수 있는 또 다른 사용자 지정은 탐색 모음 옵션을 조정하는 것입니다. 예를 들어 연락처 페이지가 필요하지 않을 수 있습니다. 즉, navbar 옵션에서 해당 링크를 제거해야 합니다. 테마의 소스 코드를 연구하고, 탐색 링크를 담당하는 파일을 확인하고, 파일을 프로젝트에 정확히 복제하고, 필요하지 않은 옵션을 제거하여 이를 수행할 수 있습니다.

탐색 링크는 _includes 폴더의 navbar.html 파일에 있습니다. 이 파일을 만들고 소스 코드에서 코드를 붙여넣고 연락처 옵션을 제거하거나 원하는 새 옵션을 추가할 수 있습니다.

프로젝트를 저장하면 탐색 옵션이 사용자 지정됨을 알 수 있습니다.

마지막으로 마지막 사용자 정의는 모든 블로그 게시물을 보관할 게시물 페이지를 만드는 것입니다. 즉, 이 페이지의 모든 게시물을 반복하게 됩니다.

posts.html 파일을 만들고 다음 코드를 붙여넣습니다.

 --- layout: page title: Blog description: Expand your knowledge and stay informed with our engaging blog posts. background: '/assets/images/blog-page.jpeg' --- {% for post in site.posts %} <article class="post-preview"> <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}"> <h2 class="post-title">{{ post.title }}</h2> {% if post.subtitle %} <h3 class="post-subtitle">{{ post.subtitle }}</h3> {% else %} <h3 class="post-subtitle"> {{ post.excerpt | strip_html | truncatewords: 15 }} </h3> {% endif %} </a> <p class="post-meta"> Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include read_time.html content=post.content %} </p> </article> <hr /> {% endfor %}

저장된 이미지를 반영하도록 배경 이미지를 자유롭게 조정하십시오. 위의 코드에서는 모든 게시물을 반복하여 이 페이지의 모든 게시물을 표시합니다. 게시물 페이지가 저장되면 다음과 같이 표시됩니다.

Jekyll 사이트에 콘텐츠를 추가하는 방법

이제 Jekyll 사이트를 만들고 필요에 맞게 사이트를 구성했습니다. 마지막 단계는 콘텐츠를 추가하거나 Jekyll 사이트에 콘텐츠를 추가하는 방법을 배우는 것입니다.

모든 콘텐츠는 _posts 폴더에 저장됩니다. 각 콘텐츠는 YYYY-MM-DD-title.md (또는 HTML 파일의 경우 .html )와 유사한 명명 규칙을 사용하여 파일에 저장됩니다. 예를 들어 "My First Post"라는 게시물을 작성하려면 _posts 디렉토리에 2023-03-08-my-first-post.md 를 작성하십시오.

다음으로 각 게시물/콘텐츠 파일에 대해 상단에 게시물에 대한 서문을 추가했는지 확인합니다. 여기에는 레이아웃, 제목, 설명, 날짜 및 기타 정보가 포함됩니다.

 --- layout: post title: "How to Read Books: Tips and Strategies for Maximum Learning" subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge." date: 2023-03-02 23:45:13 -0400 background: '/assets/images/blog/books.jpeg' ---

그런 다음 HTML 태그 또는 마크다운 구문을 사용하여 머리말 블록 아래에 콘텐츠를 추가할 수 있습니다.

파일을 저장하면 Jekyll이 자동으로 빌드하여 사이트에 포함시킵니다.

Kinsta에 Jekyll 사이트를 배포하는 방법

Kinsta는 Jekyll을 비롯한 정적 웹사이트를 호스팅할 수 있는 클라우드 플랫폼입니다. 일부 구성을 설정하고 코드를 GitHub에 푸시한 다음 마지막으로 Kinsta에 배포하면 됩니다.

전제 조건: Jekyll 사이트 구성

Gemfile.lock 파일을 확인하고 모든 장치에 대한 플랫폼이 포함되어 있는지 확인하십시오. 모든 플랫폼이 제대로 구성되었는지 확인하려면 다음 명령을 실행하십시오.

 bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

그런 다음 Procfile 생성을 진행할 수 있습니다. 이 파일은 사이트가 배포될 때 실행되는 명령을 지정합니다. 이 파일은 MyKinsta의 프로세스 탭에서 실행할 명령을 자동으로 업데이트합니다. 다음은 Procfile에 추가할 명령입니다.

 web: bundle exec jekyll build && ruby -run -e httpd _site

Jekyll 사이트를 GitHub로 푸시

이 문서에서는 Git 명령을 사용하여 코드를 GitHub에 푸시해 보겠습니다. 먼저 GitHub에 리포지토리를 만듭니다. 이렇게 하면 리포지토리의 URL에 액세스할 수 있습니다.

이제 터미널을 열고 프로젝트가 포함된 디렉터리로 이동한 후 다음 명령을 실행하여 로컬 Git 리포지토리를 초기화할 수 있습니다.

 git init

이제 다음 명령을 사용하여 로컬 Git 리포지토리에 코드를 추가합니다.

 git add

이제 다음 명령을 사용하여 변경 사항을 커밋할 수 있습니다.

 git commit -m "my first commit"

참고: "my first commit"을 변경 사항을 설명하는 간단한 메시지로 바꿀 수 있습니다.

마지막으로 다음 명령을 사용하여 코드를 GitHub에 푸시합니다.

 git remote add origin [repository URL] git push -u origin master

참고: "[리포지토리 URL]"을 자신의 GitHub 리포지토리 URL로 바꿔야 합니다.

이 단계를 완료하면 코드가 GitHub로 푸시되고 리포지토리의 URL을 통해 액세스할 수 있습니다. 이제 Kinsta에 배포할 수 있습니다!

Jekyll 사이트를 Kinsta에 배포하기

Kinsta에 대한 배포는 단 몇 분 만에 이루어집니다. My Kinsta 대시보드에서 시작하여 로그인하거나 계정을 만드십시오. 다음으로 GitHub에서 Kinsta를 승인합니다.

그런 다음 다음 단계에 따라 Jekyll 사이트를 배포할 수 있습니다.

왼쪽 사이드바에서 애플리케이션을 클릭합니다.
서비스 추가 클릭
드롭다운에서 신청을 클릭합니다.

배포하려는 리포지토리를 선택할 수 있는 모달이 나타납니다. 리포지토리에 여러 분기가 있는 경우 배포할 분기를 선택합니다.

그런 다음 이 애플리케이션에 이름을 지정할 수 있습니다. 사용 가능한 25개 데이터 센터 위치 중에서 데이터 센터 위치를 선택하면 Procfile이 자동으로 웹 프로세스 명령을 제공합니다.

애플리케이션 배포가 시작됩니다. 몇 분 안에 웹 사이트의 배포된 버전에 액세스할 수 있는 링크가 제공됩니다. 이 경우 https://myblog-84b54.kinsta.app/ 입니다.

웹사이트 구축 스트레스는 이제 그만 - Jekyll의 번거로움 없는 접근 방식을 살펴보세요! 트윗하려면 클릭

요약

지금까지 Jekyll의 작동 방식과 Jekyll로 할 수 있는 다양한 사용자 정의에 대해 배웠습니다. 이제 Jekyll이 단순성, 유연성 및 강력한 기능으로 인해 정적 웹 사이트를 만드는 데 탁월한 도구라는 데 동의하는 것이 안전합니다.

Jekyll의 직관적인 템플릿 시스템, 유동적인 템플릿, 마크다운 및 기타 마크업 언어에 대한 기본 제공 지원을 통해 콘텐츠가 풍부한 사이트를 쉽고 빠르게 만들고 관리할 수 있습니다.

Kinsta의 애플리케이션 호스팅으로 모든 정적 웹사이트를 무료로 호스팅하고, 마음에 들면 월 $7부터 시작하는 Hobby Tier 요금제를 선택하세요.

지킬에 대해 어떻게 생각하세요? Jekyll을 활용하여 무언가를 구축한 적이 있습니까? 아래 의견 섹션에서 귀하의 프로젝트와 경험을 자유롭게 공유하십시오.