Hexoでブログサイトのセットアップをする

Node.js, npmのアップデート

homebrewでnodeをインストールしている環境でのアップデート方法です。
久しぶりなので、homebrewでインストールしているモジュール全てをアップデートしておきました。

1
% brew upgrade

Node.jsのアップデートが完了したら、npmもアップデートします。

1
% npm update -g npm

Hexoのインストール

公式サイトの手順にしたがって、インストールします。

1
2
3
4
5
% npm install hexo-cli -g
% hexo init uryolog
% cd uryolog
% npm install
% hexo server

これでとりあえず起動します。簡単ですね!
http://localhost:4000

IMAGE

デフォルトテーマでもまぁまぁシンプルでかっこいい気がしますが、扱いやすそうさシンプルなテーマを探します。

テーマのインストール

さーっと見てるだけでも、Jekyllよりいい感じのテーマは多いですね。
とりあえず気に入ったのはこれです。
Hipaper

あとはこれなんかもカスタマイズしやすそうで、気に入りました。
Light

これもいいかも
Maupassant

これも。
Bubuzou

いろいろ悩みましたが、ある程度直近で更新されてて、Githubスターも多いIcarusを使用することにしました。

Icarus テーマのインストール

作成したルートディレクトリ上で下記コマンドを実行します。
テーマの導入方法もJekyllよりわかりやすく簡単な気がします。

1
% git clone https://github.com/ppoffice/hexo-theme-icarus.git themes/icarus

テーマの切り替え、サイト設定

_config.ymlファイルを修正して、テーマを切り替えますが、ついでにサイト全体の設定もしておきます。

1
theme: icarus

その他のサイト設定は下記リンクを参照に適宜設定してください。

これでテーマの適用ができました。
IMAGE

テーマの設定

テーマ独自の設定もやっておきます。
修正するのはthemes/light/_config.ymlですが、_config.yml.exampleとなっているのでリネームします。

各設定は以下を参照してください。

1
2
3
4
5
6
# Menus
menu:
Home: .
開発: categories/develop
車: categories/car
About: about

Insight Searchの有効

上記設定で出てきますが、Insight Searchを有効にするため、下記npmパッケージをインストールします。

1
% npm install -S hexo-generator-json-content

設定はデフォルトで有効になってるかと思います。

1
insight: true

以上で、Hexoのセットアップは完了です。

共有