Hakyllで遊んでみた
             2013-04-06 広島Ruby勉強会 #031




13年4月7日日曜日
Hakyllって?



             Jekyll みたいなやつ

             静的サイトジェネータ




13年4月7日日曜日
Jekyllじゃダメなん?



             いや、いいけど。

             Haskellしたい。




13年4月7日日曜日
Jekyll と何が違うん?

             Jekyll はルールが決まってる

             Hakyll はルールから定義できる

              デフォだとJekyll似てる感じの構成

             カスタマイズしやすそう



13年4月7日日曜日
Jekyll と何が違うん?



             コードハイライトに pygements が不要

              pandoc 使いたい




13年4月7日日曜日
目標・要求

             Markdown でかきたい

             Pandoc つかいたい

             SCSS つかいたい

             compass つかいたい



13年4月7日日曜日
資料


             http://jaspervdj.be/hakyll/

             http://jaspervdj.be/hakyll/tutorials/01-
             installation.html




13年4月7日日曜日
インストール


             haskellの環境をインストール

               http://www.haskell.org/platform/

             $ cabal install hakyll




13年4月7日日曜日
セットアップ


             $ hakyll-init my-site

               ファイルが生成されます

             $ cd my-site




13年4月7日日曜日
作成されたファイル
        ├── about.rst
        ├── contact.markdown
        ├── css
        │ └── default.css
        ├── images
        │ └── haskell-logo.png
        ├── index.html
        ├── posts
        │ ├── 2012-08-12-spqr.markdown
        │ ├── 2012-10-07-rosa-rosa-rosam.markdown
        │ ├── 2012-11-28-carpe-diem.markdown
        │ └── 2012-12-07-tu-quoque.markdown
        ├── site.hs
        └── templates
         ├── archive.html
         ├── default.html
         ├── post-item.html
         └── post.html


13年4月7日日曜日
コンパイル

             サイトを生成するためのプログラムは作る

               基本的な構成の例が用意してある

               site.hs

             $ ghc --make site.hs



13年4月7日日曜日
サイトの生成



             $ ./site build

               HTML が生成されます




13年4月7日日曜日
_site の中身
        _site
        ├── about.html
        ├── archive.html
        ├── contact.html
        ├── css
        │ └── default.css
        ├── images
        │ └── haskell-logo.png
        ├── index.html
        └── posts
           ├── 2012-08-12-spqr.html
           ├── 2012-10-07-rosa-rosa-rosam.html
           ├── 2012-11-28-carpe-diem.html
           └── 2012-12-07-tu-quoque.html



13年4月7日日曜日
サイトのプレビュー



             $ ./site preview

             $ open http://localhost:8000/




13年4月7日日曜日
デプロイ



             ./site deploy

             設定がいるけどね




13年4月7日日曜日
13年4月7日日曜日
あれどっかでみた?




13年4月7日日曜日
railsdoc.eiel.info




13年4月7日日曜日
13年4月7日日曜日
解説



             生成したファイルは _site

             その他のメタデータ _cache




13年4月7日日曜日
解説

             マッチするファイルがみつかる

              登録した処理をする

             作成したいファイル名を登録

              ファイルを生成

              他のファイルの情報を利用したり


13年4月7日日曜日
解説



             依存性の扱いがよくわからない

              要勉強




13年4月7日日曜日
markdown を使う



             なにもしなくても使える

             pandocCompilerを使う




13年4月7日日曜日
pandocを使う



             pandocCompiler使った




13年4月7日日曜日
SCSS を使う


             マッチしたときの処理の途中で

              unixFilter で コマンドをフィルターに

              sass コマンドで。




13年4月7日日曜日
SCSS を使う場合


        http://jaspervdj.be/hakyll/reference/Hakyll-Core-UnixFilter.html
        にかいてあるとおりでいけます

        match "css/*.scss" $ do
          route $ setExtension "css"
          compile $ getResourceString
              >>= withItemBody (unixFilter "sass" ["-s", "--scss"])
              >>= return . fmap compressCss




13年4月7日日曜日
compassを使う
             いろいろやったけどうまくいかない

              preprocess ってのがあったけど

              preprocess で生成したファイルを更新
              したと認識してくれない

             仕方ないので

              rake でラッパーかいた

13年4月7日日曜日
Rakefile



        desc 'generate site'
        task :generate do
         sh 'ghc --make site.hs && compass compile && ./site build'
        end




13年4月7日日曜日
URLまわり

             hoge.md には hoge/ でアクセスしたい

              hoge.md -> hoge/indexhtml

             customRoute に関数を渡せばよい

              Identify -> FilePath な関数



13年4月7日日曜日
例



        let addIndex x = replaceBaseName x $ (takeBaseName x) ++ "/index"
        route $ customRoute $
          addIndex . (`replaceExtension` "html") . toFilePath




13年4月7日日曜日
ソースコード
      https://github.com/eiel/raildoc.eiel.info




13年4月7日日曜日
ご清聴ありがとうございます




13年4月7日日曜日

Hakyllで遊んでみた。

  • 1.
    Hakyllで遊んでみた 2013-04-06 広島Ruby勉強会 #031 13年4月7日日曜日
  • 2.
    Hakyllって? Jekyll みたいなやつ 静的サイトジェネータ 13年4月7日日曜日
  • 3.
    Jekyllじゃダメなん? いや、いいけど。 Haskellしたい。 13年4月7日日曜日
  • 4.
    Jekyll と何が違うん? Jekyll はルールが決まってる Hakyll はルールから定義できる デフォだとJekyll似てる感じの構成 カスタマイズしやすそう 13年4月7日日曜日
  • 5.
    Jekyll と何が違うん? コードハイライトに pygements が不要 pandoc 使いたい 13年4月7日日曜日
  • 6.
    目標・要求 Markdown でかきたい Pandoc つかいたい SCSS つかいたい compass つかいたい 13年4月7日日曜日
  • 7.
    資料 http://jaspervdj.be/hakyll/ http://jaspervdj.be/hakyll/tutorials/01- installation.html 13年4月7日日曜日
  • 8.
    インストール haskellの環境をインストール http://www.haskell.org/platform/ $ cabal install hakyll 13年4月7日日曜日
  • 9.
    セットアップ $ hakyll-init my-site ファイルが生成されます $ cd my-site 13年4月7日日曜日
  • 10.
    作成されたファイル ├── about.rst ├── contact.markdown ├── css │ └── default.css ├── images │ └── haskell-logo.png ├── index.html ├── posts │ ├── 2012-08-12-spqr.markdown │ ├── 2012-10-07-rosa-rosa-rosam.markdown │ ├── 2012-11-28-carpe-diem.markdown │ └── 2012-12-07-tu-quoque.markdown ├── site.hs └── templates ├── archive.html ├── default.html ├── post-item.html └── post.html 13年4月7日日曜日
  • 11.
    コンパイル サイトを生成するためのプログラムは作る 基本的な構成の例が用意してある site.hs $ ghc --make site.hs 13年4月7日日曜日
  • 12.
    サイトの生成 $ ./site build HTML が生成されます 13年4月7日日曜日
  • 13.
    _site の中身 _site ├── about.html ├── archive.html ├── contact.html ├── css │ └── default.css ├── images │ └── haskell-logo.png ├── index.html └── posts ├── 2012-08-12-spqr.html ├── 2012-10-07-rosa-rosa-rosam.html ├── 2012-11-28-carpe-diem.html └── 2012-12-07-tu-quoque.html 13年4月7日日曜日
  • 14.
    サイトのプレビュー $ ./site preview $ open http://localhost:8000/ 13年4月7日日曜日
  • 15.
    デプロイ ./site deploy 設定がいるけどね 13年4月7日日曜日
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
    解説 生成したファイルは _site その他のメタデータ _cache 13年4月7日日曜日
  • 21.
    解説 マッチするファイルがみつかる 登録した処理をする 作成したいファイル名を登録 ファイルを生成 他のファイルの情報を利用したり 13年4月7日日曜日
  • 22.
    解説 依存性の扱いがよくわからない 要勉強 13年4月7日日曜日
  • 23.
    markdown を使う なにもしなくても使える pandocCompilerを使う 13年4月7日日曜日
  • 24.
    pandocを使う pandocCompiler使った 13年4月7日日曜日
  • 25.
    SCSS を使う マッチしたときの処理の途中で unixFilter で コマンドをフィルターに sass コマンドで。 13年4月7日日曜日
  • 26.
    SCSS を使う場合 http://jaspervdj.be/hakyll/reference/Hakyll-Core-UnixFilter.html にかいてあるとおりでいけます match "css/*.scss" $ do route $ setExtension "css" compile $ getResourceString >>= withItemBody (unixFilter "sass" ["-s", "--scss"]) >>= return . fmap compressCss 13年4月7日日曜日
  • 27.
    compassを使う いろいろやったけどうまくいかない preprocess ってのがあったけど preprocess で生成したファイルを更新 したと認識してくれない 仕方ないので rake でラッパーかいた 13年4月7日日曜日
  • 28.
    Rakefile desc 'generate site' task :generate do sh 'ghc --make site.hs && compass compile && ./site build' end 13年4月7日日曜日
  • 29.
    URLまわり hoge.md には hoge/ でアクセスしたい hoge.md -> hoge/indexhtml customRoute に関数を渡せばよい Identify -> FilePath な関数 13年4月7日日曜日
  • 30.
    let addIndex x = replaceBaseName x $ (takeBaseName x) ++ "/index" route $ customRoute $ addIndex . (`replaceExtension` "html") . toFilePath 13年4月7日日曜日
  • 31.
    ソースコード https://github.com/eiel/raildoc.eiel.info 13年4月7日日曜日
  • 32.