Raspberry Pi Advent Calendar@15日目「Raspberry Piでブログを作ろう」

これはRaspberry Pi Advent Calendarの15日目の記事です。

qiita.com

www.adventar.org

はじめに

小型なのにLinuxが動くRaspberry Piを持っていると、WordPressのようなブログを動かしたくなる衝動に駆られた方はいらっしゃるのではないでしょうか。しかし、このRaspberry PiはLAMP環境を常時動かせるほどの能力はないため、WordPressを動かすのには難があります。そしてWordPress自体も動的にコンテンツを生成しているので重い重いと言われているのも事実。そこで私は静的コンテンツであればいけるのではないかと考えました。今流行の静的サイトジェネレータってヤツを使ってみましょう。今回は私も含めて初めて挑む内容があるのでそのような方でも理解いただけるように冗長な記述を多く取り入れています。予めご了承下さい。

今回すること

  • Lighttpdで静的なウェブサイトを動かす
  • Hexoを使うための環境を準備する
  • Hexoを使って記事を投稿する

Lighttpdは静的なコンテンツを配信するのに適した軽量Webサーバです。nginxやApacheでも問題ないと思うのですが、静的コンテンツで遊ぶのでせっかくなのでこれを使ってみることにしました。今はLet’s EncryptやStartSSLを使えば誰でも無償で証明書が手に入るのでLighttpdの代わりにH2Oを使ってHTTP/2に対応させても良いかと思います。

hexoは静的サイトジェネレータです。今回の要となる部分になります。Node.jsで書かれておりnpmからインストールして利用することができます。

補足:動的に生成するCMSと静的サイトジェネレータとの違い

WordPressなどは動的なページ生成を行うCMSと位置付けされています。これは、クライアントからアクセスがある度にphpがルーティング処理をして、MySQLに接続して、情報を取得して、コンテンツを探して…といった処理を行っているのです。そのため内容を即座に反映できたりできる反面、随時先ほどのような処理をしているので負荷がかかります。「WordPressが重い」と言われている大抵の理由はこれです。

これに対して静的サイトジェネレータはMarkdownといった特定の形式で下書きのようなものを書き、それを元にジェネレータがHTML化します。そうです、ページ中のリンクやサイトのデザインもすべてまとめて作ってしまうのです。生成されるとできるのはHTML,CSS,Javascriptファイルだけとなります。PHPのようなサーバーサイドで動くファイルはありません。

もしこういった技術的なネタが好きでよく記事を漁っている方なら、なんとなかんとか.github.ioのような「PHPとかRubyが動くとは思えないのになぜかブログが動いているサイト」をよく見るかもしれません。そのようなサイトはOctopressやHexoを使ってコンテンツを生成して出来上がったファイルを置いているのです。

Lighttpdで静的なウェブサイトを動かす

まずは恒例行事だけ済ませておきましょう。

それではHTTPサーバーである、Lighttpdのインストールをします。ついでにnode.js関連も入れてしまいます。

これでインストールは完了です。ウェブブラウザを開き

http://[RaspberryPiのIPアドレス]/

と入力してみましょう。

555996ba-90f2-a9ce-128d-fa53d94c20f0

ちゃんとページが表示されていますね!
Lighttpdで指定しているドキュメントルートにこれから作成するファイルを配置したら外部から見れるようになるわけですね。
なお、ドキュメントルートは/var/www/htmlになっています。nginxに似ていますね。

Hexoのインストールと初期準備

Hexoのインストール

Hexoをnpmからインストールします。(少し時間がかかります)

途中次のようなエラーが出ますが気にしなくてOKです。(OS X以外だと出るようです)

npm WARN optional dep failed, continuing fsevents@1.0.6

インストールが完了したら、バージョンを確認してみましょう。

問題ないようですね。次は実際にブログを作る元を用意しましょう。

Hexoでブログを書く準備をしよう

まずは、大本の基盤を作ります。これにはinitコマンドを使います。

するとディレクトリが作成されているので、そのディレクトリに移動して…

必要なモジュールをインストールします。(少し時間がかかります)

ちょっとテストサーバーを立ててみよう

server コマンドを叩いて少し待つと簡易サーバーが起動します。起動したら、ブラウザにポート番号の:4000http://[RaspberryPiのIPアドレス]:4000/をつけて開いてみましょう。それっぽいブログがもう出来ています!

7927a515-b624-4b6b-5858-ff824a45f902g)

ここまで来るとなんだか楽しくなってきましたよ!終了するときは[Ctrl]+[C]です。

ブログを生成しよう

さて、ここまで来たのであとはブログとして成り立つようにHTMLファイルなどを生成していきましょう。generate コマンドを使います。

なんか面白そうなログが流れてきましたね!ファイルが生成されたらpublicフォルダが生成されています。

中に入ってちょっと中身も見てみましょう。

静的なファイルが出来ていますね!

それでは一旦Lighttpdの設定をして、ドキュメントルートがここを指すようにしてみましょう。この操作の代わりにシンボリックリンクを張っても良いと思います。
設定ファイルは/etc/lighttpd/lighttpd.confにあります。

設定を保存したらサーバーを再起動します。

もう一度ブラウザを開いて更新をかけてみましょう。
7927a515-b624-4b6b-5858-ff824a45f902

できたー!✌(‘ω’✌ )三✌(’ω’)✌三( ✌‘ω’)✌

ブログに投稿…の前にタイトルなどを設定しましょう。設定ファイルは_config.ymlです。

(コロンの間に半角スペースを入れることを忘れずに!)

それでは、ブログに記事を投稿してみましょう!

記事を投稿しよう

おっと、その前にpublicフォルダにいるなら一歩下がりましょうね。

新しい記事はnew コマンドを使います。もちろん日本語でOKですよ。

これで、source/_posts/にmarkdown形式のファイルが生成されました。ここにはmarkdown文法で記述します。開いてみましょう。

ここにmarkdown形式で書いていきます。私は次のように書いてみました。

どこかで見たことあるような内容であるのは置いといて、書いた内容は保存しましょう。
保存したらhexo serverでどのように見えるかプレビューします。

9dccc40e-4e32-9e88-a761-e94b79bdf25c

なんかそれっぽくなってきましたよ!?それではgenerateしましょう!

ファイルの生成もできたようですね!普通にLighttpdから見てみましょう。

スクリーンショット 2015-12-13 02.50.56

やったぜ。これで正常に表示されましたね!(先ほどと似ていますがアドレス欄に:4000がないのをご注目ください)

何よりも、ページを開くたびに動的に生成処理を行わないため、大変軽快に動きます。Raspberry Piでもブログを作ることができました!

もっとテーマなどカスタマイズしたいところではありますが、とりあえず目標を達成したのでここで終わりにしましょう。最後まで読んでいただきありがとうございます。

さて明日は座布団一枚さんによる記事になります。