読者です 読者をやめる 読者になる 読者になる

黙々とC#

"In a mad world of VBA, only the mad are sane" 『VBAという名の狂った世界で狂っているというのなら私の気は確かだ』


Nanoc4、Windows環境でのサイト構築・開発をなるべく楽する方法

f:id:d_ymkw:20170316234838j:plain

Rubyについて右も左もわからない中で、出来る限り手を抜いてサイト構築・開発する方法を確立したので記事にまとめてみた。間違ってたらごめんなさい。

目次

導入

Rubyをインストール。

まずはbundlerなるもの(ライブラリマネージャ)を導入する。

gem install bundler

インストールできたら、nanocでサイトを作るためのディレクトリで

bundle init

を実行。Gemfileが生成されるので、必要なライブラリ(nanoc、ローカルHTTPサーバをたてるためのadsf、自動更新を実現するためのguard-nanoc、markdownパーサのredcarpetとか)をゴリゴリ書く。

bundle install

を実行。

以後

全てのコマンドは、bundle exec って頭につけて実行する。

まず初めにサイトの雛形生成

bundle exec nanoc create-site

でテンプレ生成。

nanocの構成

デフォルトではこんな感じ。

  • content/
    • Webページのコンテンツ実体。テンプレートファイルに流し込む部分。
      • 自分はもっぱらMarkdownファイルを使ってる。
    • 注意:デフォルトでは全てindex.htmlファイルに変換される
      • AAA.md → /AAA/index.html に
      • BBBB/AAA.md → /BBBB/AAA/index.html に
    • jsやcss、imageファイルもこの中にまとめて置いてしまえばOK。
      • デフォルトでは、assets/ 以下に配置。
  • layout/
    • HTMLのテンプレートファイル
      • デフォルトだとerb(embedded ruby)ファイル
  • lib/
    • /content/のmarkdownファイルをHTMLファイルに変換する際に適用されるフィルタの実装。
    • rubyのコード。
    • このフォルダ内のコードは自動的にコンパイル時に読み込まれる。
  • output/
    • 最終出力フォルダ

あとは、nanoc.yaml (nanocの大まかな設定) と Rules (ソースからHTMLへの変換方法や最終出力をどうするかの制御を記述するファイル) が重要。

というか、もっぱらRulesをよくいじる。

サイト作成

とにかく書く。

できるだけ楽してプレビューを見る

自動でファイルの変更を検知してnanocのコンパイルを走らせる

下記コマンドを実行。

bundle exec guard

編集途中のファイルをコンパイルしようとした場合などにguardがエラーを吐いたら(動かなくなるので)

[1] guard(main)> exit

exitと入力して一旦離脱。で、再度、bundle exec guardを実行。

ローカルHTTPサーバの立ち上げ

上記bundle exec guard を実行しているターミナルとは別のターミナルで

bundle exec nanoc view

を実行。

起動しっぱなしにしておいてOK。(ファイル編集/コンパイルのたびにサーバを立ち上げ直す必要はない)