Tambourine作業メモ

主にスキル習得のためにやった作業のメモ。他人には基本的に無用のものです。

Jekyllで遊んでみる

自分のパソコンのホームディレクトリには、これまでいじったいろんなソフトウェアの自作チートシートや有用なリンク集を集めたメモがある。

これらは古くはRDで書いてあって、どこかのタイミングでMarkdownで書き直した。ちまちまと書きためていて、rakeコマンドでHTMLファイルを生成出来るようにしてある。しかし、見たいタイミングでrakeで最新化するのは面倒くさいので、ついついMarkdownのまま見てしまったりする。

こういうもののHTML生成は、現代的には静的サイトジェネレーターを使うのが正しいらしい。というわけで、Rubyで作られた静的サイトジェネレーターでGithub Pagesの中の人であるJekyllをいじってみることにする。

いつもの通り、gemとbundlerでインストールは出来てしまう。

> gem install bundler jekyll
Fetching bundler-2.4.13.gem
Successfully installed bundler-2.4.13
Parsing documentation for bundler-2.4.13
Installing ri documentation for bundler-2.4.13
Done installing documentation for bundler after 0 seconds
Fetching forwardable-extended-2.6.0.gem
Fetching safe_yaml-1.0.5.gem
Fetching terminal-table-3.0.2.gem
Fetching pathutil-0.16.2.gem
Fetching liquid-4.0.4.gem
Fetching kramdown-2.4.0.gem
Fetching unicode-display_width-2.4.2.gem
Fetching mercenary-0.4.0.gem
Fetching kramdown-parser-gfm-1.1.0.gem
Fetching ffi-1.15.5.gem
Fetching rb-inotify-0.10.1.gem
Fetching rb-fsevent-0.11.2.gem
Fetching listen-3.8.0.gem
Fetching jekyll-watch-2.2.1.gem
Fetching google-protobuf-3.23.2-arm64-darwin.gem
Fetching sass-embedded-1.62.1-arm64-darwin.gem
Fetching jekyll-sass-converter-3.0.0.gem
Fetching concurrent-ruby-1.2.2.gem
Fetching i18n-1.13.0.gem
Fetching http_parser.rb-0.8.0.gem
Fetching eventmachine-1.2.7.gem
Fetching em-websocket-0.5.3.gem
Fetching colorator-1.1.0.gem
Fetching public_suffix-5.0.1.gem
Fetching jekyll-4.3.2.gem
Fetching addressable-2.8.4.gem
Successfully installed unicode-display_width-2.4.2
Successfully installed terminal-table-3.0.2
Successfully installed safe_yaml-1.0.5
Successfully installed forwardable-extended-2.6.0
Successfully installed pathutil-0.16.2
Successfully installed mercenary-0.4.0
Successfully installed liquid-4.0.4
Successfully installed kramdown-2.4.0
Successfully installed kramdown-parser-gfm-1.1.0
Building native extensions. This could take a while...
Successfully installed ffi-1.15.5
Successfully installed rb-inotify-0.10.1
Successfully installed rb-fsevent-0.11.2
Successfully installed listen-3.8.0
Successfully installed jekyll-watch-2.2.1
Successfully installed google-protobuf-3.23.2-arm64-darwin
Successfully installed sass-embedded-1.62.1-arm64-darwin
Successfully installed jekyll-sass-converter-3.0.0
Successfully installed concurrent-ruby-1.2.2
Successfully installed i18n-1.13.0
Building native extensions. This could take a while...
Successfully installed http_parser.rb-0.8.0
Building native extensions. This could take a while...
Successfully installed eventmachine-1.2.7
Successfully installed em-websocket-0.5.3
Successfully installed colorator-1.1.0
Successfully installed public_suffix-5.0.1
Successfully installed addressable-2.8.4
Successfully installed jekyll-4.3.2
Parsing documentation for unicode-display_width-2.4.2
Installing ri documentation for unicode-display_width-2.4.2
Parsing documentation for terminal-table-3.0.2
Installing ri documentation for terminal-table-3.0.2
Parsing documentation for safe_yaml-1.0.5
Installing ri documentation for safe_yaml-1.0.5
Parsing documentation for forwardable-extended-2.6.0
Installing ri documentation for forwardable-extended-2.6.0
Parsing documentation for pathutil-0.16.2
Installing ri documentation for pathutil-0.16.2
Parsing documentation for mercenary-0.4.0
Installing ri documentation for mercenary-0.4.0
Parsing documentation for liquid-4.0.4
Installing ri documentation for liquid-4.0.4
Parsing documentation for kramdown-2.4.0
Installing ri documentation for kramdown-2.4.0
Parsing documentation for kramdown-parser-gfm-1.1.0
Installing ri documentation for kramdown-parser-gfm-1.1.0
Parsing documentation for ffi-1.15.5
Installing ri documentation for ffi-1.15.5
Parsing documentation for rb-inotify-0.10.1
Installing ri documentation for rb-inotify-0.10.1
Parsing documentation for rb-fsevent-0.11.2
Installing ri documentation for rb-fsevent-0.11.2
Parsing documentation for listen-3.8.0
Installing ri documentation for listen-3.8.0
Parsing documentation for jekyll-watch-2.2.1
Installing ri documentation for jekyll-watch-2.2.1
Parsing documentation for google-protobuf-3.23.2-arm64-darwin
Installing ri documentation for google-protobuf-3.23.2-arm64-darwin
Parsing documentation for sass-embedded-1.62.1-arm64-darwin
Installing ri documentation for sass-embedded-1.62.1-arm64-darwin
Parsing documentation for jekyll-sass-converter-3.0.0
Installing ri documentation for jekyll-sass-converter-3.0.0
Parsing documentation for concurrent-ruby-1.2.2
Installing ri documentation for concurrent-ruby-1.2.2
Parsing documentation for i18n-1.13.0
Installing ri documentation for i18n-1.13.0
Parsing documentation for http_parser.rb-0.8.0
unknown encoding name "chunked\r\n\r\n25" for ext/ruby_http_parser/vendor/http-parser-java/tools/parse_tests.rb, skipping
Installing ri documentation for http_parser.rb-0.8.0
Parsing documentation for eventmachine-1.2.7
Installing ri documentation for eventmachine-1.2.7
Parsing documentation for em-websocket-0.5.3
Installing ri documentation for em-websocket-0.5.3
Parsing documentation for colorator-1.1.0
Installing ri documentation for colorator-1.1.0
Parsing documentation for public_suffix-5.0.1
Installing ri documentation for public_suffix-5.0.1
Parsing documentation for addressable-2.8.4
Installing ri documentation for addressable-2.8.4
Parsing documentation for jekyll-4.3.2
Installing ri documentation for jekyll-4.3.2
Done installing documentation for unicode-display_width, terminal-table, safe_yaml, forwardable-extended, pathutil, mercenary, liquid, kramdown, kramdown-parser-gfm, ffi, rb-inotify, rb-fsevent, listen, jekyll-watch, google-protobuf, sass-embedded, jekyll-sass-converter, concurrent-ruby, i18n, http_parser.rb, eventmachine, em-websocket, colorator, public_suffix, addressable, jekyll after 6 seconds
27 gems installed

> jekyll new manuals
Running bundle install in /Users/tambara/manuals... 
  Bundler: Fetching gem metadata from https://rubygems.org/............
  Bundler: Resolving dependencies...
  Bundler: Using bundler 2.4.13
  Bundler: Using eventmachine 1.2.7
  Bundler: Using http_parser.rb 0.8.0
  Bundler: Using ffi 1.15.5
  Bundler: Using forwardable-extended 2.6.0
  Bundler: Using rexml 3.2.5
  Bundler: Using liquid 4.0.4
  Bundler: Using mercenary 0.4.0
  Bundler: Using unicode-display_width 2.4.2
  Bundler: Using public_suffix 5.0.1
  Bundler: Using colorator 1.1.0
  Bundler: Using addressable 2.8.4
  Bundler: Using em-websocket 0.5.3
  Bundler: Using rb-inotify 0.10.1
  Bundler: Using kramdown 2.4.0
  Bundler: Using concurrent-ruby 1.2.2
  Bundler: Using terminal-table 3.0.2
  Bundler: Using google-protobuf 3.23.2 (arm64-darwin)
  Bundler: Using rb-fsevent 0.11.2
  Bundler: Using rouge 4.1.1
  Bundler: Using safe_yaml 1.0.5
  Bundler: Using webrick 1.8.1
  Bundler: Using pathutil 0.16.2
  Bundler: Using i18n 1.13.0
  Bundler: Using sass-embedded 1.62.1 (arm64-darwin)
  Bundler: Using listen 3.8.0
  Bundler: Using kramdown-parser-gfm 1.1.0
  Bundler: Using jekyll-sass-converter 3.0.0
  Bundler: Using jekyll-watch 2.2.1
  Bundler: Using jekyll 4.3.2
  Bundler: Fetching jekyll-feed 0.17.0
  Bundler: Fetching jekyll-seo-tag 2.8.0
  Bundler: Installing jekyll-feed 0.17.0
  Bundler: Installing jekyll-seo-tag 2.8.0
  Bundler: Fetching minima 2.5.1
  Bundler: Installing minima 2.5.1
  Bundler: Bundle complete! 7 Gemfile dependencies, 33 gems now installed.
  Bundler: Use `bundle info [gemname]` to see where a bundled gem is installed.
New jekyll site installed in /Users/tambara/manuals. 

> cd manuals

> bundle exec jekyll serve
Configuration file: /Users/tambara/manuals/_config.yml
            Source: /Users/tambara/manuals
       Destination: /Users/tambara/manuals/_site
 Incremental build: disabled. Enable with --incremental
      Generating... 
       Jekyll Feed: Generating feed for posts
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacing-unit, 2) or calc($spacing-unit / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
40 │   margin-bottom: $spacing-unit / 2;
   │                  ^^^^^^^^^^^^^^^^^
   ╵
    ../../../../minima-2.5.1/_sass/minima/_base.scss 40:18  @import
    minima.scss 48:3                                        @import
    /Users/tambara/manuals/assets/main.scss 1:9             root stylesheet
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacing-unit, 2) or calc($spacing-unit / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
134 │   padding-left: $spacing-unit / 2;
    │                 ^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minima-2.5.1/_sass/minima/_base.scss 134:17  @import
    minima.scss 48:3                                         @import
    /Users/tambara/manuals/assets/main.scss 1:9              root stylesheet
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacing-unit, 2) or calc($spacing-unit / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
189 │     padding-right: $spacing-unit / 2;
    │                    ^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minima-2.5.1/_sass/minima/_base.scss 189:20  @content
    minima.scss 38:5                                         media-query()
    ../../../../minima-2.5.1/_sass/minima/_base.scss 186:3   @import
    minima.scss 48:3                                         @import
    /Users/tambara/manuals/assets/main.scss 1:9              root stylesheet
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacing-unit, 2) or calc($spacing-unit / 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
190 │     padding-left: $spacing-unit / 2;
    │                   ^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minima-2.5.1/_sass/minima/_base.scss 190:19  @content
    minima.scss 38:5                                         media-query()
    ../../../../minima-2.5.1/_sass/minima/_base.scss 186:3   @import
    minima.scss 48:3                                         @import
    /Users/tambara/manuals/assets/main.scss 1:9              root stylesheet
Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacing-unit, 3) or calc($spacing-unit / 3)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
244 │     padding: ($spacing-unit / 3) ($spacing-unit / 2);
    │               ^^^^^^^^^^^^^^^^^
    ╵
    ../../../../minima-2.5.1/_sass/minima/_base.scss 244:15  @import
    minima.scss 48:3                                         @import
    /Users/tambara/manuals/assets/main.scss 1:9              root stylesheet
Warning: 6 repetitive deprecation warnings omitted.
Run in verbose mode to see all warnings.
                    done in 7.24 seconds.
 Auto-regeneration: enabled for '/Users/tambara/manuals'
    Server address: http://127.0.0.1:4000/
  Server running... press ctrl-c to stop.

なんかいっぱいWarningは出ているのだが、画面は出るのでインストールはこれで良いらしい。

作られたディレクトリの中を見ると、すごくシンプルだ。

> ls -l
total 48
-rw-r--r--@ 1 tambara  staff   419  5 27 21:28 404.html
-rw-r--r--@ 1 tambara  staff  1309  5 27 21:28 Gemfile
-rw-r--r--  1 tambara  staff  2052  5 27 21:29 Gemfile.lock
-rw-r--r--@ 1 tambara  staff  2079  5 27 21:28 _config.yml
drwxr-xr-x  3 tambara  staff    96  5 27 21:28 _posts/
drwxr-xr-x  9 tambara  staff   288  6 22 23:13 _site/
-rw-r--r--@ 1 tambara  staff   539  5 27 21:28 about.markdown
-rw-r--r--@ 1 tambara  staff   175  5 27 21:28 index.markdown

_siteに作られたhtmlファイルが格納される。さっき表示されたページの元ネタはindex.markdownだが、このファイルの中身はこれしかない。

---
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults

layout: home
---

このファイルに書いてあるURLをみると、どうやらこういうことらしい。

  • 普通はテンプレートファイルを作って、それを元に表示をする。
  • しかし、今のJekyllはnewした段階でminimaというgemで提供されているデフォルトテーマを使う。これがGemfileに指定されている。
  • 本来は_layoutというディレクトリを作ってそこにテンプレートを入れて作っていくんだけど、出来合のものがgemに入っているので何にもないのに動いているように見える
  • このテーマを使い続けるなら、コンテンツを_postsというディレクトリに置いていけばブログ風のサイトが出来る

なるほど。しかし、作りたいのはblogじゃないんだわ。

というわけで、このドキュメントを読んでいく。