Fork me on GitHub

役立ちぬ開発史、それはただのブログ

覚えておくといい、ブログの時代は終わる。いつかその内、きっとたぶん…

さっそくDoccpadを触ってみた、インストールしてWebサイトを表示

| Comments

昨日参加したイベント@shirokuro331さんが話してたDocpadをさっそく触ってみました。すごく簡単にWebサイトのひな形が用意できるので、メチャクチャ興味を引かれました。エンジニアも、いちいちビューを用意するのは面倒くさいのです。

Docpadを使って、Webサイトを表示する

Docpadをインストールするには、Node.jsがインストールされていることが前提です。なので、Node.jsを入れてない人は、DocPadの公式サイトのInstall Node.jsを参考にインストールしましょう。サイトは英語ですが、大して書かれてないので、あまり苦になることはないと思います。

Node.jsが準備出来たら、以下のコマンドを実行しましょう。
npmをアップデートして、Docpadをインストールします。

1
npm install -g npm; npm install -g docpad@6.57

Docpadがインストールできたら、ディレクトリを作り、その中に移動しましょう。

1
2
mkdir dev-test
cd dev-test

移動したら、docpad runと打ちます。

1
docpad run

そしたら、ぞろぞろと選択できるCSSフレームワークが出力されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
info: Welcome to DocPad v6.57.0 (global installation: /usr/local/lib/node_modules/docpad)
info: Contribute: http://docpad.org/docs/contribute
info: Plugins:
info: Environment: development
info: Updating the exchange...
This can take a moment...
info: Updated the exchange
info: You are about to create your new project inside your current directory. Below is a list of skeletons to bootstrap your new project:

  1.    HTML5 Boilerplate
        HTML5 Boilerplate skeleton for DocPad. Bare essentials for building a modern website with best practices

  2.    HTML5 Boilerplate with Grunt
        The HTML5 Boilerplate skeleton with Grunt for concatenation and minification of assets

  3.    HTML5 Boilerplate with Jade and LESS
        A skeleton that uses the HTML5 boilerplate with Jade and LESS. Also includes jQuery and the livereload plugin.

  4.    Twitter Bootstrap
        Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions

  5.    Twitter Bootstrap with Jade
        Twitter Bootstrap skeleton for DocPad developed using Jade (a HAML alternative for Node.js)

  6.    Twitter Bootstrap with Coffeekup
        Twitter Bootstrap skeleton for DocPad developed using Coffeekup (markup as coffeescript)

  7.    Kitchensink
        A DocPad Skeleton useful for showcasing different features and functionality of DocPad. Implemented using Twitter Bootstrap

  8.    Benjamin Lupton's Website
        Use Benjamin Lupton's website - http://balupton.com - as the base for your own :)

  9.    DocPad's Website
        DocPad's Website

  10.   Bevry's Website
        Bevry's Website (the company behind DocPad)

  11.   Startup Hostel's Website
        Startup Hostel, the home in paradise for the doers of the world!

  12.   NodeChat
        Node Chat, built using Socket.io, DocPad, Backbone.js and Twitter Bootstrap

  13.   SlidePad
        Create HTML5 Presentations easily with DocPad

  14.   Reveal.js
        Create Reveal.js presentations easily with DocPad

  15.   Conference Boilerplate
        A kickstart to create websites for conference/events

  16.   Zurb Foundation(SASS)
        A minimal Zurb Foundation skeleton with SASS and coffeescript

  17.   Meny
        Create a simple page utilizing the Meny 3D menu

  18.   YUI PureCSS
        YUI PureCSS skeleton for DocPad

  19.   Zurb Foundation
        A clean responsive template that contains a logical setup for a website + blog

  20.   No Skeleton
        Prefer to start from scratch? You can get started without any skeleton if you wish

Which skeleton will you use? [1-20]
  1.    HTML5 Boilerplate
  2.    HTML5 Boilerplate with Grunt
  3.    HTML5 Boilerplate with Jade and LESS
  4.    Twitter Bootstrap
  5.    Twitter Bootstrap with Jade
  6.    Twitter Bootstrap with Coffeekup
  7.    Kitchensink
  8.    Benjamin Lupton's Website
  9.    DocPad's Website
  10.   Bevry's Website
  11.   Startup Hostel's Website
  12.   NodeChat
  13.   SlidePad
  14.   Reveal.js
  15.   Conference Boilerplate
  16.   Zurb Foundation(SASS)
  17.   Meny
  18.   YUI PureCSS
  19.   Zurb Foundation
  20.   No Skeleton
>

この中から、好きなCSSフレームワークを選ぶと、自動的にネットから一式揃えてくれます。http://localhost:9778 にアクセスすると、インストールしたCSSフレームワークを確認できます。20No Skeletonなので、中身がないため、アクセスしても何もブラウザに表示されずNot Foundになります。

docpad runするとWebサーバが起動するので、停止させたいときは、ターミナルでCTRL+Cを押しましょう。

ちなみに、4Twitter Bootstrapを選んだ場合、この画像の様に表示されます。

Docpad-twittwebootstrap

以上、Docpadを使うとすごく簡単にWebサイトのひな形が作れて、メチャクチャ便利で楽した。

おわりに

ターミナルでコマンドを打ちますが、大して打ち込む必要がないです。インストールしたディレクトリをFinderなどで開いて、中身を編集すればいいので、デザイナの方でも簡単に使える素晴らしいツールです。ちょっとビューを作ろうと思ったときなどに、コレはすごく便利です。

Comments