サブブログ再構築記 – Hexoをはじめてみる & トップページをつくってみる

現在アイドルマスター関連のことはサブブログに書いているが、Ghostで構築したサブブログに不満が出てきたので再構築しようとしている。

移行の動機

主に以下のようなもの。

  • RAMが1GBのVPS上にシステムが2つ走っており、リソースが無駄になっている
  • Ghostは開発途上のシステムであり更新が頻繁だが、更新作業がリスキーで面倒
  • 現在はSQLiteデータベースを使う設定になっているがGhost 1.0ではMySQLがデフォルトになり、データベースの移行が必要である

移行先

Amazon S3、CloudFlare、Hexoを組み合わせたものにする。以前このブログは似たような構成(Hexoの代わりにJekyllを使っていた)で運用されていたが、Hexoをちょっと触ってみたらすぐに気に入ってしまったので使いたくなった。

Hexoのセットアップ

HexoはNode.js上で動くWebサイトジェネレーター。HTMLを手元で生成してサーバーにアップロードするという形でブログを書くことができる。

HexoはNode.jsで動いているから、Node.jsをパソコンにセットアップする必要がある。Node.jsのインストール方法はそこら中に転がっているから割愛するが、macOSやLinuxであればnvmを使うのがよさそうで、Windowsはよくわからない。

npmが使えるようになったら、HexoをまずパソコンのNode.js環境自体にインストールする。

$ npm install -g hexo-cli

次にHexoの準備をする。このようなコマンドを叩くと、カレントディレクトリの下にbrightblue.cfというディレクトリを作り、その下にHexoに必要なファイルを自動的に配置してくれる。

$ hexo init brightblue.cf
$ cd brightblue.cf
$ npm install

設定を行う。公式ドキュメントを参考に_config.ymlを編集する。

$ cot ./_config.yml

設定できたらとりあえず一度ブログを生成してみて、Hexoをサーバーモードで動かし動作確認をしてみる。

$ hexo generate
$ hexo server

ブラウザでlocalhost:4000にアクセスして、ブログが表示されたら成功。

新しい記事は

$ hexo new <title>

でsource/_posts以下に新しい.mdファイルができるので、それを編集して書く。

後ほど説明するがs3へのデプロイの設定を行い、標準のテーマをお色直しした程度の状態のブログが brightblue.cf に上がっている。標準のテーマもカスタマイズの項目が多く、若干日本語まわりのスタイルをいじってやるだけでそのまま使えそう。

Material Design Liteでトップページを作ってみる

既製品のテーマも多数存在するが、多くは中国語向けに最適化されていたりデザインが気に入らなかったりしたので、並行してMaterial Design Liteでのテーマ作りも開始した。現在はトップページのみが完成している。

こちらは特にBootstrapに不満があったというよりは、Material Designを試してみたいという動機での採用。

  • 公式ドキュメントが若干見づらいような気がする。
  • Bootstrapとはほぼ同じようなコンポーネントが揃っているので、Webアプリ作りでも困るようなことはそうそう無さそう。