Wordpress 개발자를 위한 지킬

게시 됨: 2022-03-10

빠른 요약 ↬ Jekyll은 WordPress의 경량 대안으로 인기를 얻고 있습니다. 개발자가 개인 블로그를 구축하는 데 사용하는 도구로 자주 사용됩니다. 그것은 빙산의 일각에 불과합니다. 훨씬 더 많은 것을 할 수 있습니다! 이 기사에서 우리는 가상의 로펌을 위한 웹사이트를 구축하는 웹 개발자의 역할을 맡을 것입니다. WordPress는 이와 같은 웹사이트에 대한 명백한 선택이지만 고려해야 할 유일한 도구입니까? Jekyll을 사용하여 완전히 다른 웹사이트 구축 방법을 살펴보겠습니다.

이 기사에서 우리는 가상의 로펌을 위한 웹사이트를 구축하는 웹 개발자의 역할을 맡을 것입니다. WordPress는 이와 같은 웹사이트에 대한 명백한 선택이지만 고려해야 할 유일한 도구입니까? Jekyll을 사용하여 완전히 다른 웹사이트 구축 방법을 살펴보겠습니다.

SmashingMag에 대한 추가 정보:

Jekyll 및 GitHub 페이지로 블로그 구축
지킬을 사용한 콘텐츠 모델링
정적 사이트 생성기 검토: Jekyll, Middleman, Roots, Hugo
정적 사이트 생성기가 차세대 핵심 기술인 이유

점프 후 더! 아래에서 계속 읽기 ↓

지킬이란?

지킬은 정적 웹사이트 생성기입니다. 우리 서버에 소프트웨어와 데이터베이스가 설치되는 대신, Jekyll 웹사이트는 단순히 우리 컴퓨터의 파일 디렉토리입니다. 해당 디렉토리에서 Jekyll을 실행하면 정적 웹사이트가 생성되어 호스팅 제공업체에 업로드됩니다.

지킬은 왜?

우리는 Jekyll이 프로젝트에 적합한지 결정할 때 여러 가지 절충안을 고려해야 합니다.

지킬의 장점

복잡성 감소
Jekyll 웹사이트는 기본적으로 템플릿 언어가 있는 정적 웹사이트입니다. 만들고 유지 관리할 구성 요소가 적습니다. 서버에서는 파일을 제공할 수 있는 웹 서버만 있으면 됩니다.
속도
방문자가 Jekyll 사이트의 페이지를 볼 때 서버는 추가 처리 없이 기존 파일을 반환합니다. 이는 요청 시 페이지를 동적으로 생성하는 WordPress보다 훨씬 빠릅니다. 참고: WordPress 캐싱 플러그인은 이러한 성능 격차를 제거할 수 있습니다.
안정
WordPress에는 방문자를 위한 페이지를 생성하기 위해 함께 작동하는 더 많은 구성 요소가 있습니다. 구성 요소가 실패하면 방문자가 웹 사이트를 볼 수 없습니다. 웹 서버가 파일만 제공할 때 잘못될 가능성은 훨씬 적습니다.
보안
Wordpress는 CSRF, XSS 또는 SQL 주입 공격과 같은 보안 위험을 완화하기 위해 많은 일을 하지만 항상 최신 업데이트를 유지해야 합니다. 정적 사이트는 해커가 이용할 수 있는 동적 데이터 저장소가 없기 때문에 이 문제를 제거합니다.
소스 제어
Jekyll 웹사이트는 파일 디렉토리이므로 전체 웹사이트를 Git 저장소에 저장할 수 있습니다. 리포지토리로 작업하면 많은 이점을 얻을 수 있습니다(VersionPress가 개발 중이고 WordPress에 대해 이 워크플로를 사용할 수 있음).

지킬의 단점

GUI 없음
클라이언트는 WordPress.com에 가입하고 테마를 선택하고 기본 웹사이트를 스스로 설정할 수 있습니다. Jekyll은 대부분의 비기술적 사용자를 압도하는 명령줄 도구입니다. CloudCannon(면책 조항: 공동 설립자임), Forestry, Jekyll Admin, Netlify CMS, Prose 및 Siteleaf를 비롯한 Jekyll용 타사 GUI가 있습니다. 그러나 클라이언트에 전달되기 전에 개발자가 설정해야 합니다.
빌드 시간
우리 상황에서는 웹사이트가 1초 이내에 구축되기 때문에 문제가 되지 않습니다. 그러나 10,000~100,000개의 게시물이 있는 더 큰 웹사이트는 구축하는 데 몇 분이 걸릴 수 있습니다. 브라우저에서 미리보기 전에 웹 사이트가 빌드될 때까지 기다려야 하기 때문에 개발할 때 답답합니다.
테마
Jekyll에는 몇 가지 테마가 있지만 WordPress에서 사용할 수 있는 수천 가지 테마에 비하면 아무것도 아닙니다.
확장성
WordPress 웹 사이트에 사용자 지정 기능을 추가해야 하는 경우 자체 PHP를 작성할 수 있습니다. Jekyll용 사용자 지정 Ruby 플러그인을 만들 수 있지만 요청 시간이 아닌 빌드 시간에 실행됩니다.
지원하다
WordPress에는 전문가 커뮤니티와 도움을 줄 기타 리소스가 있습니다. Jekyll은 비슷한 리소스를 가지고 있지만 규모는 작습니다.

Jekyll은 이 프로젝트와 같이 대부분의 정보 제공 웹사이트를 위한 훌륭한 도구입니다. 프로젝트가 애플리케이션에 가깝다면 JavaScript를 사용하여 동적 요소를 추가할 수 있지만 언젠가는 WordPress와 같은 백엔드가 필요할 것입니다.

구현

WordPress와 Jekyll은 웹사이트 구축에 대해 서로 다른 접근 방식을 취하지만 많은 기능을 공유합니다. Jekyll 웹사이트 구축을 시작해 보겠습니다.

설치 중

WordPress의 일반적인 개발 환경에는 Apache 또는 NGINX, PHP 및 MySQL이 설치되어 있어야 합니다. 그런 다음 WordPress를 설치하고 웹 서버를 구성합니다.

Jekyll의 경우 Ruby가 설치되어 있는지 확인해야 합니다(때로는 생각보다 어렵습니다). 그런 다음 Jekyll gem을 설치합니다.

 gem install jekyll

macOS를 사용하는 경우 먼저 Xcode 개발자가 설치되어 있는지 확인하십시오.

 xcode-select --install

달리기

WordPress 사이트를 실행하는 것은 일반적으로 데이터베이스와 웹 서버를 시작하는 것으로 구성됩니다.

Jekyll에서 터미널의 사이트 파일(이 시점에서는 빈 디렉토리)으로 이동하여 다음을 실행합니다.

 jekyll serve

이것은 포트 4000 에서 로컬 웹 서버를 시작하고 파일이 변경될 때마다 사이트를 재구축합니다.

페이지

이제 첫 페이지를 만들 시간입니다. 홈 페이지부터 시작하겠습니다. 페이지는 관련 날짜가 없는 독립형 콘텐츠용입니다. WordPress는 페이지 콘텐츠를 데이터베이스에 저장합니다.

Jekyll에서 페이지는 HTML 파일입니다. 순수한 HTML로 시작한 다음 필요에 따라 Jekyll 기능을 추가합니다. 현재 상태의 index.html 은 다음과 같습니다.

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> </div> </section> <footer> <p class="copyright"> &copy; 2016 </p> </footer> </body> </html>

액체

WordPress에서는 PHP를 작성하여 거의 모든 작업을 수행할 수 있습니다. 지킬은 다른 접근 방식을 취합니다. 완전한 프로그래밍 언어를 제공하는 대신 Liquid라는 템플릿 언어를 사용합니다. (WordPress에는 Timber와 같은 템플릿 언어도 있습니다.)

index.html 의 바닥글에는 연도가 포함된 저작권 표시가 포함되어 있습니다.

 <p class="copyright"> &copy; 2016 </p>

우리는 이것을 매년 업데이트하는 것을 기억하지 못할 것이므로 Liquid를 사용하여 현재 연도를 출력해 보겠습니다.

 <p class="copyright"> &copy; {{ site.time | date: "%Y" }} </p>

우리는 Jekyll에서 정적 웹사이트를 구축 중이므로 이 날짜는 웹사이트를 다시 구축할 때까지 변경되지 않습니다. 웹사이트를 다시 만들 필요 없이 날짜를 변경하려면 JavaScript를 사용할 수 있습니다.

포함

index.html 에 있는 HTML의 대부분은 전체 레이아웃을 설정하기 위한 것이며 페이지 간에 변경되지 않습니다. 이 반복은 많은 유지보수로 이어지므로 줄여줍시다.

포함은 내가 PHP에서 배운 첫 번째 것들 중 하나였습니다. 포함을 사용하여 머리글 및 바닥글 콘텐츠를 다른 파일에 넣은 다음 동일한 콘텐츠를 여러 페이지에 포함할 수 있습니다.

지킬은 똑같은 기능을 가지고 있습니다. 포함은 _includes 라는 폴더에 저장됩니다. 우리는 Liquid를 사용하여 index.html 에 포함시킵니다.

 {% include header.html %} <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> {% include footer.html %}

레이아웃

포함은 반복의 일부를 줄이지만 여전히 각 페이지에 있습니다. WordPress는 웹사이트의 구조를 콘텐츠와 분리하는 템플릿 파일로 이 문제를 해결합니다.

템플릿 파일에 해당하는 Jekyll은 레이아웃입니다. 레이아웃은 콘텐츠에 대한 자리 표시자가 있는 HTML 파일입니다. _layouts 디렉토리에 저장됩니다. 기본 HTML 레이아웃을 포함하는 _layouts/default.html 을 생성합니다.

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> {{ content }} </div> </section> <footer> <p class="copyright"> &copy; {{ site.time | date: "%Y-%m-%d" }} </p> </footer> </body> </html>

그런 다음 레이아웃을 지정하여 index.html 의 포함을 교체합니다. 파일 상단에 있는 두 개의 삼중 대시 라인 사이에 있는 YAML의 스니펫인 앞부분을 사용하여 레이아웃을 지정합니다(자세한 내용은 곧 설명).

 --- layout: default --- <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote>

이제 모든 페이지에서 동일한 레이아웃을 가질 수 있습니다.

서문

WordPress에서 사용자 정의 필드를 사용하면 게시물에 메타 데이터를 설정할 수 있습니다. 이를 사용하여 SEO 태그를 설정하거나 특정 게시물의 페이지 섹션을 표시하거나 숨길 수 있습니다.

이 개념을 Jekyll에서는 Front Matter라고 합니다. 이전에 우리는 index.html 의 레이아웃을 설정하기 위해 머리말을 사용했습니다. 이제 자체 변수를 설정하고 Liquid를 사용하여 액세스할 수 있습니다. 이것은 우리 웹사이트의 반복을 더욱 줄여줍니다.

index.html 에 여러 평가를 추가해 보겠습니다. HTML을 복사하여 붙여 넣을 수 있지만 다시 한 번 유지 관리가 증가합니다. 대신 앞문에 회원 평가를 추가하고 Liquid로 반복해 보겠습니다.

 --- layout: default testimonials: - message: We use Justice Law in all our endeavours. They offer an unparalleled service when it comes to running a business. image: "/images/joice.jpeg" name: Joice Carmold - message: Justice Law are the best of the best. Being local, they care about people and have strong ties to the community. image: "/images/peter.jpeg" name: Peter Rottenburg - message: Justice Law were everything we could have hoped for when buying our first home. Highly recommended to all. image: "/images/gibblesto.jpeg" name: D. and G. Gibbleston --- <div class="testimonials"> {% for testimonial in page.testimonials %} <blockquote class="testimonial"> <p class="testimonial-message">{{ testimonial.message }}</p> <p class="testimonial-author"> <img src="{{ testimonial.image }}" alt="Photo of {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> {% endfor %} </div>

게시물

WordPress는 데이터베이스의 게시물에 대한 HTML 콘텐츠, 날짜 및 기타 메타 데이터를 저장합니다.

Jekyll에서 각 게시물은 _posts 디렉토리에 저장된 정적 파일입니다. 파일 이름에는 게시물의 게시 날짜와 제목이 있습니다(예: _posts/2016-11-11-real-estate-flipping.md ). 블로그 게시물의 소스 코드는 다음 구조를 사용합니다.

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

또한 머리말을 사용하여 범주와 태그를 설정할 수도 있습니다.

머리말 아래에는 Markdown으로 작성된 게시물의 본문이 있습니다. 마크다운은 HTML에 대한 더 간단한 대안입니다.

Jekyll을 사용하면 다른 레이아웃을 상속하는 레이아웃을 만들 수 있습니다. 이 게시물에 post 의 레이아웃이 있다는 것을 눈치채셨을 것입니다. post 레이아웃은 기본 레이아웃을 상속하고 날짜와 제목을 추가합니다.

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

게시물을 반복하고 링크하기 위해 blog.html 을 만들어 보겠습니다.

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

컬렉션

WordPress에서 사용자 정의 게시물 유형은 콘텐츠 그룹을 관리하는 데 유용합니다. 예를 들어 평가, 제품 또는 부동산 목록에 대해 사용자 정의 게시물 유형을 사용할 수 있습니다.

Jekyll에는 이 기능이 있으며 이를 컬렉션이라고 합니다.

about.html 페이지는 직원의 프로필을 보여줍니다. 스태프에 대한 메타데이터(이름, 이미지, 전화번호, 약력)를 앞부분에 정의할 수 있었지만 그 페이지에서만 참조할 수 있었습니다. 앞으로는 동일한 데이터를 사용하여 블로그 게시물에 작성자에 대한 정보를 표시하고자 합니다. 컬렉션을 통해 웹사이트 어디에서나 직원을 참조할 수 있습니다.

웹사이트 구성은 _config.yml 에 있습니다. 여기에서 새 컬렉션을 설정합니다.

 collections: staff_members: output: false

이제 직원을 추가합니다. 각 직원은 컬렉션 이름이 있는 폴더에 저장된 Markdown 파일에 표시됩니다. 예: _staff_members/jane-doe.md .

머리말에 메타 데이터를 추가하고 본문에 안내문을 추가합니다.

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

게시물과 마찬가지로 about.html 의 컬렉션을 반복하여 각 직원을 표시할 수 있습니다.

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

검색

WordPress에는 강력한 내장 검색과 훨씬 더 강력한 검색 플러그인이 있습니다.

Jekyll에는 검색 기능이 내장되어 있지 않지만 다음과 같은 솔루션이 있습니다.

Lunr.js와 같은 JavaScript 라이브러리를 사용한 클라이언트 측 검색(Jekyll.tips에는 설정 방법에 대한 자습서가 있습니다);
고성능 검색을 위한 Algolia와 같은 타사 솔루션
Google 맞춤 검색과 같은 드롭인 솔루션.

플러그인

플러그인은 WordPress의 매력적인 부분입니다. WordPress가 거의 모든 작업을 수행하도록 하는 기능을 쉽게 로드할 수 있습니다.

Jekyll 웹사이트에서는 많은 인기 있는 WordPress 플러그인이 필요하지 않습니다.

iThemes 보안
Jekyll 웹사이트는 실행 중인 웹 서버만큼 안전합니다.
백업 가드
Jekyll 웹사이트는 전체 변경 기록에 대한 액세스를 제공하는 저장소에 있습니다.
WP 슈퍼 캐시
우리 지킬 웹사이트는 이미 정적입니다.

다른 WordPress 플러그인에는 웹 사이트에 드롭할 수 있는 타사 동등 항목이 있습니다.

Contact Form 7과 같은 연락처 양식 플러그인은 Formspree, FormKeep 또는 Wufoo로 대체할 수 있습니다.
간단한 상점의 경우 WP eCommerce를 Snipcart, Gumroad 또는 Stripe로 대체할 수 있습니다.
Akismet으로 WordPress 댓글 대신 Disqus, Facebook 댓글 또는 IntenseDebate를 사용할 수 있습니다.

일부 WordPress 플러그인은 핵심 Jekyll로 에뮬레이트할 수 있습니다. 다음은 전면과 Liquid를 사용하는 사진 갤러리입니다.

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

우리는 그것을 완성하기 위해 우리 자신의 JavaScript와 CSS를 추가하기만 하면 됩니다.

Jekyll 플러그인은 다른 WordPress 플러그인의 기능을 에뮬레이트할 수 있습니다. Jekyll 플러그인은 웹사이트가 생성되는 동안에만 실행됩니다. 실시간 기능은 추가하지 않습니다.

One Click XML Sitemap 대신 Jekyll Sitemap Generator 플러그인을 사용하십시오.
지킬 SEO 태그는 SEO 마법사의 일부 기능을 제공합니다.
다국어 웹사이트에서는 WPGlobus 대신 Jekyll Language Plugin을 사용하세요.

버전 관리

Jekyll과 같은 정적 사이트 생성기를 사용하는 주요 이점 중 하나는 전체 사이트와 콘텐츠를 Git에 저장할 수 있다는 것입니다. 기본 수준에서 Git은 사이트의 모든 변경 기록을 제공합니다. 팀의 경우 모든 종류의 워크플로 및 승인 프로세스를 엽니다.

GitHub에는 Git을 배우는 초보자를 위한 환상적인 대화형 튜토리얼이 있습니다.

클라이언트 핸드오프

그것은 웹 사이트를 만드는 너트와 볼트를 다룹니다. 전체 Jekyll 웹사이트가 어떻게 조화를 이루는지 궁금하시다면 Justice 템플릿을 살펴보세요. Jekyll을 위한 무료 MIT 라이선스 템플릿입니다. 위의 스니펫은 이 템플릿을 기반으로 합니다.

WordPress CMS는 플랫폼에 내장되어 있으므로 클라이언트용 계정을 설정해야 합니다.

Jekyll 웹사이트를 통해 Git 리포지토리를 앞에서 언급한 Jekyll GUI 중 하나에 연결합니다. 이 워크플로의 좋은 점 중 하나는 클라이언트 변경 사항이 리포지토리에 다시 커밋된다는 것입니다. 개발자로서 우리는 비개발자가 웹사이트를 업데이트하더라도 로컬 워크플로를 계속 사용할 수 있습니다.

일부 Jekyll GUI는 호스팅을 제공하는 반면 다른 GUI는 Amazon S3 버킷 또는 GitHub 페이지로 출력하는 방법이 있습니다.

요약

현재 Jekyll 웹사이트는 라이브 상태이며 클라이언트가 편집할 수 있습니다. 웹 사이트를 변경해야 하는 경우 저장소에 푸시하기만 하면 자동으로 라이브 배포됩니다.

<div class=“testimonials”> {page.testimonials %의 평가에 대한 %} <blockquote class=“testimonial”> <p class=“testimonial-message”>{{ testimonial.message }}</p> <p 클래스 =“testimonial-author”> <img src=“{{ testimonial.image }}” alt=“{{ testimonial.name }}의 사진”> {{ testimonial.name }} </p> </blockquote> { % 끝 %} </div>

게시물