序章
Jekyllは静的サイトジェネレーターであり、コンテンツ管理システム（CMS）の利点のいくつかを提供すると同時に、そのようなデータベース駆動型サイトによってもたらされるパフォーマンスとセキュリティの問題を回避します。 有用性はブログサイトに限定されませんが、日付で整理されたコンテンツを処理するための特別な機能を備えた「ブログ対応」です。 Jekyllは、オフラインで作業する必要がある人、コンテンツを維持するためにWebフォームの代わりに軽量のエディターを使用することを好む人、およびバージョン管理を使用してWebサイトへの変更を追跡したい人に最適です。
このチュートリアルでは、JekyllがURLとリンクを処理する方法に焦点を当てます。これは、URLを変更すると、他の人のページへのリンクや、自分のサイトのコンテンツ内のリンクが壊れてしまうためです。 URLは、人々がWebサイトを見つけて使用する方法にとって重要であり、サイトを初めて公開する前に検討する必要があります。
JekyllがデフォルトでURLを作成する方法を見て、個々のファイルまたはサイト全体のパターンを変更する方法を示します。 次に、コンテンツ内のページにリンクする方法を見ていきます。 最後に、テスト用にサイトをステージングします。
前提条件
このチュートリアルに従うには、前のガイドを完了する必要があります。
これらを完了すると、開始する準備が整います。
静的サイトのファイル構造
このシリーズのパート2では、 jekyll new コマンドを実行し、結果のサイトがWebブラウザでどのように表示されるかに焦点を当てました。 それでは、Jekyllが静的サイトを作成したときに作成されたファイル構造を見てみましょう。
注：このシリーズのパート2を実行した場合は、追加のアセットディレクトリと連絡先ページが必要です。 そうしなかった場合、またはページを追加して実験した場合は、構造が多少異なる場合があります。
The _site 以下で強調表示されているディレクトリとその下のすべてのコンテンツは、静的サイトを構成します。
.
├── 404.html
├── about.md
├── assets
│ └── postcard.jpg
├── _config.yml
├── contact.md
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│ └── 2017-09-04-welcome-to-jekyll.markdown
└── _site
├── 404.html
├── about
│ └── index.html
├── assets
│ ├── main.css
│ └── postcard.jpg
├── contact.html
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2017
└── 09
└── 04
└── welcome-to-jekyll.html
データベース駆動型のWebサイトとは異なり、静的WebサイトのURLは、ディスク上のディレクトリ構造を文字通り表現したものです。 Jekyllは、投稿のカテゴリをディレクトリに変換し、日付をファイル構造に分解しました。これは、多くのブログで一般的なパターンであるため、この投稿の最終的なURLパターンは次のようになります。 /category1/category2/YYYY/MM/DD/words-in-title.html、したがって、リテラルURLは http://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.html.
スキャフォールディングはこれらのディレクトリの動的インデックスページを提供しないため、ユーザーがURLの一部を削除して特定のカテゴリ、年、月、または日からすべての投稿を検索しようとすると、次の2つのいずれかが発生します。 Webサーバーで自動ディレクトリインデックス作成が許可されている場合は、ファイルとディレクトリの情報が表示されます。
2番目のケースでは、実稼働サイトの管理者がサーバー上のディレクトリリストを無効にした場合、ユーザーはアクセスを拒否されます。
カテゴリと日付ベースの構造はブログURLの一般的なパターンですが、URLの構造をどのように決定するかは、特定のサイトのニーズによって異なります。
デフォルトを変更したい場合、JekyllはURLを作成するのをかなり簡単にします。 URLパターンの変更は、検索エンジンでコンテンツを効果的に見つける方法や、他のユーザーがサイトに作成するリンクに影響するため、サイトを初めて公開する前に、これについて考えておくと便利です。
URLの制御方法を理解する
URLを作成するためのJekyllのシステムは、柔軟性と強力さの両方を備えています。 これらは、ソースファイルに名前を付けて保存する場所と方法に影響されるだけでなく、特定の値またはより一般的なパターンで動的にオーバーライドされる可能性があります。
ページのデフォルト
連絡先ページの場合と同じように、サイトのルートにページを作成すると、ファイル名、 contact.md に変換されます contact.html、および結果のURLもドキュメントルートのすぐ外にあります。 http://203.0.113.0:4000/contact.html. 1つ以上のサブディレクトリに配置すると、それらもURLの一部になります。 たとえば、ページを配置すると contact.md と呼ばれるディレクトリで main URLは次のようになります http://203.0.113.0:4000/main/contact.html.
デフォルトの投稿
投稿はページとは動作が異なります。 まず、カテゴリを持つことが許可されており、それらのカテゴリは静的サイトのディレクトリとURLの一部になります。 デフォルトの投稿パターンは、そのフロントマターの連結です。
title: "Welcome to Jekyll!"
date: 2017-09-04 03:36:31 +0000
categories: jekyll update
の中に _site ディレクトリ、サブディレクトリは jekyll/update/2017/09/04/welcome-to-jekyll.html、パターンに従う /:categories/:year/:month/:day/:title 結果としてURL http://203.0.113.0:4000/jekyll/update/2017/09/04/welcome-to-jekyll.html.
フロントマターからカテゴリを削除すると、次にサイトが生成されたときにディレクトリ構造が変更され、URLの一部ではなくなります。
ページと投稿のデフォルトは、2つの方法でオーバーライドできます。
パーマリンク個々のページのフロントマターでパーマリンクを定義すると、ページと投稿の両方のデフォルトが上書きされ、ファイルごとにリンクを正確に指定できるようになります。 これは、[バージョン情報]ページのデフォルトのコンテンツで設定されました。パーマリンク値は、 /about/ URLになりました http://203.0.113.0:4000/about/ これはディスク上に次のように存在します about/index.html
パーマリンクパターンJekyllを使用すると、デフォルトパターン全体を再定義できます。 _config.yml これは、ページと投稿の両方に影響しますが、重要な違いが1つあります。投稿はフロントマターのカテゴリと日付と時刻の要素にアクセスできますが、ページにはアクセスできません。 ページのURLはパターンに従い、投稿固有の要素を適切に省略します。
パーマリンクパターンのオーバーライドの動作を確認するために、投稿のカテゴリを保持し、日付要素を省略し、投稿またはページのタイトルで終わるパターンを作成します。
- nano ~/www/_config.yml
ファイルの最後に次の値を追加します。
. . .
permalink: /:categories/:title/
構成ファイルの編集による変更を確認するには、次のコマンドでWebサーバーを停止する必要があります。 CTRL-C、次に再起動します。
- jekyll serve --host=203.0.113.0
ディスク上で、ファイル構造が変更されました。
├── about.md
├── assets
│ └── postcard.jpg
├── _config.yml
├── contact.md
├── css
│ └── main.scss
├── feed.xml
├── Gemfile
├── Gemfile.lock
├── index.html
├── _posts
│ ├── 2017-09-04-welcome-to-jekyll.markdown
│ └── 2017-09-04-link-test.md
└── _site
├── about
│ └── index.html
├── assets
│ └── postcard.jpg
├── contact # originally `contact.html`
│ └── index.html
├── css
│ └── main.css
├── feed.xml
├── Gemfile
├── Gemfile.lock
└── index.html
└── jekyll
└── update
└── welcome-to-jekyll
└── index.html
ファイル構造のこれらの変更は、URLの変更に変換されます。 Aboutページはまだにあります /about/ そのパーマリンクは最初から個々のファイルに設定されていたからです。 連絡先ページがから変更されました /contact.html に /contact/、およびリンクテストの投稿は現在 /jekyll/update/welcome-to-jekyll/ パーマリンクパターンへのサイト全体の変更のため。 Jekyllパーマリンクのドキュメントで、URLの作成に使用できるトークンについて詳しく知ることができます。
投稿への堅牢なリンクの作成
ページが配置されているアドレスを制御する方法がわかったので、これらのアドレスにリンクするときに考慮すべきことがいくつかあります。
完全に静的なサイトのページの本文にリンクを作成する場合、リンク先のページのURLをいくつかの形式のいずれかで使用します。
- 絶対リンク：
[Link Text]([http://203.0.113.0:4000/post-name)これはオフサイトリンクの正しい形式ですが、ベースURLにポート番号を保持すると本番環境でリンクが切断され、開発サイトでリンクが切断されるため、サイトには不適切です。 - ルート相対リンク：
[Link Text(/[post-name)ルート相対リンクはローカルリンクに対してのみ機能し、最初のスラッシュのために、Webルートから始まるサーバー上のディレクトリ構造に従います。/. - 相対リンク：
[Link Text](post-name)相対リンクもローカルリンク用であり、リンクを含むページと同じディレクトリからのパスをたどり始めます。
両方の相対リンクにも同様の問題があります。 リンク形式を変更する場合は、コンテンツ内の古いURLへのすべてのリンクを見つけて、それらを更新する必要があります。 JekyllのLiquidtemplatingは、より柔軟な投稿にリンクする方法を提供します。 文字通りのリンクを使用する代わりに、 post_url 次のようにリンクする代わりに、ファイルの名前を持つ変数：
[Link Text](/jekyll/update/2016/09/08/welcome-to-jekyll.html)
このようにリンクします：
[Link Text]({% post_url 2010-09-08-welcome-to-jekyll %})
ファイル名を含めるだけでよく、ファイル名を含める必要はありません。 _posts ディレクトリまたはファイルの拡張子。 この方法で作成された投稿へのリンクは、構成したパーマリンク設定で引き続き機能します。
注：現在、このダイナミックリンク機能は投稿では利用できますが、ページでは利用できませんが、ページの計画は進行中です。
新しい投稿を作成する
リンクの作成について学んだことを適用するために、新しい投稿を作成します。 エディターで新しいファイルを開き、必要に応じてファイル名に日付を設定します。
- nano ~/www/_posts/2017-09-04-link-test.md
投稿例のようにフロントマターを設定します。ここの日付が前の手順のファイル名と一致していることを確認してください。 リンクテストファイルの名前には、yourサイトのIPアドレスまたはドメイン名と日付を必ず置き換えてください。
---
layout: post
date: 2017-09-04 07:00
title: Link Test
---
Welcome to my Jekyll Blog. I’m exploring how Jekyll handles links:
* [An absolute link](http://203.0.113.0:4000/about/)
* [A root relative link](/jekyll/update/welcome-to-jekyll/)
* [A Jekyll post_url link]({% post_url 2017-09-04-link-test %})
保存して終了。 ホームページに再度アクセスすると、新しい投稿が自動的に表示されます。
新しい投稿へのホームページのリンクをたどって、それぞれを試してみてください。 3つすべてが開発サイトで機能するはずです。
絶対リンクは開発サイトでは機能しますが、別のURLまたはポート番号のないサイトにデプロイすると壊れます。 ルート相対リンクは、パーマリンクスキームが同じである限り、新しい場所で機能します。 ただし、変更が加えられた場合、このリンクは更新されず、どのサイトでも壊れます。 ジキル post_url linkは、サイトが解析されるときにルート相対リンクを作成します。 Jekyllはどこでも機能するだけでなく、サイトを解析するときにリンク先の投稿が実際に存在することを確認します。 投稿に含まれていない場合は、「Liquid Exception」がスローされ、どのファイルに不正なリンクが含まれていて、どのリンクが問題であったかが示されます。 たとえば、3番目のリンクに誤ってファイル名を間違って入力した場合：
Liquid Exception: Could not find post
"broken-name-welcome-to-jekyll" in tag 'post_url'.
Make sure the post exists and the name is correct.
in /home/sammy/www/_posts/2017-09-04-link-test.md
ERROR: YOUR SITE COULD NOT BE BUILT:
------------------------------------
これは、サイトコンテンツへの最後の変更です。 次のステップでは、サイトを新しい場所にコピーして、作業をテストできるようにします。
ステージングサイトでのリンクのテスト
Jekyllの展開方法ページでは、ニーズに応じてコンテンツを制作場所に移動するさまざまな方法について説明しています。 これには、FTPから高度な自動化された方法まですべてが含まれます。 今のところ、リンクがどのように動作するかを説明するために、同じマシン上にステージングサイトをセットアップします。
テストサイトを作成する
Nginxをインストールして、本番環境にデプロイする前にリンクがどのように機能するかをテストできるようにします。
- sudo apt-get install nginx
インストールが完了すると、HTTPトラフィックが許可されます。
- sudo ufw allow http
開発マシンのアドレスにアクセスすると、次のように表示されます。
同じファイルシステムを使用しているため、基本的なサイトを移動します rsync 指図。
の内容を取得するには _site にあるNginxドキュメントルートに /var/www/html 次のコマンドを使用します -a 再帰的に同期し、ほとんどすべてとオプションを保持します -v 詳細な出力を提供するには：
- sudo rsync -av ~/www/_site/ /var/www/html/
rsyncが完了すると、ポート番号なしでNginxが提供するサイトにアクセスできます。 http://203.0.113.0 テストする前に、開発Webサーバーを終了したことを確認してください。
サイトのテスト
新しい場所への展開後にテストすることで、読者が意図したエクスペリエンスを確実に体験できるようになります。 自動リンクチェックは、これをプロセスの簡単で日常的な部分にするのに役立ちますが、今のところ、手作業で見ていきます。
新しいブログ投稿はホームページに自動的に表示され、最新のものが一番上に表示されます。
「リンクテスト」の投稿にアクセスすると、デプロイした環境でポート4000が使用されていないため、絶対リンクとルート相対リンクの両方が壊れていることがわかりますが、Jekyllpost_urlリンクは両方の場所で機能します。
テストが完了したので、シャットダウンします nginx サイトにサービスを提供する予定がないため、ポート80を閉じます。
- sudo systemctl stop nginx
- sudo ufw delete allow http
リンクとURLの調査が終了したので、次のコマンドで開発サーバーを終了します。 CTRL+C 同じように。
慎重に選択された安定したページ名と、 post_url タグ、私たちは自分のページにリンクするときにあまり心配する必要はありません。 本番環境にデプロイする前に新しい場所でテストすることは、私たち自身の間違いを見つけるために、さらには外部サイトへの壊れたリンクを見つけるためにさらに価値があります。
##結論このシリーズでは、開発サイトをインストールして構成しました。 このチュートリアルでは、サイトのページと投稿のWebアドレスを制御する方法、デフォルトのパターンをオーバーライドする方法、コンテンツ内の投稿への堅牢なリンクを作成する方法、およびテスト用にサイトを展開する方法について説明しました。 サイトのテンプレートとテーマのカスタマイズ、またはサイトを本番環境にデプロイする方法について知りたいと思うかもしれません。
