2017-08-16

HakyllでBlogを作る

Hakyllでこのブログを作ったのでそのあれこれを

概要

やりたいことは以下

orgで文章をかく(大事)
orgから良い感じのHTMLを生成し
github pagesで公開

Hakyllのsetup

次を参考にした

stack でパッケージを入れて、 hakyll-init → stack build → stack exec site watch で動かすところまでは簡単にいけた 2番目のリンクにあるように、 _site をsubmoduleに登録しておいて、これをmasterブランチにpushして公開するようにしておく

文書の変換・Hakyllの設定

プロジェクトの構造は次のようになっている

- root
  - _site    できたHTMLファイルが置かれる
  - _cache
  - css      できたCSSファイルが置かれる(圧縮済)
  - images   画像ファイルが(ry

  - posts    ここにorg or markdownで書いた記事を入れる
  - site.hs  Hakyllの設定ファイル

orgの変換

Hakyllは内部で文書変換にpandocを使っていて、pandocはorgに対応しているらしいので何も設定しなくても変換はできる (デフォルトの状態では posts 以下の文書ファイルが変換される)

ただし、次の2つをやりたかったのであれこれ設定をかいた

文章中の改行は強制改行
toc(目次)の表示
syntax highlightを有効にする

改行

org-modeでは、パラグラフ中で強制改行したい場合は \\ を行末に置くことになっているので、orgを変換する時にそれを噛ませるようにした markdownではmarkdown optionsに hard_line_break というのがあるのでそれで読みこめばいいんだけど、orgにはそんなものはなかったので SoftBreak を無理やり LineBreak に変換するという強引な方法をとっている。これでいつでも求めるHTMLが得られるかは不明。今のところは困ってない。

syntax highlight

これもオプションで指定すると、 code タグ内の適当なキーワードに適切なclassが付与されるので、色を自分でcssで指定した

コード

site.hs

  (略)
	  let hardLineBreaks :: Inline -> Inline
	      hardLineBreaks SoftBreak = LineBreak
	      hardLineBreaks k = k

	  let ropt = def
	  let wopt = def
		{ writerTableOfContents = True
		, writerSectionDivs = True
		, writerTemplate = Just "$if(toc)$\n$toc$\n$endif$\n$body$"
		, writerWrapText = WrapPreserve
		, writerHighlight = True
		}
        
	  compile $ pandocCompilerWithTransform ropt wopt (walk hardLineBreaks)
	      >>= loadAndApplyTemplate "templates/post.html"    postCtx
	      >>= loadAndApplyTemplate "templates/default.html" postCtx
	      >>= relativizeUrls

ここの pandocCompilerWithTransform ... がそれ。

デザイン

Hakyllのテーマにはあまりまともなものがなく、例えばJekyllのテーマをHakyll用に変換するのはかなり大変そうなのでやりたくなかった。ので、デザインは自力で何とかすることにした。

semantic-uiというCSSフレームワークを使った。この上でテンプレートHTMLを適当に改造し適当にCSSを書くことでそれらしいデザインにした。

まぁひとまずこれで。

コメント機能

ブログなのでコメント機能は欲しいなということで、disqusを入れてみた(このページの一番下に表示されてる) 海外のブログでは割とよく見るやつ

概要