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