TOC

Jekyllのデフォルトコンテンツの調査

前書き

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

このシリーズのhttps://www.digitalocean.com/community/tutorials/how-to-set-up-a-jekyll-development-site-on-ubuntu-16-04 [前編]で、JekyllをインストールしましたUbuntu 16.04サーバーへの依存関係、ホームディレクトリに開発サイトを作成し、サイトへのトラフィックがファイアウォールで許可されるようにしました。

このチュートリアルでは、前のガイドで自動生成されたコンテンツを使用して、Jekyllがソースファイルを静的コンテンツに変換し、コンテンツの作成と保守を容易にする方法を調べます。

前提条件

このチュートリアルを実行するには、以前のガイド* https：//www.digitalocean.com/community/tutorials/how-to-set-up-a-jekyll-development-site-on-ubuntu-16を完了する必要があります。 -04 [Ubuntu 16.04でJekyll開発サイトをセットアップする方法]。*このチュートリアルで行った作業を基に構築しているため、完了しないと例は一致しません。

パート1を完了すると、開始する準備が整います。

ホームページ

4つの異なるソースファイルから構成されるホームページで調査を始めましょう。 これらの各ファイルを個別に調べ、それらがどのように連携して静的なホームページを生成するかを見ていきます。

最初のチュートリアルを終了した後に開発Webサーバーを終了した場合は、今すぐ再起動します。

cd ~/www
jekyll serve --host=

次に、Webブラウザーでサイトにアクセスします。 以下のホームページのスクリーンショットは、構成と情報ソースを強調するために修正されました。

image：http：//assets.digitalocean.com/articles/jekyll-1604/homepage-labeled.png [ソースファイルでラベル付けされたコンテンツを含むJekyllホームページのスクリーンショット]

構成設定：_config.yml

Jekyllの力の多くは、単一のソースファイル `+ _config.yml +`で静的Webサイトの多くの場所で繰り返される情報を設定する機能に由来しています。

`+ jekyll new `を実行して作成されたデフォルトの ` _config.yml +`には、ホームページに表示される5つの設定が含まれています。

  • title：素晴らしいタイトル+ * email： [email protected] + * description：新しいサイトの素晴らしい説明をここに書きます…+ * twitter_username： jekyll + * github_username：* jekyllrb

image：http：//assets.digitalocean.com/articles/jekyll-1604/config.png [_confg.ymlファイルによって提供されるコンテンツが強調表示されたスクリーンショット]

この情報は、作成する他のすべてのページと投稿に自動的に含まれます。 これらの設定のいずれかを更新する必要がある場合、このファイルに変更を加えることができ、それはどこでも更新されます。 これを実際に見るために、これらの値を変更します。

新しいターミナルでファイルを開きます。

nano ~/www/_config.yml

設定を以下の値に変更します。

title:
email:
description: >

github_username:
twitter_username:

開発中は「+ url」と「+ baseurl」をそのままにして、サイトをデプロイするときに調整を加えます。

設定ファイルに加えられた変更を確認するには、 `+ CTRL-C +`でWebサーバーを停止してから再起動する必要があります。

jekyll serve --host=

完了したら、エディターを保存して終了します。 次に、Webブラウザーでページをリロードします。 Webブラウザーのローカルキャッシュ設定によっては、Shiftキーを押しながらリロードして変更を確認する必要がある場合があります。変更は、以下で強調表示されている2つの領域に表示されます。

image：http：//assets.digitalocean.com/articles/jekyll-1604/config-changes.png [強調表示された_confg.ymlファイルで行われた変更のスクリーンショット]

`+ _config.yml +`ファイルにはさらに多くのカスタマイズを行うことができますが、ここでは次のソースファイルに進み、行った変更がサイトの残りの部分でどのように見えるかを確認します。

ページ：about.md

右上隅の「+ About +」リンクをクリックします。 設定ファイルで行った変更は、このページのメインコンテンツの上下に表示されます。

image：http：//assets.digitalocean.com/articles/jekyll-1604/about.png [about.mdコンテンツが強調表示されたスクリーンショット]

その中心的なコンテンツとヘッダーのリンクテキストは、4種類のコンテンツを含む `+ about.md +`ファイルに保存されます。

*1. Jekyll Front Matter * + 3つのダッシュで始まり、3つのダッシュで終わる `+ about.md +`ファイルの上部のブロックは、Jekyll’s Front Matterです。 これはファイル内の最初のものでなければならず、存在する場合は、ファイルを解析する必要があることをJekyllに通知します。 通常、定義済みの変数を利用するために行間に有効なYAMLが含まれますが、空白にすることもできます。 空白のFront Matterブロックは、CSSファイルなど、値を設定する必要はないが変数にアクセスしたい他の場所で役立つ場合があります。

「About」ページは、Front Matterに3つの値を設定します。

  ---
  layout: page
  title: About
  permalink: /about/
  ---

  • Layout： * レイアウトは、ヘッダー、フッター、メニューなどの繰り返しコンテンツを排除して、サイトの保守を容易にします。 Jekyllには、「 default」、「+ page」、および「+ post」の3つのレイアウトが付属しています。 それぞれに特別な特徴があります。 この場合、レイアウトが「ページ」に設定されているため、タイトル値「About」へのメニューリンクがヘッダーナビゲーションに表示されます。

  • Title： * ヘッダーナビゲーションでリンクテキストとして使用されることに加えて、タイトルは、見出し1タグでフォーマットされたページの表示タイトルとして、およびページの ` <title> +`としても使用されます。ブラウザバーに表示され、ページがブックマークされたときに表示されるテキストです。

  • Permalink： * + Jekyllは、これらのソースファイルからページのURLを決定するディレクトリとHTMLファイルを自動的に生成します。 パーマリンクを使用すると、デフォルトの動作をオーバーライドできます。 ここでは、ページのURLが「+ http：//：4000 / about.html 」ではなく「 http：//：4000 / about / +」になります。

*2. Visible Text * +ページコンテンツは、Front Matterの後に始まります。 このテキストは、「これはベースJekyll 3です」などのページに表示されます。 テーマ。"

*3. Markdown * + Markdownは、メインページのコンテンツの一部であり、コンテンツの形式を制御します。 静的サイトのHTMLに解析されます。 Markdownは、読みやすく、書きやすいように設計されているため、HTMLよりもコンテンツ作成者に好まれます。

4. 液体テンプレートディレクティブ + Jekyllは、動的要素を含めるためにテンプレートエンジンとして液体を使用します。 Liquidディレクティブは、 `+ {％include icon-github.html username =" jekyll "％} +`のような中括弧の間に表示されます。

このページにいくつか変更を加えて、サイトへの影響を確認しましょう。

タイトルを変更する

小さな変更を加えて、「About」ではなく「About me」ページを呼び出します。

nano ~/www/about.md

〜/ www / about.md

---
. . .
title: "About "
. . .
---

完了したら、ファイルを保存して終了します。

変更は3つの場所に表示され、メニューリンクはすべてのサイトページで更新されます。+ image：http：//assets.digitalocean.com/articles/jekyll-1604/about-me.png [タイトル変更が強調表示された.md]

新しいページを追加

次に、「連絡先」ページをサイトに追加し、少しマークダウンを使用して画像を含めます。

まず、イメージを保持するための `+ assetsまたは`ディレクトリを作成します。

mkdir ~/www/assets

次に、 `+ wget`を使用して画像をマシンに転送します。 `+ -O +`フラグは、作成したディレクトリにそれを向けます。 このフラグでは、ファイル名も指定する必要があるため、次のことを行います。

wget -O ~/www/assets/postcard.jpg http://assets.digitalocean.com/articles/jekyll-1604/postcard.jpg

画像をローカルに配置したら、新しいページを作成します。

nano ~/www/contact.md

〜/ www / contact.md

---
layout: page
title: "Send me a postcard!"
---

DigitalOcean\\
Attn: Sammy Shark\\
101 Avenue of the Americas\\
New York, NY 10013

![A postcard](/assets/postcard.jpg)

マークダウンを詳しく見てみましょう。 まず、各行の最後にある二重スラッシュ「+ \\ 」は、余分なスペースを追加せずに強制的に戻ります。 次に、画像はこのマークダウン `！[]（）+`で表示されます。 感嘆符は、続くリンクが画像であることを示します。 画像がロードされていない場合、または訪問者がスクリーンリーダーを使用している場合に使用される代替テキストがブラケットに含まれています。 括弧には、画像ファイルへのリンクが含まれています。 Jekyllのデフォルトのマークダウンスタイルの詳細については、http：//kramdown.gettalong.org/ [kramdown website]をご覧ください。

ファイルを保存して終了し、ページをリロードします。 ファイルの名前に基づいてアルファベット順に新しいリンクが表示されます。

新しいファイルが配置されると、ファイル構造の上部は次のようになります。

├── about.md


├── _config.yml

実際のWebページページは次のようになります。

image：http：//assets.digitalocean.com/articles/jekyll-1604/contact.png [新しい連絡先ページのスクリーンショット]

サイトのタイトルをクリックしてホームページに戻ると、ヘッダーナビゲーションに含まれる新しいリンクが見つかります。

投稿：_posts / -welcome-to-jekyll.markdown

「ジキルへようこそ」リンクをクリックして、提供されているサンプルブログ投稿をご覧ください。

image：http：//assets.digitalocean.com/articles/jekyll-1604/post1.png [メインコンテンツ領域が強調表示されたJekyllへようこそ投稿のスクリーンショット]

+ _posts +`ディレクトリには、 `+ YYYY-MM-DD-Words-in-Title +`という形式の特別な名前のファイルが含まれています。 投稿にこの形式で名前が付けられていない場合、解析されません。 ファイル名に将来の日付が設定されている場合、静的サイトのページは解析されません。 将来の日付_does_でファイルに名前を付けると、特定の日時の後に投稿を公開するために、命名スキームを「+ cron +」または他の自動化戦略と組み合わせて使用​​できます。 投稿ファイルは、カスタムhttps://jekyllrb.com/docs/plugins/#converters[converters]がインストールされている場合、 `+ .markdown +、 + .md +、 + .html +、またはその他の拡張子で終わることができます。

投稿はフロントマターで始まります。 Front Matterは、サイトの作成に重要な日付などの値が含まれているため、すべての投稿ファイルに必要です。

〜/ www / _posts / 2016-08-31-welcome-to-jekyll.markdown

---
layout: post
title:  "Welcome to Jekyll!"
date:   2016-08-31 17:35:19 +0000
categories: jekyll update
---

  • Layout： * レイアウトがまったく異なる可能性はありますが、投稿のレイアウトはデフォルトに非常に似ています。 HTMLの ` <head>にはバリエーションがあります…​ </ head> + ページのコンテンツが異なるセクション、および + <div class = "wrapper">の間のコンテンツ…​ </ div> + `タグですが、残りは同じです。 ページ自体で目に見える唯一の違いは、タイトルの下にFront Matterの日付値が自動的に含まれることです。

  • タイトル： * +タイトルは、ブログ投稿自体の見出し1およびインデックスページの見出し2の両方に表示されます。

  • Date： * +ここで設定した日付は、ホームページと投稿自体の両方に表示される日付を決定します。 投稿のURLも決定されるのはこの日付であり、これについては後ほど詳しく説明します。

  • * カテゴリ： * カテゴリは投稿に固有であり、トピックごとにコンテンツをグループ化するために使用されます。 デフォルトでは、カスタムテンプレートに追加できますが、ページには表示されません。

残りのファイル

これまで、3つのファイル、「+ _ config.yml 」、「 about.md 」、および「 _posts / -welcome-to-jekyll.markdown +」を詳しく見てきました。 ブラウザから直接見えないファイルの概要は次のとおりです。

  • main.scss *：+ Jekyllは、Syntactically Awesome Style Sheets（Sass）を使用します。これは、サイトが再構築されるたびに通常のCSSにコンパイルされます。 .sassファイルは `+ css +`ディレクトリにあります。

  • feed.xml *：+ Jekyllは、静的サイトが再構築されるたびに構築されるRSSフィードを提供し、サイトが投稿を集約し、ユーザーが購読する方法を提供します。

  • GemfileおよびGemfile.lock *：+ Gemfileは、 `+ bundle +`コマンドでインストールされるJekyllのプラグインをリストします。 それらがインストールされると、Gemfile.lockファイルが生成され、インストールされたプラグインの特定のバージョンを追跡します。

これら4つのファイルのうち、CSSのみがコンテンツの表示に影響します。 JekyllとSassに特に興味がある場合は、https：//github.com/jekyll/jekyll-sass-converter/tree/master/example [JekyllのSass統合のサンプルサイトから詳細を確認できます。 + ]

結論

このチュートリアルでは、新しいサイトを作成するときにJekyllが提供する定型的なコンテンツを調査し、ソースファイルがWebページでどのように結合されるかを示すためにいくつかの変更を行いました。 これにより、単一の場所で値を設定することでサイトの保守が容易になります。値をすべてのファイルを変更するのではなく、1回の編集で更新できます。 また、投稿をホームページに動的に含めることができるため、新しい投稿を掲載するために別のページを手動で更新する必要はありません。

https://www.digitalocean.com/community/tutorials/controlling-urls-and-links-in-jekyll [パート3]では、静的サイトのファイル構造、その構造がどのように反映されるかを調べます。デフォルトでページと投稿のURL、およびデフォルトの動作をオーバーライドする方法。

Related