Jekyll 環境の構築(テーマは Gem 化された Minimal Mistakes)!
Updated:
プレーンテキストから静的な Web/Blog サイトを生成する Ruby 製ツール Jekyll の環境を構築してみました。(使用するテーマは Minimal Mistakes)
以下、作業記録です。
0. 前提条件Permalink
- LMDE 3 (Linux Mint Debian Edition 3; 64bit) での作業を想定。
- Ruby 2.6.0-p0 での作業を想定。
- 作業ディレクトリはホームディレクトリ直下の
jekyll
を想定。 - Jekyll で使用するテーマは Gem 化された Minimal Mistakes とする。(4.15.1 を想定)
- Jekyll でブログサイトを運用することを想定。(後日、 Octopress からの移行も)
- GitHub Pages での運用は想定していない。(自前サーバでの運用を想定)
- Jekyll 3.8.5 での作業を想定。
- カスタマイズ量は多め。
1. Jekyll のインストールPermalink
$ sudo gem install jekyll
2. Minimal Mistakes のインストールPermalink
ディレクトリを作成し、そのディレクトリ内へ移動。
$ mkdir jekyll
$ cd jekyll
Gemfile
を作成。(デフォルトの liquid
を使用せず、jekyll-archives
を使用することを想定)
File: Gemfile
source "https://rubygems.org"
gem "minimal-mistakes-jekyll"
# If you have any plugins, put them here!
group :jekyll_plugins do
gem "jekyll-archives"
end
そして、インストール。
$ bundle install
3. 各種ファイルの配置Permalink
インストール直後は Gemfile
と Gemfile.lock
しかないので、 ZIP ファイル か GitHub か minimal-mistakes-jekyll
gem から取得するなどして、配置する。
最低限、以下は必要。
_data/navigation.yml
取り急ぎ、main:
のみでよい。必要になった際にメニューとして追加していく。_config.yml
今回はminimal-mistakes-jekyll
gem を使用するので、theme: "minimal-mistakes-jekyll"
の記述は必須。index.html
index ページ。
4. Jekyll の基本的な使い方Permalink
以下のサイトを参照すれば分かるが、
基本的には、
_posts
ディレクトリ内に Yaml Front Matter 付き Markdown 形式で記述したテキストファイルを配置。bundle exec jekyll build
でビルド。bundle exec jekyll serve
でローカルサーバ起動。- Web ブラウザで
http://localhost:4000
にアクセスして確認。 - (公開する場合は Web サーバにアップロードする)
記事ファイルの記述例。
---
layout : single
title : "Jekyll 環境の構築(テーマは Gem 化された Minimal Mistakes)!"
published: false
date : 2019-01-27 00:20:00 +0900
comments : true
categories:
- ブログ
tags:
- Jekyll
- Ruby
- HTML
- Markdown
- JavaScript
- CSS
---
以下、記事本文
※Markdown 形式、 Liquid 形式、 HTML 形式等で記述
これまでの最低限必要なファイルのみを配置した状態では、 Web ブラウザで次のように表示されるはず。
5. ディレクトリ構成Permalink
以下、当方の例。
基本的に、カスタマイズしたいもののみを minimal-mistakes-jekyll
gem から複製して編集。必要であれば、新規追加も。
.
├── _data
│ └── navigation.yml
├── _includes <= インクルードファイル
├── _layouts <= レイアウトフィアル
├── _pages <= 追加ページ用
├── _posts <= 記事データ用
├── _site <= このディレクトリ配下を Web サーバへ配置
├── assets <= サイト内で使用する CSS, 画像, JS ファイル
│ ├── css
│ ├── images
│ └── js
├── images <= 投稿に使用する画像ファイル
├── Gemfile
├── Gemfile.lock
├── _config.yml
└── index.html
6. 設定ファイルの編集Permalink
設定ファイル _config.yml
を編集する。
6-1. テーマの設定Permalink
# Theme Settings
#
# Review documentation to determine if you should use `theme` or `remote_theme`
# https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/#installing-the-theme
theme : "minimal-mistakes-jekyll"
# remote_theme : "mmistakes/minimal-mistakes"
minimal_mistakes_skin: "dark" # "default", "air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum", "sunrise"
theme
: 今回、minimal-mistakes-jekyll
の設定が必須。remote_theme
: GitHub Pages を利用するならコメント解除。minimal_mistakes_skin
: Minimal Mistakes テーマ用のスキン。好みのものに変更。
6-2. サイトの設定Permalink
# Site Settings
locale : "ja-JP" # "en-US"
title : "mk-mode BLOG"
title_separator : "-"
name : "mk-mode.com"
description : "このブログは自作の自宅サーバに構築した Debian GNU/Linux で運用しています。PC・サーバ構築等の話題を中心に公開しております。"
url : "https://www.mk-mode.com" # the base hostname & protocol for your site e.g. "https://mmistakes.github.io"
baseurl : "/blog" # the subpath of your site, e.g. "/blog"
repository : # GitHub username/repo-name e.g. "mmistakes/minimal-mistakes"
teaser : # path of fallback teaser image, e.g. "/assets/images/500x300.png"
breadcrumbs : false # true, false (default)
words_per_minute : 200
comments:
provider : "disqus" # false (default), "disqus", "discourse", "facebook", "google-plus", "staticman", "staticman_v2", "utterances", "custom"
disqus:
shortname : "xxxxxxxx" # https://help.disqus.com/customer/portal/articles/466208-what-s-a-shortname-
discourse:
server : # https://meta.discourse.org/t/embedding-discourse-comments-via-javascript/31963 , e.g.: meta.discourse.org
facebook:
# https://developers.facebook.com/docs/plugins/comments
appid :
num_posts : # 5 (default)
colorscheme : # "light" (default), "dark"
utterances:
theme : # "github-light" (default), "github-dark"
issue_term : # "pathname" (default)
staticman:
allowedFields : # ['name', 'email', 'url', 'message']
branch : # "master"
commitMessage : # "New comment by {fields.name}"
filename : # comment-{@timestamp}
format : # "yml"
moderation : # true
path : # "/_data/comments/{options.slug}" (default)
requiredFields : # ['name', 'email', 'message']
transforms:
email : # "md5"
generatedFields:
date:
type : # "date"
options:
format : # "iso8601" (default), "timestamp-seconds", "timestamp-milliseconds"
endpoint : # URL of your own deployment with trailing slash, will fallback to the public instance
reCaptcha:
siteKey :
secret :
search : true # true, false (default)
search_provider : "google" # lunr (default), algolia, google
search_full_content : true # true, false (default)
algolia:
application_id : # YOUR_APPLICATION_ID
index_name : # YOUR_INDEX_NAME
search_only_api_key: # YOUR_SEARCH_ONLY_API_KEY
powered_by : # true (default), false
google:
search_engine_id : "9999999999999999:9999999999" # YOUR_SEARCH_ENGINE_ID
instant_search : false # false (default), true
locale
: 言語・国title
: サイトのタイトルtitle_separator
: 記事タイトルとサイトタイトルの区切り記号name
: 管理者名description
: サイトの説明url
: サイトの URL.(プロトコル(http
orhttps
) +://
+ ドメイン名)baseurl
: サイトのサブディレクトリ。必要なら設定。repository
: GitHub Pages を利用する場合に設定。teaser
: 関連記事を表示する際に使用するデフォルトの画像。必要なら設定。breadcrumbs
: いわゆるパンくずリスト。必要ならtrue
に設定。words_per_minute
: 1つの記事を読むのに必要な時間を計算するのに使用する単語数comments
: コメント機能provider
: コメントを使用する場合に、使用したいコメントサービスを指定し、以降で各種アカウントを設定
comments
と同じ階層にstaticman
が存在するが、これもコメントサービスの一種
reCaptcha
: コメント入力時に使用する Google のボット防御システムsiteKey
,secret
: 使用する場合に Site Key, Secret Code を取得して設定
search
: 検索サービスsearch_provider
: 使用する検索サービス。search_full_content
: 検索サービスとして Lunr を使用する際に1記事あたり全ての語を取得するための設定。(デフォルトはfalse
で、1記事あたり 50語しか取得しない)algolia
:search_provider
にalgoria
を設定した場合に設定google
:search_provider
にgoogle
を設定した場合に設定search_engine_id
: 使用する場合に、 Search Engine ID を取得して設定
(ちなみに、 Google Adsense 向けの Search Enigine なら、 ID の頭にpartner-pub-
が付く)instant_search
: 検索語を入力しながら(確定しなくとも)リアルタイムで検索結果を表示する機能(おそらく)
6-3. SEO の設定Permalink
# SEO Related
google_site_verification: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
bing_site_verification :
yandex_site_verification:
naver_site_verification :
google_site_verification
: Google のサイト所有者検証用コード
使用する場合は、 Google Search Console からコードを取得して設定。(meta
タグにセットされる)
(ちなみに、 Google の場合、コードをmeta
タグにセットする方法以外に、指定の HTML ファイルを設置する方法等もある)
6-4. SNS 系の設定Permalink
# Social Sharing
twitter:
username: "account_name"
facebook:
username :
app_id :
publisher:
og_image: "https://www.mk-mode.com/blog/assets/images/about_me.png" # Open Graph/Twitter default site image
# For specifying social profiles
# - https://developers.google.com/structured-data/customize/social-profiles
social:
type : # Person or Organization (defaults to Person)
name : # If the user or organization name differs from the site's name
links: # An array of links to social media profiles
twitter
: 記事が共有される際に使用される。facebook
: 記事が共有される際に使用される。og_image
: 記事が共有された場合に使用される画像social
: Google+ 用?(当方不使用なので、詳細不明)
Google+ 用だとしても、サービス自体が2019年に終了なので不要。
6-5. アクセス解析の設定Permalink
# Analytics
analytics:
provider: "google" # false (default), "google", "google-universal", "custom"
google:
tracking_id : "UA-99999999-9"
anonymize_ip: # true, false (default)
analytics
: アクセス解析の設定provider
: 使用するアクセス解析サービスgoogle
:provider
でgoogle
を設定した場合に設定tracking_id
: Tracking ID を取得して設定
6-6. サイト管理者の設定Permalink
# Site Author
author:
name : "mk-mode.com"
avatar : "/assets/images/about_me.png"
bio : "Linux, Debian, IT, Server, PG, Ruby, Rails, Python, Fortran, PC, MariaDB, math, GIS, etc..." # "I am an amazing person."
location: "Ruby City MATSUE"
email :
links:
- label: "Email"
icon : "fas fa-fw fa-envelope-square"
# url: "mailto:webmaster@mk-mode.com"
- label: "mk-mode SITE"
icon : "fas fa-fw fa-link"
url : "https://www.mk-mode.com"
- label: "Twitter"
icon : "fab fa-fw fa-twitter-square"
url : "https://twitter.com/account_name"
- label: "Facebook"
icon : "fab fa-fw fa-facebook-square"
# url: "https://facebook.com/"
- label: "GitHub"
icon : "fab fa-fw fa-github"
url : "https://github.com/komasaru"
- label: "Instagram"
icon : "fab fa-fw fa-instagram"
# url: "https://instagram.com/"
author
: サイト管理者の設定
ここで設定されたものは左サイドバーに表示される(Minimal Mistakes の場合)name
: サイトの管理者名avatar
: 管理者のアバタ画像bio
: 管理者のプロフィールlocation
: 管理者の居住地email
: 管理者のメールアドレスlinks
: 各種リンクlabel
: リンクのラベルicon
: リンクのアイコン。(Font Awesome で設定)url
: リンク URL. (コメント化すると、ラベル・アイコンは表示されない)
6-7. フッタの設定Permalink
# Site Footer
footer:
links:
- label: "Twitter"
icon : "fab fa-fw fa-twitter-square"
url : "https://twitter.com/rsm_mzk"
- label: "Facebook"
icon : "fab fa-fw fa-facebook-square"
# url:
- label: "GitHub"
icon : "fab fa-fw fa-github"
url : "https://github.com/komasaru"
- label: "GitLab"
icon : "fab fa-fw fa-gitlab"
# url:
- label: "Bitbucket"
icon : "fab fa-fw fa-bitbucket"
# url:
- label: "Instagram"
icon : "fab fa-fw fa-instagram"
# url:
footer
: フッタに表示するリンクの設定links
: 各種リンクlabel
: リンクのラベルicon
: リンクのアイコン(Font Awesome で設定)url
: リンク URL. (コメント化すると、ラベル・アイコンは表示されない)
6-8. ファイル読み込みの設定Permalink
# Reading Files
include:
- .htaccess
- _pages
exclude:
- "*.sublime-project"
- "*.sublime-workspace"
- vendor
- .asset-cache
- .bundle
- .jekyll-assets-cache
- .sass-cache
- assets/js/plugins
- assets/js/_main.js
- assets/js/vendor
- Capfile
- CHANGELOG
- config
- Gemfile
- Gruntfile.js
- gulpfile.js
- LICENSE
- log
- node_modules
- package.json
- Rakefile
- README
- tmp
- /docs # ignore Minimal Mistakes /docs
- /test # ignore Minimal Mistakes /test
keep_files:
- .git
- .svn
encoding : "utf-8"
markdown_ext: "markdown,mkdown,mkdn,mkd,md"
include
: 強制的に変換対象に含めるディレクトリ/ファイルを設定。exclude
: 変換対象から除外するディレクトリ/ファイルを設定。keep_files
: Jekyll によって生成はされないが、保存しておきたいディレクトリ/ファイルを設定。encoding
: ページのエンコードmarkdown_ext
: Markdown ファイルの拡張子一覧
6-9. 変換の設定Permalink
# Conversion
markdown : kramdown
highlighter : rouge
lsi : false
excerpt_separator: "<!--more-->" #"\n\n"
incremental : false # (Incremental regeneration is still an experimental feature)
# Markdown Processing
kramdown:
input : GFM
hard_wrap : false
auto_ids : true
footnote_nr : 1
entity_output : as_char
toc_levels : 1..6
smart_quotes : lsquo,rsquo,ldquo,rdquo
enable_coderay: false
markdown
: 使用する Markdown コンバータhighlighter
: 使用する syntax highlighterlsi
: 関連記事のインデックスを作成するか否か。excerpt_separator
: 記事一覧表示時にこの文字列以前を抜粋incremental
: 記事ビルド時に増分のみビルドするか否か(但し、実験的機能)kramdown
:markdown
でkramdown
を設定した場合に設定。input
:GFM
を設定することで、 GitHub Flavored Markdown を使用可能。auto_ids
:true
を設定することで、 TOC に対応。(目次からのページ内リンク)- …
6-10. スタイルシート(SCSS)の設定Permalink
# Sass/SCSS
sass:
sass_dir: _sass
style : compressed # http://sass-lang.com/documentation/file.SASS_REFERENCE.html#output_style
sass
: SCSS の設定sass_dir
: 生成される Sass ファイルを配置するディレクトリstyle
: 生成される Sass ファイルを圧縮(minify)する場合はcompressed
を設定
6-11. 出力の設定Permalink
# Outputting
permalink : /:year/:month/:day/:title/ # /:categories/:title/
paginate : 10 # amount of posts to show
paginate_path: /page:num/
timezone : Asia/Tokyo # https://en.wikipedia.org/wiki/List_of_tz_database_time_zones
permalink
: 記事のパス形式paginate
: ページ処理する際の1ページの最大記事数paginate_path
: ページ処理する際のページのパス形式timezone
: タイムゾーン
6-12. プラグインの設定Permalink
# Plugins (previously gems:)
plugins:
- jekyll-paginate
- jekyll-sitemap
- jekyll-gist
- jekyll-feed
- jemoji
- jekyll-include-cache
- jekyll-archives
# mimic GitHub Pages with --safe
whitelist:
- jekyll-paginate
- jekyll-sitemap
- jekyll-gist
- jekyll-feed
- jemoji
- jekyll-include-cache
- jekyll-archives
plugins
: 使用するプラグインを設定
上記のjekyll-paginate
〜jekyll-include-cache
は Minimal Mistakes のデフォルト。
追加したいプラグインがあれば、jekyll-include-cache
より後ろに追加。(Gemfile
への記述も必要)whitelist
: GitHub Pages で使用するプラグインを配列化して設定(plugins
と同じ?当方、不使用なので詳細不明)
6-13. フィードの設定Permalink
# Jekyll Feed
feed:
path: "atom.xml"
atom_feed:
path: "https://www.mk-mode.com/blog/atom.xml" # blank (default) uses feed.xml
feed
path
: 生成するフィードのファイル名
atom_feed
path
: フッタのリンクに使用する Atom フィードの URL
6-14. アーカイブの設定Permalink
# Archives
# Type
# - GitHub Pages compatible archive pages built with Liquid ~> type: liquid (default)
# - Jekyll Archives plugin archive pages ~> type: jekyll-archives
# Path (examples)
# - Archive page should exist at path when using Liquid method or you can
# expect broken links (especially with breadcrumbs enabled)
# - <base_path>/tags/my-awesome-tag/index.html ~> path: /tags/
# - <base_path/categories/my-awesome-category/index.html ~> path: /categories/
# - <base_path/my-awesome-category/index.html ~> path: /
category_archive:
type: jekyll-archives # liquid
path: /categories/
tag_archive:
type: jekyll-archives # liquid
path: /tags/
# https://github.com/jekyll/jekyll-archives
jekyll-archives:
enabled: all
#- year
#- month
#- day
#- categories
#- tags
layouts:
year : archive-taxonomy
month : archive-taxonomy
day : archive-taxonomy
category: archive-taxonomy
tag : archive-taxonomy
permalinks:
year : /:year/
month : /:year/:month/
day : /:year/:month/:day/
category: /categories/:name/
tag : /tags/:name/
category_archive
,tag_archive
: カテゴリ/タグ一覧の設定type
: アーカイブ生成プラグイン
jekyll-archives
を使用する場合は、plugins
で設定しておく。path
: カテゴリ/タグ一覧ページのパス
jekyll-archives
: ekyll-archives の設定enabled
: 有効にしたいアーカイブを設定all
で年/月/日/カテゴリ/タグの全て。- 個別に有効にするなら、
year
,month
,day
,categories
,tags
から必要なもののみを配列化して指定。
layouts
: 配下で各アーカイブのレイアウトを指定。permalinks
: 配下で各アーカイブのパスの形式を指定。
6-15. HTML 圧縮(minify)の設定Permalink
# HTML Compression
# - http://jch.penibelst.de/
compress_html:
clippings : all
comments : all
endings : all
ignore:
envs : development
blanklines: true
profile : false
startings : []
compress_html
: HTML minify の設定clippings
: 空白を除去しても安全な要素に囲まれた空白を除去comments
: コメントを除去endings
: 任意の終了タグを除去ignore
: 無効化envs
: 無効化する環境
blanklines
: 空白行を除去profile
: プロファイルモードの有効/無効startings
: 任意の開始タグを除去
この機能は、レイアウトファイル内で layout
に compress
が設定されているものに適用される。
例えば、 _layouts/default.html
に layout: compress
を設定すれば、概ね全てのページに適用される。
しかし、当方の Syntax highlight(rouge) の環境の場合、圧縮後の HTML が不正となった上に、行番号が表示されない等の不具合が発生する。(Liquid タグ highlight
に linenos
オプションを使用した場合)
従って、当方の環境では minify 機能は無効にした。
6-16. Yaml Front Matter 既定値の設定Permalink
(記事内の Yaml Front Matter で指定しなかった場合の既定値)
# Defaults
defaults:
# _posts
- scope:
path : ""
type : posts
values:
layout : single
classes : wide
author_profile: true
read_time : false
comments : true
share : true
related : true
defaults
: Yaml Front Matter 既定値の設定scope
: 既定値を適用する範囲path
: パス(""
で当該 Jekyll プロジェクト全体)type
: ページのタイプ(posts
,pages
,drafts
等)
values
: 既定値layout
: レイアウトclasses
: クラス(wide
で記事ペインの幅がワイドになる)author_profile
: サイト管理者の表示read_time
: 記事を読むのに必要な時間の表示comments
: コメント欄の表示share
: 共有の表示related
: 関連記事の表示
6-17. JavaScript 追加の設定Permalink
head_scripts:
- "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"
head_scripts
: head タグ内に設定する JavaScript の URL を設定しておくと、_includes/head.html
で実装される。
当方、数式処理のために MathJax を追加。
7. その他の編集Permalink
広告用 HTML コードの挿入以外で行ったこと。
7-1. 記事の横幅拡大Permalink
メイン領域(ペイン)の右側に TOC 領域(記事内の目次)は不要なので、レイアウトファイルの Yaml Front Matter に以下の記述を追加した。
(対象ファイル: archive.html
, categories.html
, tags.html
)
classes: wide
※記事は single.html
だが、 _config.yml
で既定値として classes: wide
を指定しているの、 single.html
には追加しなくてもよい。
7-2. カテゴリ/タグ/年別アーカイブ一覧ページの作成Permalink
デフォルトでは存在しないので、 _page
ディレクトリ内に作成する。
File: _page/category-archive.md
---
title : "カテゴリ別一覧"
layout : categories
classes : wide
permalink : /categories/
author_profile: true
---
File: _page/tag-archive.md
---
title : "タグ別一覧"
layout : tags
classes : wide
permalink : /tags/
author_profile: true
---
File: _page/year-archive.md
---
title : "アーカイブ"
layout : posts
classes : wide
permalink : /year-archive/
author_profile: true
---
7-3. Google カスタム検索用ページの作成Permalink
当方、サイト内検索に Google カスタム検索を使用するので、 _page
ディレクトリ内に作成した。
File: _page/search.md
---
title : "ページ内検索"
layout : single
classes : wide
permalink : /search/
author_profile: false
---
{% include search/google-search-scripts.html %}
7-4. 404 ページの作成Permalink
ページが存在しない場合のエラーページがないので、 _page
ディレクトリ内に作成する。
File: _page/404.md
---
layout : single
title : "404 ERROR - Not Found"
excerpt : "Page not found."
sitemap : false
permalink : /404.html
author_profile: true
---
Sorry, but the page you were trying to view does not exist!
7-5. カテゴリ/タグ一覧のページ内リンクの変更Permalink
デフォルトでは、カテゴリ/タグ一覧ページは、 #
を使ってページ内リンクしているが、日本語のカテゴリ/タグ名の場合に正常に機能しない(当方の環境の場合、ブラウザで URL を再確定しないと機能しない)ので、 #
を除去し、カテゴリ/タグ別のページに遷移するよう変更した。
(_config.yml
でアーカイブページの生成を liquid から jekyll-archives に変更して、カテゴリ/タグ別のページを生成している)
File: categories.html
<a href="#{{ category[0] | slugify }}">
の行を以下のように。
<a href="{{ category[0] | slugify }}">
File: tags.html
<a href="#{{ tag[0] | slugify }}">
の行を以下のように。
<a href="{{ tag[0] | slugify }}">
※年別アーカイブ(posts.html
を使用するもの)に関しては、デフォルトのまま。(ページ内リンク)
7-6. 更新日時の書式変更Permalink
記事の最後等に表示される投稿/更新日時の書式を以下のように変更。
(対象フィル: single.html
)
date: "%B %d, %Y"
となっている箇所を全て(meta
, time
タグ内、計5箇所)、以下のように。
date: "%Y-%m-%d %H:%M"
7-7. 画像の配置Permalink
プロフィール画像や favicon が無いので、 assets/images
ディレクトリ内に配置する。
当方、 about_me.png
と favicon.ico
を配置した。(about_me.png
は、 _config.yml
内の og_image
や avatar
で指定している)
- 投稿記事内で使用する画像は
assets/images
ディレクトリ内ではなく、images
ディレクトリ内に年月日別に作成したディレクトリ内に配置する。
7-8. favicon の設定Permalink
favicon を表示させるために head
タグ内に記述する。
実際には、 head
カスタマイズ用インクルードファイルに追記。
File: _includes/head/custom.html
<link rel="icon" href="{{ site.baseurl }}/assets/images/favicon.ico">
7-9. Google Analytics の設定Permalink
Google Analytics の機能を実装するために head
タグ内に記述する。
実際には、 head
カスタマイズ用インクルードファイルに追記。(_config.yml
内でも設定)
File: _includes/head/custom.html
{% include analytics-providers/google.html %}
7-10. ページトップボタンの設置Permalink
ページを下部にスクロールした際に表示するページの最上部に戻るためのボタンを設置する。
実際には、 footer
カスタマイズ用インクルードファイルに追記。
(当方、アイコン画像は Font Awesome 使用)
File: _includes/footer/custom.html
<p id="page-top">
<a href="#">
<i class="fa fa-angle-double-up fa-2x" aria-hidden="true"></i>
</a>
</p>
7-11. 自作 JavaScript の追加Permalink
JavaScript を追加したければ、 assets/js
ディレクトリ配下にファイルを作成し、 _config.yml
の head_scripts
に追加する。但し、この場合、 JavaScript は head
タグ内に追加される。
_config.yml
内で footer_scripts
に設定すると、 footer
タグ内に追加されるが、 jQuery より先に取り込まれることになっているため、 jQuery を利用した JavaScript を追加したければ、 jQuery より後で取り込むようにしなければならない。
その場合、以下のように追加する。(以下は my_custom.js
という自作スクリプトを取り込む例)
File: _includes/scripts.html
{% if site.footer_scripts %}
{% for script in site.footer_scripts %}
{% if script contains "://" %}
{% capture script_path %}{{ script }}{% endcapture %}
{% else %}
{% capture script_path %}{{ script | relative_url }}{% endcapture %}
{% endif %}
<script src="{{ script_path }}"></script>
{% endfor %}
{% else %}
<script src="{{ '/assets/js/main.min.js' | relative_url }}"></script>
<script defer src="https://use.fontawesome.com/releases/v5.6.0/js/all.js" integrity="sha384-z9ZOvGHHo21RqN5De4rfJMoAxYpaVoiYhuJXPyVmSs8yn20IE3PmBM534CffwSJI" crossorigin="anonymous"></script>
<script src="{{ '/assets/js/my_custom.js' | relative_url }}"></script>
{% endif %}
:
===< 以下省略 >===
:
7-12. ナビゲーションメニューの編集Permalink
メニューに表示させたいリンクを追加する。(以下、当方の例)
File: _data/navigation.yml
# main links
main:
- title: "Archives"
url : /year-archive/
- title: "Categories"
url : /categories/
- title: "Tags"
url : /tags/
- title: "Calendar"
url : https://www.mk-mode.com/rails/calendar/calendar
- title: "JMAXML"
url : https://www.mk-mode.com/rails/jmaxml
7-13. スタイルシートの編集Permalink
minimal-mistakes-jekyll gem の assets/css/main.css
を当該プロジェクトの assets/css
ディレクトリ配下に複製して、最終行に追加していく。
7-14. ヘッダ画像の追加Permalink
ページのヘッダ部分に画像を設定したい場合、画像ファイルを /assets/images
ディレクトリに配置し、各記事の Markdown ファイルの Yaml Front Matter に以下のような記述を追加する。(以下、画像ファイルが header.jpg
である例)
header:
image: /assets/images/header.jpg
- トップページにヘッダ画像を追加する場合は
index.html
に。 image_description
に画像の説明を設定可能。caption
に画像のキャプションを設定可能
画像にオーバレイテキストを設定することも可能。(以下、当方の例)
excerpt: "<small>当ブログは自前の Debian GNU/Linux サーバで運用。<br />PC・サーバ構築等の話題が中心。</small>"
header:
overlay_image: /assets/images/header.jpg
8. 公開方法Permalink
ビルドすると _site
ディレクトリ内に生成されるので、丸ごと公開先にアップロードすればよい。(Rsync などで)
但し、開発環境(JEKYLL_ENV
が development
)としてビルドされているので、 JEKYLL_ENV=production
としてビルドしないと不都合が出てくる。
$ JEKYLL_ENV=production bundle exec jekyll build
9. その他Permalink
- フッタにアクセスカウンタを設置しているが、別途 Rails で作成したアクセス解析処理を jQuery で非同期で実行している。
- 当方、記事が多く、全ての記事のビルドに時間がかかるため、プレビューで確認する際、該当の記事ファイル以外を
_posts
ディレクトリから_stash
ディレクトリに移動し、該当の記事ファイルに問題がないことが確認できたら、_stash
ディレクトリ内の記事ファイルを_posts
ディレクトリ内に戻すようにしている。(別途、 Rakefile を作成して) - その他、日常的に使用するコマンド類を Rakefile で定義するなどして効率化を図っている。
10. 参考サイトPermalink
カスタマイズ方法も含め、大抵のことは以下のサイトに記載されている。
次回、 Ruby 製 CMS の Octopress の記事を Jekyll 用に移行する方法について記録します。
以上。
Comments