カテゴリー
log

JekyllとAssembleを試す

静的サイトのジェネレータをいろいろ試してる。

Jekyll

  • destination に対してcleanとセットなので、いろんなファイルが設置されるウェブサイトとしてはあんまり実用的ではないイメージ。
  • デフォルトでwatchscssとかcoffeeとセットで使えるのでブログ用途なんかはとても向いてると思う。
  • .ymlで変数定義しといてLiquidテンプレート上で柔軟に使えるのはいい

以下な感じで.yml上でページごとの設定をまとめて定義できるっていうのもいい。

defaults:
  -
    scope:
      path: ""
      type: "post"
    values:
      layout: "default"
      title: 'SiteName'
  -
    scope:
      path: "page1"
      type: "page"
    values:
      layout: "page"
      title: "This is Page1"
  -
    scope:
      path: "page2"
      type: "page"
    values:
      layout: "page"
      title: "This is Page2"

参考:
Jekyll • Simple, blog-aware, static sites

Assemble

  • gruntとセットで使う(ふだんgrunt使っているのでコマンドまとめれる)
  • Jekyllとあんまりかわらないがテンプレートはhandlbars

gruntタスク書くとこんな感じ。

  …

  grunt.initConfig

    # path ==============================
    path :
      root  : "public"
      src   : "<%= path.root %>/_src"
      dist  : "<%= path.root %>/assets"

    # assemble ==============================
    assemble:
      options:
        data: "<%= path.src %>/assemble/*.yml"
        assets: "<%= path.dist %>"
        layoutdir: "<%= path.src %>/assemble/layouts/"
        layout: "default.hbs"
        partials: "<%= path.src %>/assemble/partials/**/*.hbs"
        ext: '.html'

      # dev
      dev:
        options:
          environment : 'development'
        files: [{
          expand: true
          cwd: "<%= path.src %>/assemble/pages/"
          src: "**/*.hbs"
          dest: "<%= path.root %>"
        }]

      # deploy
      deploy:
        options:
          environment : 'production'
        files: [{
          expand: true
          cwd: "<%= path.src %>/assemble/pages/"
          src: "**/*.hbs"
          dest: "<%= path.root %>"
        }]


    # dev : esteWatch ==============================
    esteWatch:
      options:
        dirs: [
          …
          "<%= path.src %>/assemble/**/"
          …
        ]

      hbs: (filepath) ->
        if /_src\/assemble\//.test filepath
          return [
            "assemble:dev"
          ]

  …

  grunt.loadNpmTasks('assemble')

  …

  grunt.registerTask "default", [
    …
    "assemble:dev"
    …
  ]

  grunt.registerTask "deploy", [
    …
    "assemble:deploy"
    …
  ]

参考:
assemble/assemble