素の jekyll に bootstrap 4 を導入するまでにやったこと
Published: 2019/2/27
jekyll に対して bootstrap 4 を適用したいと思った。 既存のテンプレート/gem は、情報が氾濫してたり outdated だったりでつらかったので、素の jekyll に一つ一つ機能を足していく形で実現した。 備忘として、その際に行った操作を記録しておく。
使った技術:
- Bootstrap 4
- jekyll 3.8.5
- webpacker 4
最終的な構成
- npm で bootstrap と依存ライブラリを管理
- jekyll の sass コンパイル機能で assets/main.css を作成
- webpack で bootstrap とその依存ライブラリを assets/main.js に bundle
手順
jekyll 作成
theme を適用してしまうと、構成的なデバッグがよくわからなくなったので、 jekyll プロジェクトを空で作る。
--blank オプションがそれで、 theme も default も何もない状態で作成される。
jekyll new newblog --blank
cd newblog
_layouts/default.html に、 html の外側を埋める。すごく単純化するとこんな感じになるはず。
<html>
<head>
</head>
<body>
{{ content }}
</body>
</html>
npm での bootstrap のインストール
普通に node_modules に npm のパッケージをインストールしていく。
$ yarn init -y
$ yarn add bootstrap
$ yarn add jquery
$ yarn add popper.js
unmet peer dependency が表示されずに Done が表示されていればOK.
sass の設定
Jekyll には、 sass のコンパイル機能がもともと備わっているので、それを活用する。
具体的には、 node_modules をロードパスに含ませて、そこの中を import するようにする。
# _config.yml
sass:
load_paths:
- _sass
- node_modules
assets/main.scss に以下を記述。冒頭の --- は、main.scss が jekyll によって処理されるために必要。
---
---
@import "variables";
@import "bootstrap/scss/bootstrap";
// 独自クラス定義
a {
bottom-margin: 1rem;
}
// _sass/variables.scss
// 好きな bootstrap の sass 変数設定
jekyll は、普通のファイルとして .scss ファイルを見つけると、それを sass コンパイラにかけて css として出力してくれる。
上記設定では _site/assets/main.css が出力される。
なので、以下を追加する。
<!-- _layouts/default.html -->
<html>
<head>
<link rel="stylesheet" href="/assets/main.css">
</head>
<body>
{{ content }}
</body>
</html>
この時点で、 bootstrap の css ベースのもろもろの component や class は jekyll の中で使えるようになっているはず。
webpack で依存をビルドする
依存とか正直管理したくないので、 bundle した js を assets ディレクトリ(jekyll が処理するのだったらどこにおいてもよいのだが)に作成する。
今日日、 js のビルドツールのデファクトは webpack なので、これを用いる。
$ yarn add webpack
// webpack.config.js
const path = require('path');
module.exports = {
context: path.resolve(__dirname),
entry: './_webpack/main.js',
output: {
path: path.resolve(__dirname, 'assets'),
filename: "[name].js"
},
resolve: {
modules: [
"node_modules"
]
}
}
// _webpack/main.js
import "bootstrap";
この状態で yarn run webpack を実行すると、
- webpack がビルドを行い、
assets/main.jsを出力する - これは、 jekyll のビルドで
_site/assets/main.jsにコピーされる
最後に、デフォルト layout でバンドルした main.js を読み込ませれば完成。
<!-- _layouts/default.html -->
<html>
<head>
<link rel="stylesheet" href="/assets/main.css">
</head>
<body>
{{ content }}
<script src="/assets/main.js"></script>
</body>
</html>
(おまけ) highlighter を設定する
からのプロジェクトからスタートすると、 highlighter が効いていない。
rougify コマンドから出力できるので、
bundle exec rougify style github > _sass/highlight.scss
などとしたのちに、これを main.scss で @import すればよい。
Tags: jekyllbootstrapsasswebpack
関連記事
Nuxt(Vue)の非同期コンポーネントはどうあるべきかの考察
2022/5/22
Bootstrap の scss 変数の依存関係(色とフォントまわり)
2022/5/15
Bootstrap はモバイルを最初に実装すると効率が良さそう。
2021/11/29
自分用 css のレイアウト決定のフローチャート
2021/5/15
