Help us understand the problem. What is going on with this article?

静的サイトジェネレーター「roots」

More than 5 years have passed since last update.

静的サイトジェネレータ

新しくブログを作るにあたって、静的サイトジェネレータなるものを使うことにした。jekyllはいろんな人が使ってるし、1番有名な気がしてる。

他には、middlemanも日本語の情報が多くて良さそう。
でも、なんとなくgemに頼りたくなかったので(普段Sass使ってるけど)、rootsというものを使った。

roots

rootsはnode製の静的サイトジェネレーター。

公式サイト: roots | where it all begins

npmでインストールできる。

$ npm install -g roots

npmが入っていない人はここからnode.jsをインストールする。

$ roots new project-name

でプロジェクトのテンプレートを作成できる。

ブログのテンプレートは

$ roots new blog-name --blog

で、作成。


rootsは、デフォルトでJadeStylusCoffeeScriptが使える。ファイルのコンパイルは

$ roots compile

Jade, Stylus, CoffeeScriptをコンパイルして/publicに出力される。ついでに、HTML, CSS, JavaScriptのMinifyもしてくれる。また、

$ roots watch

で、ファイルを監視して保存時に自動的にコンパイルできる。ローカルサーバーがデフォルトでポート1111番で起動する。watchではMinifyはされない。watchしてると、保存時に自動でブラウザがリロードするのが気持ちいい。

他にも、heroku toolbeltをインストールしていると、

$ roots deploy

で、一発でherokuにデプロイできる。

また、rootsでは、axisというStylusのMixin集が使える。normalize.cssをインクルードできたり、gridも設定できる。

grid()

column-width = 60px
gutter-width = 20px
columns = 12
total-width = 100%

  .main
     column(9)

  .sidebar
     column(3)

columnsでgridの分割数を設定して、column()で使える。他にも、ベンダープレフィックスが自動で付けれたり、ボタンとか通知とかのUIパーツもある。

rootsは、公式サイトチュートリアル動画のリンクがあるので、見てみるといいかも。

最後に

rootsを使ってブログを作った。簡単なサイトを作るのにはすごく便利で、どれか使えるようにしておくといい気がする。
WordpressのようなCMSとは違い、シンプルでカスタマイズしやすかった。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away