JekyllでURLとリンクを制御する

前書き

Jekyllは、コンテンツ管理システム(CMS)の利点の一部を提供する静的サイトジェネレーターであり、そのようなデータベース駆動型サイトによってもたらされるパフォーマンスとセキュリティの問題を回避します。 日付が整理されたコンテンツを処理する特別な機能を備えた「ブログ対応」ですが、その有用性はブログサイトに限定されません。 Jekyllは、オフラインで作業する必要がある人、コンテンツを維持するためにWebフォームの代わりに軽量のエディターを使用する人、およびバージョン管理を使用してWebサイトの変更を追跡する人に適しています。

このチュートリアルでは、JekyllがURLとリンクをどのように処理するかに焦点を当てます。URLを変更すると、他の人のページへのリンクだけでなく、サイトのコンテンツ内のリンクも壊れるからです。 URLは、人々がWebサイトを見つけて使用する方法にとって重要であり、初めてサイトを公開する前に検討する必要があります。

JekyllがデフォルトでURLを作成する方法を見て、個々のファイルまたはサイト全体のパターンを変更する方法を示します。 次に、コンテンツ内のページにリンクする方法を見ていきます。 最後に、テストのためにサイトをステージングします。

前提条件

このチュートリアルに従うには、前のガイドを完了する必要があります。

これらを完了したら、開始する準備が整いました。

静的サイトのファイル構造

Part 2 of this seriesでは、jekyll newコマンドを使用してスキャフォールディングを作成し、結果のサイトがWebブラウザーでどのように表示されるかに焦点を当てました。 次に、Jekyllが静的サイトを作成したときに作成されたファイル構造を見てみましょう。

[.note]#Note:このシリーズのパート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です。 s。

scaffoldingはこれらのディレクトリの動的なインデックスページを提供しないため、ユーザーがURLの一部を削除して特定のカテゴリ、年、月、または日のすべての投稿を見つけようとすると、2つのことが起こります。 Webサーバーで自動ディレクトリインデックス作成が許可されている場合、ファイルとディレクトリの情報が表示されます。

Directories listed

2番目のケースでは、運用サイトの管理者がサーバー上のディレクトリリストを無効にした場合、ユーザーはアクセスを拒否されます。

Forbidden

カテゴリと日付ベースの構造はブログURLの一般的なパターンですが、URLの構造の決定方法は、特定のサイトのニーズによって異なります。

デフォルトを変更したい場合、JekyllはURLの構築をかなり簡単にします。 URLパターンを変更すると、ユーザーが検索エンジンでコンテンツを見つけることができる効率に影響し、他のユーザーがサイトに作成するリンクに影響するため、サイトを初めて公開する前にこれを考えると便利です。

URLの制御方法を理解する

URLを作成するためのJekyllのシステムは、柔軟で強力です。 これらは、ソースファイルの名前と保存場所、および特定の値またはより一般的なパターンで動的にオーバーライドされることに影響されます。

ページのデフォルト

連絡先ページの場合と同じようにサイトのルートにページを作成すると、ファイル名contact.mdcontact.htmlに変換され、結果のURLもドキュメントルートのすぐ外になります。 http://203.0.113.0:4000/contact.html。 1つ以上のサブディレクトリに配置すると、それらもURLの一部になります。 たとえば、ページcontact.mdmainというディレクトリに配置すると、URLはhttp://203.0.113.0:4000/main/contact.htmlになります。

デフォルトの投稿

投稿の動作はページとは異なります。 まず、カテゴリを持つことが許可されており、それらのカテゴリは静的サイトのディレクトリであり、URLの一部になります。 デフォルトの投稿パターンは、Front Matterの連結です。

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になります。

Front Matterからカテゴリを削除すると、次にサイトが生成されるときにディレクトリ構造が変更され、URLの一部ではなくなります。

ページと投稿のデフォルトは、2つの方法でオーバーライドできます。

Permalinks
個々のページのフロントマターでパーマリンクを定義すると、ページと投稿の両方のデフォルトが上書きされ、ファイルごとにリンクを正確に指定できるようになります。 これは、[バージョン情報]ページのデフォルトのコンテンツで設定されました。パーマリンク値/about/は、URLhttp://203.0.113.0:4000/about/になり、これはディスク上にabout/index.htmlとして存在します。

Permalink Patterns
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/のままです。 連絡先ページが/contact.htmlから/contact/に変更され、パーマリンクパターンがサイト全体で変更されたため、リンクテストの投稿が/jekyll/update/welcome-to-jekyll/になりました。 Jekyll Permalinksのドキュメントで、URLを構築するために使用できるトークンについて詳しく知ることができます。

ページが配置されているアドレスを制御する方法がわかったので、それらのアドレスにリンクする際に考慮すべき点はほとんどありません。

完全に静的なサイトのページの本文にリンクを作成している場合、いくつかの形式のいずれかでリンクするページのURLを使用します。

  • An absolute link:[Link Text]([http://203.0.113.0:4000/post-name)これはオフサイトリンクの正しい形式ですが、ベースURLにポート番号を保持すると本番環境でリンクが切断され、省略するとリンクが切断されるため、サイトには不適切です。開発サイト。

  • A root-relative link:[Link Text(/[post-name)ルート相対リンクはローカルリンクに対してのみ機能し、最初のスラッシュ/により、Webルートから始まるサーバー上のディレクトリ構造に従います。

  • A relative link:[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ディレクトリやファイルの拡張子を含める必要はありません。 この方法で作成された投稿へのリンクは、設定したパーマリンク設定で引き続き機能します。

[.note]#Note:現在、この動的リンク機能は投稿では利用できますが、ページでは利用できませんが、ページの計画は進行中です。

新しい投稿を作成する

リンクの作成について学習した内容を適用する新しい投稿を作成します。 エディターで新しいファイルを開き、必要に応じてファイル名に日付を設定します。

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 %})

保存して終了。 ホームページに再度アクセスすると、新しい投稿が自動的に表示されます:
Screenshot of Homepage with new blog post visible

新しい投稿へのホームページリンクをたどり、それぞれを試してください。 3つすべてが開発サイトで動作するはずです。

Screenshot of the new blog post

絶対リンクは開発サイトで機能しますが、別のURLまたはポート番号なしでサイトに展開すると壊れます。 パーマリンクスキームが同じである限り、ルート相対リンクは新しい場所で機能します。 ただし、変更が行われた場合、このリンクは更新されず、どのサイトでも破損します。 Jekyllpost_urlリンクは、サイトが解析されるときにルート相対リンクを作成します。 どこでも機能するだけでなく、Jekyllはサイトを解析するときに、リンク先の投稿が実際に存在することも確認します。 投稿に含まれていない場合、「リンク例外」がスローされ、どのファイルに不良リンクが含まれていて、どのリンクに問題があるかが示されます。 たとえば、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のDeployment methodsページには、ニーズに応じてコンテンツを制作場所に移動するさまざまな方法が記載されています。 これには、FTPから洗練された自動化された方法までが含まれます。 ここでは、同じマシン上にステージングサイトを設定して、リンクの動作を説明します。

テストサイトを作成する

Nginxをインストールして、実稼働環境に展開する前にリンクの動作をテストできるようにします。

sudo apt-get install nginx

インストールが完了すると、HTTPトラフィックが許可されます。

sudo ufw allow http

開発マシンのアドレスにアクセスすると、次のように表示されます。

Screenshot of the default nginx web page

同じファイルシステムを使用しているため、基本的なrsyncコマンドを使用してサイトを移動します。

_siteの内容を/var/www/htmlにあるNginxドキュメントルートに取得するには、次のコマンドを-aとともに使用して再帰的に同期し、ほとんどすべてとオプションの-vを保持します。 ■詳細な出力を提供するには:

sudo rsync -av ~/www/_site/ /var/www/html/

rsyncが完了すると、ポート番号http://203.0.113.0を使用せずに、Nginxが提供するサイトにアクセスし、テストする前に開発Webサーバーを終了したことを確認できます。

サイトのテスト

新しい場所への展開後にテストを行うことで、読者が意図したとおりの経験を持つことを確認できます。 自動化されたリンクチェックは、これをプロセスの簡単で日常的な部分にするのに役立ちますが、今のところ、手で見ていきます。

新しいブログ投稿がホームページに自動的に表示され、最新のものが一番上に表示されます。

Screenshot of the Link Test post on the staging site

「リンクテスト」の投稿にアクセスすると、展開した環境がポート4000を使用していないため、絶対リンクとルート相対リンクの両方が壊れていることがわかります。一方、Jekyll post_urlリンクは両方の場所で機能します。

テストが完了したので、サイトにサービスを提供する予定がないため、nginxをシャットダウンし、ポート80を閉じます。

sudo systemctl stop nginx
sudo ufw delete allow http

リンクとURLの調査が終了したので、CTRL+Cも使用して開発サーバーを終了します。

慎重に選択された安定したページ名と、post_urlタグを使用した投稿へのリンクを組み合わせると、自分のページにリンクするときにそれほど心配する必要はありません。 本番環境に展開する前に新しい場所でテストすることは、私たち自身の間違いを見つけるために、さらには外部サイトへの壊れたリンクを見つけるためにさらに価値があります。

結論

このシリーズでは、開発サイトをインストールして構成しました。 このチュートリアルでは、サイトのページと投稿のWebアドレスを制御し、デフォルトパターンをオーバーライドし、コンテンツ内の投稿への堅牢なリンクを作成し、テスト用にサイトを展開する方法を検討しました。 サイトのtemplatesthemeのカスタマイズ、またはdeploy your site to its production locationのカスタマイズ方法について知りたいと思うかもしれません。

Related