jekyll設定

2023-10-16 hit count image

jekyllの基本設定を説明します。_config.ymlファイルを説明するし、jekyll中で使える変数に関して説明します。

jekyll設定

jekyllは非常に柔軟性の高いシステムでサイトを作成するため設定オプションをたくさん提供してます。設定は _config.ymlファイル中へ作成します。ここには私たちが使ってるオプションを中心に説明します。

変数

設定ファイルの内容を説明する前に、理解のためjekyllが基本的持ってる変数に関して簡単に説明します。詳しく内容はjekyllホームページ(変数)を参考してください。

変数の区分

  • site: サイトの全般的な情報に関する変数です。_config.ymlへ設定した情報や基本的にjekyllが提供してる情報が含めております。
  • page: 現在ページに関する情報を持っている変数です。ページのファイル上にyml形式で作成した情報が含めております。
  • content: _layoutsフォルダへあるlayoutファイルが使ってる変数です。pageへ作成した内容が入ってます。

site変数

_config.ymlへ必要な変数を宣言してsite.変数名でその変数を使います。たくさんのプラグインが_config.ymlへプラグインで必要な変数を設定して使ってます。 ここではグローバル変数のsiteが持ってる変数中で私たちがよく使ってる変数を説明します。

  • site.time: jekyllの命令が実行された時間です。私たちはsitemap.xmlへ更新された時間を表示するため、headへcssのキャッシュを防止するためのバージョンで使ってます。
  • site.pages: _postsフォルダへあるページ以外の全てのページを持ってる変数です。私たちはsitemap.xmlへpost以外のページを表示するため使うし、Top下にカテゴリページを表示するため使ってます。
  • site.posts: _postsフォルダへある全てのページを持っている変数です。
  • site.url: jekyllを使って作るサイトのURLです。サイトの実際のURL(https://dev-yakuza.github.io)を設定してして使います。bundle exec jekyll serveを使ってローカルでテストする場合は、jekyllはこのURLを無視しhttp://localhost:4000で設定します。サイトを実際サーバーへデプロイする時、bundle exec jekyll buildでビルドするが、その時このURLを使用させます。

page変数

グローバル変数pageが持っている変数としてpageの上部にyml形式で設定した内容が含まれています。

  • page.title: ページのタイトルです。私たちは<head>タグの<title>タグへ使うし、ポストの上部のタイトルとcategoryページのpostリストを表示する時使ってます。
  • page.url: ページのURLです。sitemap.xmlなどページのリンクが必要なところで使ってます。
  • page.date: ポストの割り当てられた日付です。
  • page.categories: ページが属してるカテゴリリストです。

jekyll基本設定

  • jekyllホームページへ全ての設定オプションに関して説明があります。
  • jekyllホームページ: https://jekyllrb.com/docs/configuration/
  • ここには私たちが主につかてる設定オプションを説明します。

基本設定ファイル内容

  • _config.ymlファイル中にある内容です。
title: ...
email: '[email protected]'
description: ...
baseurl: ...
url: https://dev-yakuza.github.io
twitter_username: ...
github_username: ...
author: [email protected]

markdown: kramdown
plugins:
  - jekyll-feed
  - jekyll-paginate-v2
  - jekyll-polyglot
  - jekyll-seo-tag

exclude:
  - Gemfile
  - Gemfile.lock

# pagination
permalink: /:year/:month/
pagination:
  enabled: true
  per_page: 12
  sort_reverse: true
  limit: 0
  sort_field: 'date'
  permalink: '/page/:num/'
  title: ':title'
  trail:
    before: 2
    after: 2

# multilang
languages: ['ja', 'ko', 'en']
default_lang: 'ja'
exclude_from_localization: ['javascript', 'images', 'css']
parallel_localization: false

基本設定

  • title: サイトのタイトルを作成します。基本的にはheadへ使えますが、私たちはページのtitleを使うのでこの設定は使ってません。
  • email: サイト中で使うメールを設定します。この設定をお問い合わせページでメールを発送する機能に使ってます。メール発送機能に関してはメール発送を参考してください。
  • description: titleと同じでページのheadへ表示する内容を作成しますが私たちはページのdescriptionを使って表示するなので使っていません。
  • url: jekyllを使って作るサイトのURLです。サイトの実際のURL(https://dev-yakuza.github.io)を設定してして使います。bundle exec jekyll serveを使ってローカルでテストする場合は、jekyllはこのURLを無視しhttp://localhost:4000で設定します。サイトを実際サーバーへデプロイする時、bundle exec jekyll buildでビルドするが、その時このURLを使用させます。
  • author: サイトの作成者です。headauthorメタタグで使ってます。
  • plugins: サイトで使うプラグインを設定します。

プラグイン用設定

プラグイン用の設定について説明は各ブログポストで説明します。

Paginationプラグインの設定
permalink: /:year/:month/
pagination:
  enabled: true
  per_page: 12
  sort_reverse: true
  sort_field: 'date'
  title: ':title'
  trail:
    before: 2
    after: 2
多言語プラグイン設定
languages: ['ja', 'ko', 'en']
default_lang: 'ja'
exclude_from_localization: ['javascript', 'images', 'css']
parallel_localization: false

ページ設定ファイル内容

  • _postsのブログポストファイル中にある内容です。
layout: 'post'
permalink: '/jekyll/configuration/'
paginate_path: '/jekyll/:num/configuration/'
lang: ...
categories: 'jekyll'
comments: true

title: ...
description: ...
image: '/assets/images/category/jekyll/configuration.jpg'
  • layout: pageが使うレイアウトの設定です。
  • title: pageのタイトル設定です。
  • description: pageのディスクリプションの設定です。

プラグイン設定

プラグインやサイトを管理するため、私たちが使っている設定です。詳しい内容は各ブログを確認してください。

  • paginate_path: Paginationプラグインへ必要な設定。PaginationのURLを決定する。
  • lang: 多言語プラグインが使う設定。現在ポストの言語が何であるか示す。
  • comments: Disqusコメントのサービスのための設定です。
  • description: ポストの上部へタイトルと一緒に表示する説明を設定する変数です。ヘッダーのデスクリプションにも活用します。
  • image: ポストの代表イメージです。ポスト上部のバックグラウンドで使ってますし、ヘッダーのog:imageでも使ってます。

参考サイト

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts