Title - Wake Up! Good Night*

Hakyllでブログを作る(実践編4)

Posted on December 19, 2015

さて、前回の続きになります。

最終回は、シンタックスハイライト+αで締めくくりたいと思います。

カスタマイズしたソースはこちらに公開していますので、適宜ご参照ください。

目次

それでは、さっそくいってみましょう。

シンタックスハイライト

pandocでコンパイルしたhtmlのコードブロックには、色付けのためのclassが付与されていますので、そのclassに合わせた色付けのcssが準備できれば良いことになります。

今回は外部パッケージの「highlighting-kate」を使って簡単に実装します。

まずは、パッケージをビルドするため、cabalファイルの「build-depends」に「highlighting-kate」を追加しておきましょう。

highlighting-kateには、いくつかカラーバリエーションが有りますので、お好みを選んで、cssファイルを作成します。

create ["css/highlight.css"] $ do
    route   idRoute
    compile $ makeItem (compressCss $ K.styleToCss K.pygments)

「K.styleToCss」でお好みのテーマ「K.pygments」をCSSに変換します。
「compressCss」でCSSをぬかりなく圧縮しておきましょう。カラーテーマはこちらに一覧があります。

CSSファイルが出来上がったので、あとはテンプレートで読み込んでおけばOKです。

ブログ公開

せっかく作ったブログはぜひ公開したいものです。

そんな時は、Github Pages。(回し者とかではないですが、オススメです)

Github PagesでHakyllで作ったブログを公開するなら、Travis CIと連携して自動化するのが便利です。
参考リンク1, 参考リンク2

デザインについて

やっぱりブログやるならかっこいいのがいいですよね(笑

Hakyllでは、ブログデザインは、頑張らないといけない感じです(汗
(ここにちょっとテンプレを公開してくれている人もいます)

とはいえ、流石にゼロから作るのはきついので、フリーのボイラープレートなどを利用するのがいいのかな、と思います。

Hakyllは苦痛じゃないけど、デザインは苦痛だという方、一緒に頑張りましょう(笑

コメントについて

記事の中でよくわからないとか、もっと説明してほしいとか、はもちろんのこと、

Hakyllでこれどうやるの?的なのもコメントに書いても良いのかなと思ったりします。

質問サイトに書くのももちろん良いと思いますが、直接問いかけることができるのがコメント欄に書くメリットですね。

答えられるかどうかは別問題として。。


Hakyll setup
Pagination with Hakyll
TUTORIAL: SNAPSHOTS, AND HOW TO PRODUCE AN RSS/ATOM FEED
TUTORIAL: USING TEASERS IN HAKYLL
Add tags to your Hakyll blog
Hakyll tips

submit to reddit このエントリーをはてなブックマークに追加