Wordpress開発者のためのJekyll

公開: 2022-03-10

簡単なまとめ↬Jekyllは、WordPressの軽量な代替品として人気を集めています。開発者が個人のブログを作成するために使用するツールとして、それはしばしば鳩穴にされます。それは氷山の一角に過ぎません—それははるかに多くの能力があります！この記事では、架空の法律事務所のWebサイトを構築するWeb開発者の役割を引き受けます。 WordPressは、このようなWebサイトにとって当然の選択ですが、検討すべき唯一のツールですか？ Jekyllを使用してWebサイトを構築するまったく異なる方法を見てみましょう。

この記事では、架空の法律事務所のWebサイトを構築するWeb開発者の役割を引き受けます。 WordPressは、このようなWebサイトにとって当然の選択ですが、検討すべき唯一のツールですか？ Jekyllを使用してWebサイトを構築するまったく異なる方法を見てみましょう。

SmashingMagの詳細：

JekyllとGitHubPagesでブログを作成する
Jekyllによるコンテンツモデリング
静的サイトジェネレーターのレビュー：Jekyll、Middleman、Roots、Hugo
静的サイトジェネレーターが次の大きなものである理由

ジャンプした後もっと！以下を読み続けてください↓

Jekyllとは何ですか？

Jekyllは静的なWebサイトジェネレーターです。 Jekyll Webサイトは、サーバーにソフトウェアとデータベースをインストールする代わりに、コンピューター上のファイルのディレクトリにすぎません。そのディレクトリでJekyllを実行すると、静的Webサイトが生成され、ホスティングプロバイダーにアップロードされます。

なぜジキル？

Jekyllがプロジェクトに適しているかどうかを判断する際には、いくつかのトレードオフを考慮する必要があります。

ジキルの利点

複雑さが少ない
Jekyll Webサイトは、基本的にテンプレート言語を使用した静的Webサイトです。作成および保守するコンポーネントが少なくなります。サーバーには、ファイルを提供できるWebサーバーのみが必要です。
スピード
訪問者がJekyllサイトのページを表示すると、サーバーは追加の処理なしで既存のファイルを返します。これは、リクエスト時に動的にページを生成するWordPressよりもはるかに高速です。注：WordPress Cachingプラグインは、このパフォーマンスのギャップをなくすことができます。
安定
WordPressには、訪問者用のページを生成するために連携して動作するより多くのコンポーネントがあります。コンポーネントに障害が発生すると、訪問者はWebサイトを表示できなくなる可能性があります。 Webサーバーがファイルのみを提供している場合、問題が発生する可能性ははるかに少なくなります。
安全
Wordpressは、CSRF、XSS、SQLインジェクション攻撃などのセキュリティリスクを軽減するために多くのことを行いますが、常に最新の更新を入手できることに依存しています。ハッカーが悪用できる動的データストレージがないため、静的サイトはこの問題を排除します。
ソース制御
Jekyll Webサイトはファイルのディレクトリであるため、Webサイト全体をGitリポジトリに保存できます。リポジトリを操作すると、多くの利点が得られます（ただし、VersionPressは開発中であり、WordPressでこのワークフローを有効にします）。

ジキルのデメリット

GUIなし
クライアントはWordPress.comにサインアップし、テーマを選択して、自分で基本的なWebサイトをセットアップできます。 Jekyllはコマンドラインツールであり、技術者以外のほとんどのユーザーを圧倒します。 CloudCannon（免責事項：私は共同創設者です）、Forestry、Jekyll Admin、Netlify CMS、Prose、SiteleafなどのJekyll用のサードパーティGUIがあります。ただし、これらはクライアントに渡される前に開発者が設定する必要があります。
ビルド時間
私たちの状況では、ウェブサイトが1秒以内に構築されるため、これは問題ではありません。ただし、投稿数が10,000〜100,000の大規模なWebサイトは、構築に数分かかる場合があります。これは、Webサイトが構築されるのを待ってからブラウザーでプレビューする必要があるため、開発中はイライラします。
テーマ
Jekyllにはいくつかのテーマがありますが、WordPressで利用できる何千ものテーマと比較しても何もありません。
拡張性
WordPress Webサイトにカスタム機能を追加する必要がある場合は、独自のPHPを作成できます。 Jekyll用のカスタムRubyプラグインを作成できますが、これらはリクエスト時ではなくビルド時に実行されます。
サポート
WordPressには、専門家やその他のリソースの巨大なコミュニティがあります。 Jekyllにも同様のリソースがありますが、規模は小さくなっています。

Jekyllは、このプロジェクトのように、主に情報を提供するWebサイトに最適なツールです。プロジェクトがアプリケーションの場合は、JavaScriptを使用して動的要素を追加できますが、ある時点で、WordPressのようなバックエンドが必要になる可能性があります。

実装

WordPressとJekyllは、ウェブサイトを構築するために異なるアプローチを取りますが、多くの機能を共有しています。 JekyllWebサイトの構築を始めましょう。

インストール

WordPressの一般的な開発環境では、ApacheまたはNGINX、PHP、およびMySQLをインストールする必要があります。次に、WordPressをインストールし、Webサーバーを構成します。

Jekyllの場合、Rubyがインストールされていることを確認する必要があります（これは思ったより難しい場合があります）。次に、Jekyllgemをインストールします。

 gem install jekyll

macOSを使用している場合は、最初にXcode開発者がインストールされていることを確認してください。

 xcode-select --install

ランニング

WordPressサイトの運営は通常、データベースとWebサーバーの起動で構成されます。

Jekyllでは、ターミナルのサイトファイル（この時点では空のディレクトリ）に移動して、次のコマンドを実行します。

 jekyll serve

これにより、ポート4000でローカルWebサーバーが起動し、ファイルが変更されるたびにサイトが再構築されます。

ページ

最初のページを作成する時が来ました。ホームページから始めましょう。ページは、日付が関連付けられていないスタンドアロンコンテンツ用です。 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を書くことができます。 Jekyllは別のアプローチを取ります。完全なプログラミング言語を提供する代わりに、Liquidという名前のテンプレート言語を使用します。（WordPressには、Timberなどのテンプレート言語もあります。）

index.htmlのフッターには、1年の著作権表示が含まれています。

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

これを毎年更新することを覚えている可能性は低いので、Liquidを使用して現在の年を出力してみましょう。

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

Jekyllで静的なWebサイトを構築しているため、この日付はWebサイトを再構築するまで変更されません。 Webサイトを再構築せずに日付を変更したい場合は、JavaScriptを使用できます。

含まれています

index.htmlのHTMLの大部分は、全体的なレイアウトを設定するためのものであり、ページ間で変更されることはありません。この繰り返しは多くのメンテナンスにつながるので、減らしましょう。

インクルードは、私がPHPで最初に学んだことの1つでした。インクルードを使用すると、ヘッダーとフッターのコンテンツを異なるファイルに配置してから、同じコンテンツを複数のページに含めることができます。

Jekyllにはまったく同じ機能があります。インクルードは_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は、Webサイトの構造をコンテンツから分離するテンプレートファイルを使用してこの問題を解決します。

テンプレートファイルに相当する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のインクルードを置き換えます。フロントマターを使用してレイアウトを指定します。これは、ファイルの上部にある2本の破線の間にある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タグを設定したり、特定の投稿のページのセクションを表示および非表示にしたりできます。

この概念は、ジキルではフロントマターと呼ばれています。以前は、フロントマターを使用してindex.htmlのレイアウトを設定しました。これで、独自の変数を設定し、Liquidを使用してそれらにアクセスできます。これにより、当社のWebサイトでの繰り返しがさらに減少します。

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ページには、スタッフのプロフィールが表示されます。フロントマターでスタッフのメタデータ（名前、画像、電話番号、経歴）を定義することはできましたが、その場合はそのページでしか参照できませんでした。将来的には、同じデータを使用して、ブログ投稿に作成者に関する情報を表示したいと考えています。コレクションを使用すると、Webサイトのどこにいてもスタッフを参照できます。

私たちのウェブサイトの設定は_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のWebサイトでは、人気のあるWordPressプラグインの多くは必要ありません。

iThemesセキュリティ
私たちのJekyllWebサイトは、それが実行されているWebサーバーと同じくらい安全です。
バックアップガード
JekyllのWebサイトは、変更の履歴全体にアクセスできるリポジトリにあります。
WPスーパーキャッシュ
JekyllのWebサイトはすでに静的です。

他のWordPressプラグインには、Webサイトにドロップできるサードパーティの同等のプラグインがあります。

Contact Form 7などのContactFormプラグインは、Formspree、FormKeep、またはWufooに置き換えることができます。
シンプルなストアの場合、WP eコマースはSnipcart、Gumroad、またはStripeに置き換えることができます。
AkismetでのWordPressコメントの代わりに、Disqus、Facebookコメント、またはIntenseDebateを使用できます。

一部のWordPressプラグインは、コアJekyllでエミュレートできます。フロントマターとリキッドを使用したフォトギャラリーは次のとおりです。

 --- 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プラグインは、Webサイトが生成されている間のみ実行されることに注意してください。リアルタイム機能は追加されません。

ワンクリックXMLサイトマップの代わりに、Jekyllサイトマップジェネレータプラグインを使用してください。
Jekyll SEOタグは、SEOウィザードの機能の一部を提供します。
多言語WebサイトのWPGlobusの代わりに、Jekyll言語プラグインを使用してください。

バージョン管理

Jekyllのような静的サイトジェネレーターを使用する主な利点の1つは、サイト全体とコンテンツをGitに配置できることです。基本的なレベルでは、Gitはサイトのすべての変更の履歴を提供します。チームにとっては、あらゆる種類のワークフローと承認プロセスが開かれます。

GitHubには、Gitを学ぶ初心者向けの素晴らしいインタラクティブチュートリアルがあります。

クライアントハンドオフ

それはウェブサイトを作成するための要点をカバーしています。 Jekyll Webサイト全体がどのように組み合わされているかを知りたい場合は、Justiceテンプレートを参照してください。これは、Jekyll用の無料のMITライセンステンプレートです。上記のスニペットは、このテンプレートに基づいています。

WordPress CMSはプラットフォームに組み込まれているため、クライアントのアカウントを設定する必要があります。

Jekyll Webサイトを使用して、Gitリポジトリを前述のJekyllGUIの1つにリンクします。このワークフローの優れた点の1つは、クライアントの変更がリポジトリにコミットされることです。開発者として、開発者以外の人がWebサイトを更新している場合でも、ローカルワークフローを引き続き使用できます。

一部のJekyllGUIはホスティングを提供しますが、他のGUIはAmazonS3バケットまたはGitHubPagesに出力する方法を備えています。

概要

この時点で、Jekyll Webサイトは公開されており、クライアントが編集できます。 Webサイトに変更を加える必要がある場合は、リポジトリにプッシュするだけで、自動的にライブでデプロイされます。

<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 =“写真{{testimonial.name}}”> {{testimonial.name}} </ p> </ blockquote> { ％endfor％} </ div>

投稿