Jekyll Blogging お試し

Ruby製の静的ウェブサイト生成ツール（Static Site Generator）。なんかMarkdownとかで書いたサイトをいい感じにHTMLにしてくれるやつ。

Dockerイメージの準備

Ruby, RubyGems, gcc, makeが入っていれば動くらしい。公式Dockerイメージもあるみたいだけど、あえてスルーしてrubyイメージからやってみる。

ふだんRubyは使わないので試行錯誤。

まずはイメージをビルド。

FROM ruby:2


WORKDIR /code


RUN gem install jekyll bundler

ここでgem installしてもいいのか、という問題がありそうだけどよくわからない..（キャッシュについてはいいとして）

sudo docker build . -t myjekyll

ひとまずこれでイメージの準備はできた。

sudo docker run --rm -v `pwd`/myblog:/code -e BUNDLE_PATH=vendor/bundle myjekyll jekyll new ./

これで./myblog（/code）に新しいJekyllプロジェクトが生成される（合わせて依存ライブラリがmyblog/vendor/bundleにインストールされる）。

vendorを除いたフォルダ構成はこんな感じ。

myblog/
├── 404.html
├── about.markdown
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.markdown
└── _posts
    └── 2020-05-31-welcome-to-jekyll.markdown

もし既存のプロジェクトを使う場合、bundle installでライブラリを取得する（Gemfileに書かれた依存ライブラリがmyblog/vendor/bundleにインストールされる）。

sudo docker run --rm -v `pwd`/myblog:/code -e BUNDLE_PATH=vendor/bundle myjekyll bundle install

最後に開発用サーバを立てる。

sudo docker run --rm -v `pwd`/myblog:/code -e BUNDLE_PATH=vendor/bundle -p 4000:4000 myjekyll bundle exec jekyll serve -H 0.0.0.0 -P 4000

http://localhost:4000でチェック。

ディレクトリ構成

./

Gemfileなどがあるディレクトリ。ここはテンプレート（テーマ）置き場に使うみたい。

デフォルトで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
---

_posts/

記事のMarkdownファイルをおく場所。

サンプル記事2020-05-31-welcome-to-jekyll.markdownの冒頭（適当に改行を入れた）はこうなっていた。

---
layout: post
title:  "Welcome to Jekyll!"
date:   2020-05-31 13:16:10 +0000
categories: jekyll update
---
You’ll find this post in your `_posts` directory. Go ahead
and edit it and re-build the site to see your changes. You
can rebuild the site in many different ways, but the most
common way is to run `jekyll serve`, which launches a web
server and auto-regenerates your site when a file is updated.

ヘッダ部分（最初の---で囲まれた場所）をFront Matterというらしい（YAMLフォーマット）。ここにメタデータを書く。

_site/

ビルドされた静的サイトを構成するファイル群が出力される場所。

基本的なコマンド

jekyll build

Jekyllが生成した静的サイトを構成するファイルは_siteディレクトリ以下に出力される。自分の作成したMarkdown記事からHTMLを生成するときはjekyll buildを実行する。

jekyll serve

開発用サーバを立ち上げるコマンド。生成された静的サイトを確認するときはjekyll serveを実行する。デバッガ（プレビュー）的な機能があるようで、変更が自動的に反映される（自動的にjekyll buildしてくれる）らしい。記事以外を編集した場合は反映されないみたい？

記事（Post）の作成

_postsディレクトリ内に.md/.markdownファイルを増やせばよい。サンプル記事に書いてあるのだが、ファイル名はYEAR-MONTH-DAY-title.MARKUPにする必要があるらしい。

2020-05-31-my-first-post.md

---
layout: post
title:  "My First Post!"
date:   2020-05-31 22:05:00 +0900
tag:    First Post
tag:    Greeting
---
Hello Jekyll!


- [Jekyll](https://jekyllrb.com/)

テーマの変更（例：Minimal Mistakes）

Jekyll 3.2からgemでデフォルトのテーマを導入するようになったらしい。デフォルトはminima。 そのため_layouts, _includesなどのテーマ編集用のファイルが新規プロジェクトに生成されなくなった。

試しにテーマをMinimal Mistakesに変更してみる。

まずGemfileを編集し、以下の行を追加する。

# https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/
gem "minimal-mistakes-jekyll"

次に_config.ymlのthemeを変更するのだが、他にも色々とテーマに依存した設定をこのファイルに書くようなのでGitHubから持ってきて置き換えた方がいい気がする。

# theme: minima
theme: minimal-mistakes-jekyll

デフォルトのindex.markdownをMinimal Mistakesのindex.htmlに置き換える（index.markdownを削除、index.htmlをダウンロードして置き換えなど）

投稿のlayoutがpostからsingleになっているので各Markdownファイルを修正する（about.markdownも忘れずに、あるいは削除）。

それから、タグ検索ページを追加する。_pages/tag-archive.mdを下からコピーしてくればOK（_config.ymlはリポジトリのものに置き換えたと想定）。

これでbuildすればテーマが変わる。細かい作業が多くて結構面倒くさい..。Git管理することを考えて、できる限りもとのファイルを維持したまま置き換えようとしたからかな？　諦めて_postsだけを移行するようにして、丸ごと入れ替えてしまったほうが楽だったかもしれない。なんか昔のHTMLテンプレートを記事だけ使いまわせるようにした、みたいな...。

コマンドで新規記事をテンプレートから作成できそうなのも見かけたし、記事を書くときにも色々追加記法があって、それからテーマの作成についても書こうかと思っていたけど、また今度。