Yukii's Blog

Yet Another Tech Blog.

素の jekyll に bootstrap 4 を導入するまでにやったこと

2019/02/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 を実行すると、

  1. webpack がビルドを行い、 assets/main.js を出力する
  2. これは、 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:  jekyll  bootstrap  sass  webpacker