この記事を書いてる人: 
tea

Hexoでブログを開設したい方に捧げる連載記事「Hexoの使い方とブログの初め方」です。Hexoはnode.js製のブログフレームワークです。連載記事の概要や目次はこちらをご覧ください。

前回はHexoを使うために事前に何が必要なのかを解説しました。

続いて、今回の第4回目では、Mac OSXでhexo blogを始める前に必要なnode.jsの環境をインストールする方法について解説していきます。当記事はMac OSXユーザーに向けた内容となりますが、Windowsをお使いの方は別の記事をご覧ください。

ちなみに、当ブログでは現在、このような表示がされます。

自身のブログ
【一覧】markdownの記法まとめ・hexoで記事を書く方法

Ads

目次

何をインストールするの?

前回でも説明しましたが、まず当記事では以下の3つをインストールする流れを説明していきます。

ツール 役割
node.js javascriptと呼ばれるプログラムを実行する環境
nvm(windowsではnvmw) node.jsのバージョンを好きなものに切り替えるツール。例えるなら複数のnode.jsを入れたり、引き出せる入れ物といったイメージ。
npm node.jsで動くプログラム(例えるならアプリ)を管理するツール。Hexoはこのプログラムの一つに該当する。

インストールする順番は、

  1. nvm
  2. node.js
  3. npm

という流れになります。node.jsの入れ物であるnvmをまずインストールし、nvmにnode.jsを入れていきます。そして最後に入れたnode.jsバージョンに対応するnpmをインストールしていきます。

それではまず最初にnvmをインストールする手順から見て行きましょう。

nvmのインストール

nvmはMac OSXで使えるnode.jsのバージョンマネージャーです。nvmは下記のURLの説明に従ってインストールしていきます。

github
creationix/nvm

上記のinstall scriptにも書かれていますが、curl(カール)またはwget(ダブルゲット)という、指定URL先のファイルをダウンロードしてくれるコマンドを使って、nvmをインストールしてきます。

それでは実際に、curlを使ってnvmをインストールしてみましょう。ターミナルを立ち上げて以下を入力します。

bash
1
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
 nvmのアップデート方法

nvm自体を最新の状態にするには、以下のコマンドのようにgitから行うことができます。

  1. $ nvm --version

    現在のnvmのバージョンを確認します。

  2. $ cd ~/.nvm

    nvmのパスに移動します。環境によってはインストールパス~/.nvmが違う事があります。

  3. $ git pull origin master

    gitを使って、最新のバージョンをマージします。

  4. $ source ~/.nvm/nvm.sh

    nvmを起動し直します。下記で解説するnvmの環境パスが設定されている場合には、コマンドを立ち上げ直してもnvmが起動してくれます。

  5. $ nvm --version

    アップデートしたnvmのバージョンを確認します。最新になっていれば、更新は以上で完了です。

nvmの環境パスを通す

続いて、ターミナルを立ち上げた直後にいつでもnvmが使える状態に設定します。Finder > 移動 > フォルダーへ移動~/.bash_profileと入力しましょう。

~/.bash_profileというファイルが見つかりますので、これをテキストエディターで次のように編集します。

.bash_profile
1
2
3
4
# 以下を追記します。こちらはターミナル起動時にnvmが使えるようになる設定です。
# source ~/.nvm/nvm.sh
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"

編集したら保存します。保存が完了したらターミナルを再起動します。再起動したら、次回からはターミナル起動直後にnvmも起動するようになります。

nvmが使えるか、試しに次のようなnvmコマンドを入力してみましょう。

bash
1
2
$ nvm version
v4.3.0

nvm versionコマンドはインストールされているnvmのバージョンを表示させるコマンドです。バージョンナンバーが表示されればnvmのインストールは完了です。

nvmでnode.jsのインストール

続いて、nvmの中にnode.jsをインストールしてみましょう。インストールするnode.jsのバージョンは、執筆時の最新バージョンであるv6.10.0にしてみたいと思います。

node.js
node.js ダウンロード

 インストールできるnode.jsのバージョンを一覧確認

nvmでインストールできるnode.jsのバージョンは、nvm ls-remoteコマンドで一覧表示させることもできます。

node.jsをインストールするにはnvm installコマンドを使います。

bash
1
$ nvm install v6.10.0

今度はv4.3.0を入れてみたいと思います。

bash
1
$ nvm install v4.3.0

これで複数のnode.jsをインストールすることができました。実際に2種類のnode.jsがインストールされているか確認してみましょう。nvmでインストールしたnode.jsを確認するにはnvm lsコマンドを使います。

bash
1
2
3
$ nvm ls
v6.10.0
v4.3.0

先ほど、インストールしたv6.10.0v4.3.0がリストに表示されればOKです。インストールしたnode.jsをアンインストール(削除)したい時にはnvm uninstallコマンドを使います。

bash
1
$ nvm uninstall v4.3.0

以上のように、nvmでは複数のnode.jsをインストールや削除したり、またどれを使用するのか決める事ができるプログラムとなっています。

好きなバージョンのnode.jsを使う

前述しましたが、nvmは任意のバージョンのnode.jsを自由に切り替えて使うことができます。試しに、nvmでv6.10.0を使う設定に切り替えてみましょう。切り替えるにはnvm useコマンドを使います。

bash
1
2
$ nvm use v6.10.0
Now using node v6.10.0

これで最新のnode.jsを使う設定になりました。

ターミナル起動時に指定バージョンのnode.jsを使う

nvmの注意点としては、ターミナルを終了してしまうと、それまでの操作が初期化されてしまいます。そこで、ターミナルを立ち上げた直後にnvm useが自動で実行される状態になるように、設定を作っておきましょう。Finder > 移動 > フォルダーへ移動~/.bash_profileと入力します。

~/.bash_profileというファイルが見つかりますので、これをテキストエディターで次のように編集します。

.bash_profile
1
2
# nvm use をターミナル起動時に実行する
nvm use "v6.10.0"

これで、ターミナル起動直後からnode.jsのv6.10.0が使用できる状態になりました。

npmは既にインストールされている

nvmにより、node.jsがインストールされると、npmも一緒にインストールされています。つまり、npmに関しては特に行う作業がありませんが、念のため最新バージョンにアップデートしておきましょう。

bash
1
$ npm update -g npm

アップデートするには、上記のようにnpm updateコマンドを使います。

最後に。node.jsの環境が整いました

今回はHexoブログに必要な環境である、node.jsとnpmとnvmのインストール手順を解説していきました。

BESSA R2 | 000027
 BESSA R2 | 000027  photo by tea ©

最初の手順となるnvmのインストールや、ターミナルの設定を変更する作業は少し分かりづらい部分もありましたが、一度設定しておくとその後はスムーズにnode.jsを扱う事ができます。

ぜひ、当記事を参考にして開発環境を準備してみてください。次回は需要があれば、hexoブログの書き方や運用方法、そしてプラグインの開発手順を解説していきたいと思います。

Ads
 記事を書いてる人
gravatar
tea (てぃー)

ゆるふわポートレートや自然風景を撮影しています。その他の趣味は音楽制作/メダカの鑑賞/web。撮影や写真掲載・寄稿等のご依頼もお待ちしてます。お問い合わせは以下のフォームまたはSNSよりお願い致します。

 お問い合わせ

 撮影のご依頼

 ポートフォリオ

 各作例のご紹介

 シェアする
 記事名とURLをコピーする

node.jsとnpmとnvmをインストールしよう。node.jsの環境を用意する(Mac OSX編) - TPB
https://photo-tea.com/p/17/hexo-start-kit-tools-4/

 おすすめ記事
Ads
 作例掲載