JekyllでURLとリンクを制御する方法
序章
Jekyllは静的サイトジェネレーターであり、コンテンツ管理システム（CMS）の利点のいくつかを提供すると同時に、そのようなデータベース駆動型サイトによってもたらされるパフォーマンスとセキュリティの問題を回避します。 有用性はブログサイトに限定されませんが、日付で整理されたコンテンツを処理するための特別な機能を備えた「ブログ対応」です。 Jekyllは、オフラインで作業する必要がある人、コンテンツを維持するためにWebフォームの代わりに軽量のエディターを使用することを好む人、およびバージョン管理を使用してWebサイトへの変更を追跡したい人に最適です。
このチュートリアルでは、JekyllがURLとリンクを処理する方法に焦点を当てます。これは、URLを変更すると、他の人のページへのリンクや、自分のサイトのコンテンツ内のリンクが壊れてしまうためです。 URLは、人々がWebサイトを見つけて使用する方法にとって重要であり、サイトを初めて公開する前に検討する必要があります。
JekyllがデフォルトでURLを作成する方法を見て、個々のファイルまたはサイト全体のパターンを変更する方法を示します。 次に、コンテンツ内のページにリンクする方法を見ていきます。 最後に、テスト用にサイトをステージングします。
前提条件
このチュートリアルに従うには、前のガイドを完了する必要があります。
これらを完了すると、開始する準備が整います。
静的サイトのファイル構造
このシリーズのパート2では、jekyll newコマンドを使用してスキャフォールディングを作成し、結果のサイトがWebブラウザーでどのように表示されるかに焦点を当てました。 それでは、Jekyllが静的サイトを作成したときに作成されたファイル構造を見てみましょう。
注：このシリーズのパート2を実行した場合は、追加のアセットディレクトリと連絡先ページが必要です。 そうしなかった場合、またはページを追加して実験した場合は、構造が多少異なる場合があります。
_siteディレクトリとその下のすべてのコンテンツ（以下で強調表示）は、静的サイトを構成します。
パート2以降の〜/wwwの内容
.
├── 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に従い、URLhttp://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
ファイルの最後に次の値を追加します。
〜/ www / _config.yml
. . . permalink: /:categories/:title/
構成ファイルの編集による変更を確認するには、CTRL-CでWebサーバーを停止してから、再起動する必要があります。
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)This is the right format for an off-site link, but inappropriate for our site since keeping the port number on the base URL would break our links in production and omitting it would break them on our development site. - ルート相対リンク：
[Link Text(/[post-name)Root-relative links only work for local links, and they follow the directory structure on the server starting from the web root because of the initial slash,/. - 相対リンク：
[Link Text](post-name)The relative link is also for local links and starts following the path from the same directory as the page that contains the link.
両方の相対リンクにも同様の問題があります。 リンク形式を変更する場合は、コンテンツ内の古い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またはポート番号のないサイトにデプロイすると壊れます。 ルート相対リンクは、パーマリンクスキームが同じである限り、新しい場所で機能します。 ただし、変更が加えられた場合、このリンクは更新されず、どのサイトでも壊れます。 Jekyll post_urlリンクは、サイトが解析されるときにルート相対リンクを作成します。 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のコンテンツを/var/www/htmlにあるNginxドキュメントルートに取り込むには、次のコマンドを-aとともに使用して再帰的に同期し、ほとんどすべてとオプションの[ X198X] は、詳細な出力を提供します。
sudo rsync -av ~/www/_site/ /var/www/html/
rsyncが完了すると、ポート番号http://203.0.113.0なしで、Nginxが提供するサイトにアクセスし、テストする前に開発Webサーバーを終了したことを確認できます。
サイトのテスト
新しい場所への展開後にテストすることで、読者が意図したエクスペリエンスを確実に体験できるようになります。 自動リンクチェックは、これをプロセスの簡単で日常的な部分にするのに役立ちますが、今のところ、手作業で見ていきます。
新しいブログ投稿はホームページに自動的に表示され、最新のものが一番上に表示されます。
「リンクテスト」の投稿にアクセスすると、デプロイした環境でポート4000が使用されていないため、絶対リンクとルート相対リンクの両方が壊れていることがわかりますが、Jekyllpost_urlリンクは両方の場所で機能します。
テストが完了したので、nginxをシャットダウンし、サイトにサービスを提供する予定がないため、ポート80を閉じます。
sudo systemctl stop nginx sudo ufw delete allow http
リンクとURLの調査が終了したので、CTRL+Cも使用して開発サーバーを終了します。
慎重に選択された安定したページ名とpost_urlタグを使用した投稿へのリンクを組み合わせると、自分のページにリンクするときにそれほど心配する必要はありません。 本番環境にデプロイする前に新しい場所でテストすることは、私たち自身の間違いを見つけるために、さらには外部サイトへの壊れたリンクを見つけるためにさらに価値があります。
