Jekyllのデフォルトコンテンツの調査
序章
Jekyllは静的サイトジェネレーターであり、コンテンツ管理システム（CMS）の利点のいくつかを提供すると同時に、そのようなデータベース駆動型サイトによってもたらされるパフォーマンスとセキュリティの問題を回避します。 これは、日付で整理されたコンテンツを処理するための特別な機能を備えた「ブログ対応」です。 Jekyllは、オフラインで作業する必要がある人、コンテンツを維持するためにWebフォームの代わりに軽量のエディターを使用することを好む人、およびバージョン管理を使用してWebサイトへの変更を追跡したい人に最適です。
このシリーズの最初のパートでは、Jekyllとその依存関係をUbuntu 16.04サーバーにインストールし、ホームディレクトリに開発サイトを作成し、サイトへのトラフィックがファイアウォールによって許可されるようにしました。
このチュートリアルでは、前のガイドで自動生成されたコンテンツを使用して、Jekyllがソースファイルを静的コンテンツに変換し、コンテンツの作成と保守を容易にする方法を探ります。
前提条件
このチュートリアルに従うには、前のガイド Ubuntu 16.04でJekyll開発サイトをセットアップする方法を完了する必要があります。このチュートリアルで行った作業に基づいており、完了せずに例を示します。一致しません。
パート1を完了すると、開始する準備が整います。
ホームページ
4つの異なるソースファイルから組み立てられたホームページから探索を始めましょう。 これらの各ファイルを個別に見ていき、静的なホームページを作成するためにそれらがどのように連携するかを見ていきます。
最初のチュートリアルを終了した後に開発Webサーバーを終了した場合は、今すぐ再起動してください。
- cd ~/www
- jekyll serve --host=203.0.113.0
次に、Webブラウザでサイトにアクセスします。 以下のホームページのスクリーンショットは、構成と情報ソースを強調するために変更されています。
構成設定：_config.yml
Jekyllの力の多くは、静的Webサイトの多くの場所で単一のソースファイル_config.ymlで繰り返される情報を設定する機能に由来します。
jekyll newを実行して作成されたデフォルトの_config.ymlには、ホームページに表示される5つの設定が含まれています。
title：あなたの素晴らしいタイトル email： your-e-mail @domain .com description：新しいサイトの素晴らしい説明を書いてくださいここで…twitter_username： jekyll github_username： jekyllrb
この情報は、私たちが作成する他のすべてのページと投稿に自動的に含まれます。 これらの設定のいずれかを更新する必要がある場合は、このファイルに変更を加えることができ、どこでも更新されます。 これが実際に動作するのを監視するために、これらの値を変更します。
新しいターミナルでファイルを開きます。
- nano ~/www/_config.yml
設定を以下の値に変更します。
title: Sammy's Blog
email: [email protected]
description: >
Welcome to my blog!
github_username: DigitalOcean
twitter_username: DigitalOcean
開発中はurlとbaseurlをそのままにし、サイトを展開するときに調整を行います。
構成ファイルに加えられた変更を確認するには、CTRL-CでWebサーバーを停止してから、再起動する必要があります。
- jekyll serve --host=203.0.113.0
注： descriptionの各行が少なくとも1つのスペースでインデントされていることを確認してください。そうしないと、行で単純なキーをスキャンしているときに「予期された’：’が見つかりませんでした」というエラーが発生します。 19列1`。
完了したら、エディターを保存して終了します。 次に、Webブラウザでページをリロードします。 Webブラウザーのローカルキャッシュ設定によっては、変更を確認するためにShfit + Reloadが必要になる場合があります。変更は、以下で強調表示されている2つの領域に表示されます。
_config.ymlファイルで行うことができるカスタマイズは他にもたくさんありますが、今のところ、次のソースファイルに移動して、行った変更がサイトの他の部分にどのように表示されるかを確認します。
ページ： about.md
右上隅にあるAboutリンクをたどります。 構成ファイルで行った変更は、[バージョン情報]ページのメインコンテンツの上下に表示されます。
その中心的なコンテンツとヘッダー内のリンクテキストは、次の4種類のコンテンツを含むabout.mdファイルに保存されます。
about.md 3つのダッシュで始まり、3つのダッシュで終わるファイルは、JekyllのFrontMatterです。 これはファイルの最初のものである必要があり、存在する場合は、ファイルを解析する必要があることをJekyllに通知します。 通常、事前定義された変数を利用するために行間に有効なYAMLが含まれますが、空白にすることもできます。 空白のFrontMatterブロックは、CSSファイルや、値を設定する必要はないが変数にアクセスしたいその他の場所で役立つ場合があります。
「About」ページでは、FrontMatterに次の3つの値が設定されています。
---
layout: page
title: About
permalink: /about/
---
レイアウト：レイアウトは、ヘッダー、フッター、メニューなどの反復的なコンテンツを排除して、サイトの保守を容易にします。 Jekyllには、default、page、postの3つのレイアウトがあります。 それぞれに特別な特徴があります。 この場合、レイアウトが「ページ」に設定されているため、タイトル値「バージョン情報」へのメニューリンクがヘッダーナビゲーションに表示されます。
タイトル：このタイトルは、ヘッダーナビゲーションのリンクテキストとして使用されるだけでなく、表示されるページタイトルとしても使用され、見出し1タグでフォーマットされ、ページの<title>、これは、ブラウザバーに表示され、ページがブックマークされたときに表示されるテキストです。
パーマリンク： Jekyllは、ページのURLを決定するこれらのソースファイルからディレクトリとHTMLファイルを自動的に生成します。 パーマリンクを使用すると、デフォルトの動作を上書きできます。 ここでは、ページのURLがhttp://203.0.113.0 :4000/about.htmlではなくhttp://203.0.113.0:4000/about/になります。
{% include icon-github.html username="jekyll" %}などの中括弧の間に表示されます。
このページにいくつかの変更を加えて、サイトがどのように影響を受けるかを確認しましょう。
タイトルを変更する
小さな変更を加えて、ページを「About」ではなく「Aboutme」と呼びます。
- nano ~/www/about.md
---
. . .
title: "About me"
. . .
---
完了したら、ファイルを保存して終了します。
変更は3つの場所に表示され、メニューリンクはすべてのサイトページで更新されます：
新しいページを追加する
次に、サイトに「連絡先」ページを追加し、画像を含めるために少しマークダウンを使用します。
まず、画像を保持するassetsディレクトリを作成します。
- mkdir ~/www/assets
次に、wgetを使用して画像を本機に転送します。 -Oフラグは、作成したディレクトリにそれを転送します。 フラグではファイル名も指定する必要があるため、次のようにします。
- wget -O ~/www/assets/postcard.jpg https://assets.digitalocean.com/articles/jekyll-1604/postcard.jpg
画像がローカルに配置されたら、新しいページを作成します。
- nano ~/www/contact.md
---
layout: page
title: "Send me a postcard!"
---
DigitalOcean\\
Attn: Sammy Shark\\
101 Avenue of the Americas\\
New York, NY 10013
マークダウンを詳しく見てみましょう。 まず、各行の終わりにある二重スラッシュ\\は、余分なスペースを追加せずに強制的に戻ります。 次に、このマークダウン![]()で画像が表示されます。 感嘆符は、続くリンクが画像であることを示します。 角かっこには、画像が読み込まれていない場合、または訪問者がスクリーンリーダーを使用している場合に使用される代替テキストが含まれています。 括弧には、画像ファイルへのリンクが含まれています。 Jekyllのデフォルトのマークダウンスタイルについて詳しくは、kramdownWebサイトを参照してください。
ファイルを保存して終了し、ページをリロードします。 ファイル名に基づいてアルファベット順に新しいリンクが表示されます。
新しいファイルを配置すると、ファイル構造の上部は次のようになります。
├── about.md
├── assets
│ └── postcard.jpg
├── _config.yml
├── contact.md
実際のWebページページは次のようになります。
サイトのタイトルをクリックしてホームページに戻ります。ホームページには、ヘッダーナビゲーションに含まれている新しいリンクがあります。
注：連絡先ページにインタラクティブなWebフォームがあるのが一般的です。 Jekyll には組み込みのフォーム処理はありませんが、Disqus、Formspree、FormKeepなどのクラウドベースのサービスを使用することも、独自のサービスをホストすることもできます。
投稿：_posts / YYYY-MM-DD -welcome-to-jekyll.markdown
「WelcometoJekyll」リンクをたどって、提供されているサンプルのブログ投稿をご覧ください。
_postsディレクトリには、YYYY-MM-DD-Words-in-Titleの形式に従って特別な名前のファイルが含まれています。 投稿にこの形式の名前が付けられていない場合、投稿は解析されません。 ファイル名に将来の日付が設定されている場合、静的サイトのページは解析されません。 将来の日付でファイルに名前を付けると、名前付けスキームをcronまたは他の自動化戦略と組み合わせて使用して、特定の日時の後に投稿を公開できます。 カスタムコンバーターがインストールされている場合、投稿ファイルは.markdown、.md、.html、またはその他の拡張子で終わる可能性があります。
投稿はFrontMatterで始まります。 フロントマターは、サイトの作成に重要な日付などの値が含まれているため、すべての投稿ファイルに必要です。
---
layout: post
title: "Welcome to Jekyll!"
date: 2016-08-31 17:35:19 +0000
categories: jekyll update
---
レイアウト：レイアウトがまったく異なる可能性がありますが、投稿のレイアウトはデフォルトと非常に似ています。 HTML <head> ... </head>セクションには、ページのコンテンツと<div class="wrapper"> ... </div>タグ間のコンテンツが異なるバリエーションがありますが、残りは同じです。 ページ自体に表示される唯一の違いは、タイトルの下にフロントマターの日付値が自動的に含まれることです。
タイトル：タイトルは、ブログ投稿自体では見出し1として、インデックスページでは見出し2として表示されます。
日付：ここで設定された日付は、ホームページと投稿自体の両方に表示される日付を決定します。 投稿のURLも決定するのはこの日付です。これについては、後ほど詳しく説明します。
注：フロントマターの日付は、ファイル名の開始日と直接の関係はありません。 ファイル名を解析するには、適切な形式の日付で始まる必要があります。 将来の日付で名前が付けられている場合、その日付の後の次のサイト構築プロセスまで解析されません。 一方、Front Matterの日付は、ファイルが解析されるとディレクトリ構造を決定し、ホームページと投稿に表示される値として使用されます。
- カテゴリ：カテゴリは投稿に固有であり、トピックごとにコンテンツをグループ化するために使用されます。 デフォルトでは、カスタムテンプレートに追加することはできますが、ページには表示されません。
残りのファイル
これまで、_config.yml、about.md、および_posts/YYYY-MM-DD-welcome-to-jekyll.markdownの3つのファイルを詳しく調べてきました。 ブラウザから直接表示されないファイルの概要は次のとおりです。
main.scss ：Jekyllは、サイトが再構築されるたびに通常のCSSにコンパイルされるSyntactically Awesome Style Sheets（Sass）を利用します。 .sassファイルはcssディレクトリにあります。
feed.xml ：JekyllはRSSフィードを提供します。これも静的サイトが再構築されるたびに構築され、サイトが投稿を集約してユーザーがサブスクライブする方法を提供します。
GemfileおよびGemfile.lock：Gemfileは、bundleコマンドでインストールされるJekyllのプラグインを一覧表示します。 それらがインストールされると、インストールされたプラグインの特定のバージョンを追跡するためにGemfile.lockファイルが生成されます。
これらの4つのファイルのうち、CSSのみがコンテンツの表示に影響します。 JekyllとSassに特に興味がある場合は、
結論
このチュートリアルでは、新しいサイトを作成するときにJekyllが提供する定型文のコンテンツを調べ、いくつかの変更を加えて、ソースファイルがWebページでどのようにまとめられるかを示しました。 これにより、すべてのファイルを変更するのではなく、1回の編集で値を更新できる単一の場所に値を設定することで、サイトの保守が容易になります。 また、投稿をホームページに動的に含めることができるため、新しい投稿を掲載するために別のページを手動で更新する必要はありません。
パート3では、静的サイトのファイル構造、その構造がデフォルトでページと投稿のURLにどのように反映されるか、およびデフォルトの動作をオーバーライドする方法について説明します。
