shimakyohsuke.com

この記事の続きです。

「 WordPress 永代供養 」ではなく、静的ファイルジェネレーター Hexo 使いました。

静的ファイルジェネレーターについてはググるといろいろでてきますが、
とりあえずここ↓見て自分好みのジェネレーターを探してみました。

Top Open-Source Static Site Generators - StaticGen
https://www.staticgen.com/

Ruby 製の Jekyll、Octopress、Middleman あたりは有名ですね

Ruby に馴染みがないので JavaScript 製で候補を絞って以下を全部ざっくり触ってみました。
node 製のやつは npm install でささっと構築できるから便利。

最初は Roots が Jade , CoffeeScript , Stylus という素敵な布陣だったので試しに使用してました。

が、ある日

っていうことに気が付きまして、アップデートしたんです。
そしたらなんか違うものになってまして、、なんとなく Hexo に乗り換えました。

Hexo にして気づいたこと

Jade , Stylus 使えないとなーと思っていたのですが、
プラグインで Jade , Stylus が使用できることがわかりました。

Jade 使えるようにする
https://github.com/hexojs/hexo-renderer-jade

Stylus 使えるようにする
https://github.com/hexojs/hexo-renderer-stylus

他にも、

Sitemap 作ってくれる
https://github.com/hexojs/hexo-generator-sitemap

吐き出した静的ファイルを S3 にデプロイ
https://www.npmjs.com/package/hexo-deployer-s3
※公式のプラグインページには公開されてなかった。

BrowserSync 使えるようにする
https://github.com/hexojs/hexo-browsersync

ジェネレーターを選ぶ基準にプラグインの充実度は大事ですね

プラグインの使用方法

使用方法は git clone もしくは npm install でプラグイン入手。
あとは各プラグインの指示通り Hexo 本体の _config.yml に設定値を記述するだけです。

他にも

WordPress でいうテーマについても大体のジェネレーターは配布されています。

Themes | Hexo
http://hexo.io/themes/

ただテーマによってはライセンスがいまいちわからないものもチラホラ。

なんにしろテーマの中身はみれるので、Jade と Stylus を使用しているテーマを探して、
配布されてるテーマを参考に自分のテーマを作成していこうと思います。

自作テーマの作成はこれからですが、
WordPress でいうパーマリンク取れるやつとかは Hexo 側で変数が用意されてるっぽいです。

http://hexo.io/docs/configuration.html

まだまだ勉強不足。

ローカルで Hexo 環境つくって S3 にデプロイ

このサイトの場合は

1
$ hexo new 記事のタイトル

でブログ記事用の Markdown ファイル作成。

※記事のタイトルはデフォルトの設定だと記事のURLになります。
「記事のタイトル.md 」ファイルができる感じ。

記事が書けたら、

1
$ hexo generate

して静的ファイル作成。

1
$ gulp aws

これで静的ファイルのみを S3 にデプロイしてます。

その際、 S3 にデプロイできるプラグイン hexo-deployer-s3 がなんか動かなかったので、
馴染みの Gulp でプラグイン gulp-awspublish を使用しました。(あと del とか使いたかった)

gulp-awspublish
https://www.npmjs.com/package/gulp-awspublish

Gulp 以外はデフォルトのコマンドです。

これで Markdown でささっと記事書いてささっと公開できました。


まとめ

デフォルトで使用しているジェネレーターの言語が、
自分好みのプリプロセッサとか軽量プログラミング言語ではなくても
プラグイン次第で自分好みの言語で使用できたりするところが面白いです。

Node.js でタスクランナー等を常用している方であれば学習・導入コスト低いでしょうし、
たくさん種類があるのでいろいろ試せて自分にフィットしたものが見つかると思います。

あの某 CMS の簡単インストールより簡単なんじゃ。。。

次はこれやってみたい。

AWS LambdaとS3で作るブログシステム
http://qiita.com/bad_at_math/items/5b1adaa024bcc44cd46e

Hexo で Jade と Stylus を使用して自作テーマ作れたら続き書きます。


Hexo を使用する上で参考にした記事です。

ステージング用に Heroku を一回かまして GitHub ページに公開とかなんかかっこいい。
チームでやるならぜひこちらを!

チームブログをGitHubとHexoではじめよう! | Tokyo Otaku Mode Blog
http://blog.otakumode.com/2014/08/08/Blogging-with-hexoio/