design makes life richly.

Published: 4年 ago

静的サイトジェネレーター『PUNCH』でSassを使う


 
最近インブラウザデザイン等が話題になる中、ちらほらとStatic Site Generatorも注目されていますよね。Githubで使用されているJekyllなどが有名です。数あるStatic Site Generatorをいくつか触ってみて、使用感の良かったPUNCHをご紹介、さらにSassでの運用方法についてもご紹介します。
 
 
 

PUNCHのインストール

 

Node.jsが入っていない方はコチラからインストール。そして以下のコマンドをたたき、PUNCHをインストールする。
$ sudo npm install -g punch
これで、インストールは完了。ちゃんとインストールされているかは以下のコマンドでチェック出来ます。インストールされていたら、バージョンが表示されるかと思います。
$ punch -v
 
 
 
 

PUNCHのコマンドについて

 

PUNCHのインストールが終わったら、プロジェクトの作成を行いましょう。セットアップは下記のコマンドで。
$ punch setup hogehoge
作ったディレクトリに移動して、色々PUNCHのコマンドをうってみましょう。PUNCHは初期設定で、ショートハンドなコマンドを打つ事が出来ます。めちゃくちゃ楽ですね。主に使用するのは以下の2つ。
 

↓サイト生成やコンパイル。
$ punch g
↓PUNCHサーバーの立ち上げ(port 9009)
$ punch s
 

あとは、作成されたcontents、templatesの中で作業をして行くだけです!ここからの実際にどういったコーディング手順を取って行くかは、色んな方のテンプレートを覗いて勉強しました。触って覚えるのが一番です。こもりさんが公開しているBootstrapunch3などは扱いやすいので、静的サイトジェネレーターを始めるにあたって、非常にすんなり入れました。最後にSassのセットアップ方法をご紹介します。
 
 
 
 

PUNCHでSassを使用する

 

ここまでご紹介してきたPUNCHはNode.js製。てことでメインで使用しているプリプロセッサーはLESSなんですよね。弄って行くうちに、仕事とかでもSassの方が慣れてるし、どうにか出来ないかなーって思っていたら簡単にできたので、そちらのご紹介。まずはSass Compiler for Punchを入れましょう。インストールは下記のコマンドで。
$ sudo npm install punch-sass-compiler
そして、プロジェクトのルートディレクトリにあるconfig.jsonに、下記のコードを追加するだけ。
 

"plugins": {

    "compilers": {
        ".css": "punch-sass-compiler" 
    }

}

 
これでSass/SCSSどちらでも使えるようになります!templates内のcssフォルダへ。lessファイルといくつかcssファイルがあるかと思います。そのフォルダの中に、sassファイル作って
$ punch g
と打てば、outputフォルダが生成され、cssがコンパイルされるようになります。
 

punchやjekyllなどの静的サイトジェネレーターは業務で使う事はないですが、個人で使う分には凄い楽しいですし、小規模のサイトやブログを作るぐらいなら、これで良いのかなって最近思っています。興味ある方は是非触ってみて下さい!!
 
 
 
 

Have a Comment?

WP-SpamFree by Pole Position Marketing

Some HTML is OK