主に技術的なことを書くブログ

浅めにマークアップ＆フロントエンドの技術的なことをメモしていましたが、ざっくばらんに書いています。

Jekyllを使って、DropboxのMarkdownファイルをいい感じに整理してみた

Jekyll

最近、仕事の細かい作業のこととかをMarkdownでメモってDropboxに.mdファイルで保存して置いておく、というのが日常化してきたのですが、それらをいい感じに一覧にしたり整理できないかな、と思い、Jekyllをいれてみました。

Jekyllとは、Markdownで書いたものを静的サイトにしてブログっぽく生成してくれるツールで、イメージ的には軽量のMTみたいな感じでしょうか。

「Jekyll」の読み方は「ジキル博士とハイド氏」が「The Strange Case of Dr. Jekyll and Mr. Hyde」なので、ジキルでいいんじゃないと思うのですが、ネイティブな発音では通じないそうです。

Jekyllを「じきる」と読むと外国の方には通じない経験を多くしました。外国の方に伝える際には「じゃこる」「じぇこ」のような発音の方が通じやすいでしょう。
引用元："ブログやサイトのJekyllへの移行 - Engine Yard Blog

Jekyllのインストール

Ruby製のツールなので、事前にもろもろインストールしておく必要があります。

gem install jekyll

Jekyll プロジェクトの作成

jekyll new 任意のディレクトリの名前
cd 任意のディレクトリの名前

サーバーを起動してプレビュー

jekyll serve --watch

http://localhost:4000 をブラウザで開くと見れます。

主なファイルとディレクトリ

  • _config.yml：設定ファイル
  • _includes：テンプレート内で呼び出すモジュール
  • _layout：テンプレートのベースとなるレイアウトファイル
  • _posts：記事データ
  • _sass：Sassファイル

引用元："Jekyll × Gruntでブログを作ってみた：まずはJekyllだけ動かしてみる | 何者にもなれないWebデベロッパーのメモ - whiskers

Dropboxでつかう

Publicフォルダにいれて、公開リンクをコピーでURLを見ても、cssとかリンクがルートパスなので、もろもろリンク切れしてます。

ここに関しては、もうDropboxという環境に合わせて、力技で絶対パスに変えるしかありません。Dropboxでサイトを公開できるサービスもあるので、普通にブログとして運用する場合は、そういうのを利用したら良いと思います。

ファイルパスはテンプレhtml内の{{ site.baseurl }}で出力されてるので、_config.ymlの

baseurl: 絶対パス

と変更して、/ で終わるURLは基本見れないので、{{ post.url }}index.html とか、{{ post.url | prepend: site.baseurl }}index.html なるように設定すれば、大方見れる状態にはなります。

_config.ymlやYAML Front-Matterをいじったらwatchをとめてリロードしないと反映されないこともあるので注意です。

記事の投稿

_post以下に、2015-02-10-ファイル名.mdといった具合に、日付をつけて置くと勝手に一覧に追加されていきますが、記事にどのテンプレートを当てるかは、YAML Front-Matterといって、下記のような --- で上下をくくったところで layout: _layouts以下のテンプレの名前を指定できます。

---
layout: post
---

YAML Front-Matterに関しては、下記のようにもろもろ設定できます。

---
layout: post
title: 記事のタイトル
date: 2015-02-03 10:00:00
categories: cat1 cat2
---

日付やタイトルは、2015-02-10-ファイル名.md よりも、優先されるようなので、タイトルはともかく、下手に日付とかを設定するとややこしいことになりそうです。

カテゴリに関しては、cat1 cat2 と設定すると /cat1/cat2/ といったディレクトリが生成され、日付とは別にページが生成されます。このあたりを、もう少し踏み込んで調べたらそれなりのCMSと同等には使えるのかな、と思いますが、一旦、保留にしときます。

Markdown Setting

そのままだとちょっと普段のと違う感じの設定なので、設定しなおします。

# Build settings
markdown: redcarpet
redcarpet:
  extensions: ["no_intra_emphasis", "fenced_code_blocks", "autolink", "tables", "with_toc_data"]

参考：I want my Github Flavored Markdown · Andrzej Jóźwiak Blog

下書き機能

_drafts っていうディレクトリをつくって、そこに投稿記事を置いて、下記のコマンドでプレビューすると、下書き記事込みでプレビューできます。ブログとして使う場合は必要ですね。

jekyll server --watch --drafts

_drafts以下は、ファイル名に日付なしで、作成日で勝手に日付を設定してくれるっぽく、逆に日付をつけるとリンクがおかしい感じになりました。

テンプレートのカスタマイズ

テンプレートも作り込み始めたらかなりおもしろそうなのですが、おしゃれなテンプレを見つけたので、それでひとまずは運用してみたいと思います。

ディレクトリ構造とか、公式ドキュメントで書いてる感じじゃなくても動いてたりするので、どうやってそのあたりカスタマイズしてるのか。

　

参考：Jekyll • シンプルで、ブログのような、静的サイト
参考：JekyllとAlfred Workflow | Web Scratch