nanocを使って静的サイトを作ろう1
nanocはrubyで作られた静的HTMLのためのCMSです。自分でカスタマイズも可能で非常に便利なツールです。
個人で運営するwikiシステムのように表示する内容はあまり変化しないのに、わざわざwikiを動かすために無駄にCPUやメモリを使うというのは無駄です。
これだけで安いレンタルサーバを借りれないのはお金の面でも無駄です。
でもブログなどのようにユーザからコメントが欲しい、という要望もあるかもしれません。しかし現在のはてなブログを見てください。コメントを書き込むようにできているのに、いまや「はてブ’でコメントをする方法が普通になってきています。またtwitterを使う場合もあるでしょう。これはコメントのような情報を外部ツールを利用する流れと言えます。コメントを自分で一ヶ所で管理できるのが良いのかもしれません。
それならばいっそのこと、HTMLやCSSを多少なりとも扱えるのであれば、静的サイトで公開したほうがよっぽど良いでしょう。
http://jhistory.info/やhttp://linuxc.info/もnanocを使って作成しています。
まだ私はnanocを使いこなせていませんが、本当に便利なツールで助かっています。しかし情報がまだ少ないので私が分かる範囲で情報を公開しようと思います。
今回は、nanocのインストールからHTMLの表示までを書いていきます。
インストール
インストールはgemでインストールできます。
$ gem install nanoc $ gem install adsf
さてこれで準備が出来ました。ちなみにadsfはnanocをローカルサーバで動かして表示するときに必要になります。インストールしておいた方が無難です。
サイトを作る
まずはサイトの雛形を作ります。site_nameにはサイト名を入れてください。
$ nanoc create_site site_name
create config.yaml
create Rakefile
create Rules
create content/index.html
create content/stylesheet.css
create layouts/default.html
Created a blank nanoc site at 'site_name'. Enjoy!
この様な構成になっています。
$ ls site_name Rakefile Rules config.yaml content layouts lib output
簡単に説明をすると、layouts/はサイトの共通部分です。content以下に異なる部分を書いてきます。
そして最終的にoutput/以下に公開するサイトのデータが作成されます。
それ以外はサイトを作る際のルール等を記述する部分です。
では早速サイトを作成しましょう。
$ nanoc compile
Loading site data...
Compiling site...
create [0.03s] output/index.html
create [0.00s] output/style.css
Site compiled in 0.08s.
これでoutput/にファイルが出来ているはずです。これが最終的に表示するデータとなります。
Webサーバにアップロードするのはこのoutput以下のファイルになります。
そして、ローカルサーバの立ち上げを行います。
$ nanoc view [2012-01-16 22:43:52] INFO WEBrick 1.3.1 [2012-01-16 22:43:52] INFO ruby 1.9.3 (2011-10-30) [x86_64-linux] [2012-01-16 22:43:52] INFO WEBrick::HTTPServer#start: pid=13902 port=3000
このような表示がされれば大丈夫です。
これでnanocを使ったWebサイト構築
次回はlayaout、contentを編集して表示を変更していく方法になります。
Webサイトを公開するために行った事
将来の自分やこれからWebサイトを公開したいと考えている人のために、忘れないうちに今回行った作業を書いておきます。
今回公開したサイトは静的サイトですので、動的なサイトは考慮に入れていませんが基本は同じはずです。
テーマを決める
昨年公開されたアフィリエイトで月万単位稼ぎたい奴に向けての秘伝テクニックを公開に「とにかくマニアックであれ！」というのは正しいのではないでしょうか。
この記事はアフィリエイトでお金を稼ぐという内容ですが、儲け度外視の趣味のサイトでも同じでしょう。
きちんとテーマを決めましょう。
Webサイト作成
テーマが決まったらまず、作る内容を大きく2つに分けて考えました。それは書く内容とデザインです。内容についてはテーマが決まっているのでサイトの構成あたりに悩みますが、それより大変なのがデザインです。
自分はプログラマなため、デザインは非常に苦手です。アルゴリズムを考えるのは得意分野ですが、デザインなど本質ではないため蔑ろにしがちです。でもそれは間違いなのです、いや本質的にはそれが正しいのですが人は見かけにすごくこだわります。理由は自分には理解できません。でも同じ内容を書いていてもデザインを重要視するのです。
しかし既に書いた通りデザインは苦手です。HTML、CSSは理解できます、書けます。でも効果的な使い方が分からないのです。ここの文字は何色が良い?、どのフォントを使えば良い? 分かりません。
でも大丈夫です。Webデザインのテンプレートをフリーで公開しているサイトがたくさんあります。これらを利用しましょう。自分ですべて作りたい? 大事なことですが下らないプライドは捨てましょう。大切なのはサイトを作り公開することです。デザインを勉強したいのであれば、後からゆっくり勉強することです。
Webサイト名とドメイン取得
出来ることならば、サイト名とドメイン名は一致させた方がよいでしょう。これらが決まればドメインを取得します。また、安いですがドメイン取得にはお金が掛かります。
今回はお名前.comを利用しました。他のサービスは知りませんがこのサービスでは定期的にセールスをしていますので利用した方がお得です。1年間で数百円から数千円程度です。
特に学生さんなどのお金がないかたは".com"が良いなどのこだわりは捨てて安いのを借りましょう。jhistory.infoは99円で取得できました。
また、whoisの代行も行ってくれます。これはドメインは誰が所有しているかが分かるのですが、ここに自分の名前を公開支度ない場合、情報の肩代わりをしてくれます。
サーバを借りる
最後にサーバを用意する必要があります。もちろん自宅のPCを24時間起動しておいてサーバを自分で公開することも出来ますが、よほどの技術がないと止めた方がよいです。電気代もバカになりません。
今回はさくらのレンタルサーバのスタンダードタイプを利用しました。
初期費用は掛かりますがこれで月500円は非常にお得です。Rubyを初めとした有名どころのプログラム言語も使えるそうです。
また、容量も大きいのでデータの置き場所にも使えそうです。私は公開しているサイトの管理をするためにgitを利用していますが、ここにgitのリポジトリを置いています。
メールやtwitter等のIDを取得する
追加で最後に、これは必須ではありませんが可能であれば利用するサービスでのIDは取得しておいた方がお得です。
自分の場合メールはgmailを利用しています。
容量が多いのもうれしいのですが、有名な機能のメールアドレスを増やせるのがうれしい機能です。
たとえば、khondalitというIDで取得した場合、gmailのアドレスはkhondalit@gmail.comとなります。あとは簡単でkhondalit+hoge@gmail.comという形で"+文字列"をIDの後につけてもメールを受信できることです。
公開するサイト毎に連絡先として"+サイト名"でメールを公開すると非常に便利です。あとはgmailのフィルタ機能を利用すればどのサイトからメールが送られてきたかがすぐに分かります。
細かな設定は書いていませんが、ひとまずここまで行えばあとはサイトを公開するだけです。
次回は静的なサイトを作るために利用しているツールについてでも書きたいと思います。
ブログ開始
さて、ブログの開始です。
まずは自己紹介から。前職は泥臭い現場で、現在はWeb業界に転職したおっさんです。
このブログの目的ですが、Web開発を一人で勉強していくこと。仕事では色々経験させてもらっているのですが、それでも勉強不足は否めません。そこで、いままでの名義とは違う名義で個人開発をスタートしようと思いたち昨年からコツコツサイトを作り始めました。とはいってもしょぼい静的サイトです。Webの発展してきた流れを自分自身で一から体験していく形になるかと思います。
日本史の解説サイト。元々日本史好きなので作り始めました。
目的は自分でデザインを何とかして、ドメインをとったり普段触らないWebサイトを公開するまでの流れを経験するのが目標でした。当然現在は一応公開できているので、目的は最低限達成したといえるでしょう。とはいえ内容が0なので更新はしていくつもりです。
前職で経験した泥臭い開発の一つにLinux + C言語、というのがあります。もちろんそれ以外も色々経験しましたけど。
その中で感じたのはC言語入門サイトはありますが、初心者向けのLinuxを使った開発入門サイトはほぼないに等しいということです。これは実際おかしな話です。Rubyが盛り上がってきたころにはRuby入門サイトが出てきましたし、Lispのようなマニアックな言語の入門サイトもあります。でもLinuxとC言語というのはほとんど見かけません。これは参入する価値はあるだろうと考えたわけです。
開発の目的はjhistoryとほとんど同じですが追加目標として、アフィリエイトの利用がありあります。儲けはべつにいいのですが、アフィリエイトは今や当たり前にあるものですが、その流れを分かっていない。たとえば、AmazonやGoogle等にアフィリエイトの申し込みをして、公開して、お金を受け取るその流れを全然知らないというのが一つの理由です。やはり体験するのは大事です。
もう一つの理由はアフィリエイトの本の情報です。例えば、表紙の画像があるだけでもプログラミング入門サイトとしては非常にありがたいです。本はプログラミングのためには必須の道具ですが、どの情報がどの本にあるかを初心者は知らないのです。つまり、プログラミング入門サイトとアフィリエイトは情報の入手という意味では非常に相性が良いのです。
当分の間はこの2サイトの更新と仕事に追われる日々になりそうです。
