このブログはHexoとGithubPagesを使って運営しています。

ということで、Node.jsのインストールからHexoのインストールまでを紹介します。

  1. nvmのインストール
  2. node.jsのインストール
  3. hexoのインストール
  4. ブログを書くためのhexoのコマンドを簡単に紹介

という流れで書きます。

実行環境としてはMac, Linuxを想定しています。

1. nvmのインストール

ScreenShot05

creationix/nvm

インストールはGitHubのREADME.mdに書かれています。

以下のコマンドを実行してください。

1
$ git clone https://github.com/creationix/nvm.git ~/.nvm

そしてインストールのスクリプトを読み込みます。

1
$ source ~/.nvm/nvm.sh

ログ等は出ません。

いちいちnvmを使うたびに$ source ~/.nvm/nvm.shを実行するのもめんどくさいので、~/.bash_profileに以下のスクリプトを追加します。

bashじゃなくて違うの使ってるよって人はログイン時に読み込まれるファイルにコピペしてください。

.bash_profile
1
2
3
if [[ -s ~/.nvm/nvm.sh ]];
then source ~/.nvm/nvm.sh
fi

インストールされているか確認。

1
2
$ nvm --version
0.15.0

versionの値は時期によってあがっていると思います。

2. Node.jsのインストール

ScreenShot04

node.js

続いてNode.jsをインストールします。

以下のコマンドを叩いてください。

1
2
3
4
5
6
7
8
9
10
$ nvm ls-remote
~ 省略 ~
v0.10.30
v0.10.31
v0.11.0
~ 省略 ~
v0.11.10
v0.11.11
v0.11.12
v0.11.13

Node.jsの全バージョンが表示されると思います。

今回は0.10.31をインストールします。

Node.jsのバージョンはマイナーバージョンが偶数の場合が安定版、奇数の場合が開発版という約束があります。

今回は特に使えれば問題ないので0.10.31をインストールしたいと思います。

ということでインストールします。

1
$ nvm install 0.10.31

ログがちょろっと出て、インストールが完了します。

バージョン確認

1
2
$ node -v
v0.10.31

と出力されればインストール完了です。

デフォルトで0.10.31を使うので、その設定をします。

1
2
$ nvm alias default v0.10.31
default -> v0.10.31

これでNode.jsのバージョンのデフォルトがv0.10.31に設定されました。

3. Hexoのインストール

ScreenShot06

Hexo

A fast, simple & powerful blog framework,
powered by Node.js.

とファーストビューに書かれている通り、Hexoはシンプルでバワフルなブログフレームワークです。

インストールしていきます。

1
$ npm install hexo -g

npmってコマンド出てきたけど、気にしないでください。

これはNode Package Managerの略です。

また違うところで記事にします。

インストールできているか確認します。

1
2
3
4
5
6
7
8
9
10
11
$ hexo -v
hexo: 2.8.2
os: Darwin 13.3.0 darwin x64
http_parser: 1.0
node: 0.10.31
v8: 3.14.5.9
ares: 1.9.0-DEV
uv: 0.10.28
zlib: 1.2.3
modules: 11
openssl: 1.0.1i

こんな感じに出力されればインストール完了です。

4. ブログを書くためのhexoのコマンドを簡単に紹介

最速でブログを公開するコマンドの紹介です。

新しいブログを作成する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$ hexo init new-blog-name
[info] Copying data
[info] You are almost done! Don't forget to run `npm install` before you start blogging with Hexo!
$ cd new-blog-name
$ npm install
hexo-renderer-ejs@0.1.0 node_modules/hexo-renderer-ejs
├── ejs@1.0.0
└── lodash@2.4.1
hexo-renderer-marked@0.1.0 node_modules/hexo-renderer-marked
├── marked@0.3.2
└── lodash@2.4.1
hexo-renderer-stylus@0.1.0 node_modules/hexo-renderer-stylus
├── nib@1.0.3 (stylus@0.37.0)
└── stylus@0.44.0 (css-parse@1.7.0, mkdirp@0.3.5, sax@0.5.8, debug@2.0.0, glob@3.2.11)

新しい記事を作成する

1
2
$ hexo new new-post-title
[info] File created at /Users/${ユーザー名}/new-blog-name/source/_posts/new-post-title.md

ローカルサーバーで確認

1
2
$ hexo s
[info] Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

デプロイ

デプロイがちょっと厄介でして…

まずはデプロイの設定をします。

デプロイ先の設定

_config.ymlを開いて以下の所を修正

_config.yml
1
2
3
4
5
6
# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
type: github
repo: git@github.com:${ユーザー名}/${ユーザー名}.github.io.git
branch: master

今回はGithub Pagesを使用するので、上記のような設定にしました。

  • type

    デプロイのタイプです。他にheroku, Rsync, OpenShift DIY Cartridge, Git, Batch Deployなどがあります。

    詳しくはDeployment | Hexoをご覧ください。

  • repo

    デプロイ先のrepositoryのURLです。ここは適時置き換えてください。

  • branch

    デプロイするブランチです。

    Github Pagesの場合はmaster or gh-pagesになるかと思います。

デプロイする

以下のコマンドでデプロイします。

1
$ heox deploy -g

これで、ページの作成からデプロイまで一括でやってくれます。

成功すれば記事が公開されます。

終わりに

とってもシンプルで、使いやすいと思います。

記事はMarkdownで書くので、Markdownを使っている人は使いやすいと思います。

以上です。

参考

creationix/nvm
node.js
Hexo
所要時間3分!? Github PagesとHEXOで爆速ブログ構築してみよう! | 株式会社LIG

「Tech」のおすすめ記事