JekyllでHamlとSassとCoffeescriptを使ってみたヘ(^o^)ノ

Shinosaka.rb

コミュニティサイトはGitHub Pagesを使うことにしました

なぜGitHub Pages?

メンバーがGitHub Pageを利用することで、Gitの操作やGitHubの使い方を実践できる

どうせならサイトを運用しならSassやCoffeeScriptのスキルも身につけたいなー（個人的にw

なので、JekyllでSassとCoffeeScriptを使う方法を調べてみました

JekyllでSassを使う

Gemfile

source 'https://rubygems.org'

gem 'jekyll'
gem 'jekyll-sass'

_plugins/bundler.rb

require "rubygems"
require "bundler/setup"
Bundler.require(:default)

_config.yml

sass:
  syntax: scss
  style: compact

css/main.css ⇒ css/main.scss

動作確認…

動いたヘ(^o^)ノ

JekyllでHamlを使う

Gemfile

gem 'jekyll-haml'

_incloudes/test.haml

%h1 Welcome to Shinosaka.rb

index.md

{% haml test.haml %}

動作確認…

動いたヘ(^o^)ノ

JekyllでCoffeeScriptを使う

Gemfile

gem 'coffee-script'

_plugins/coffeescript_converter.rb

module Jekyll
  require 'coffee-script'
  class CoffeeScriptConverter < Converter
    safe true
    priority :normal
 
    def matches(ext)
      ext =~ /coffee/i
    end
 
    def output_ext(ext)
      ".js"
    end
 
    def convert(content)
      begin
        CoffeeScript.compile content
      rescue StandardError => e
        puts "CoffeeScript error:" + e.message
      end
    end
  end
end

javascript/test.coffee

---
---
alert "Hello CoffeeScript!"

_layouts/default.html

script src="javascript/test.js"

動作確認…

ちゃんとjsファイルに変換されてるヘ(^o^)ノ

これでGitHub + Git + Jekyll + Haml + Sass + Coffeescriptの環境ができました

(￣(ｴ)￣)彡☆