");background-repeat:no-repeat;-webkit-background-size:30px 24px;-moz-background-size:30px 24px;background-size:30px 24px;background-position:center center;border:none;margin:0;padding:0;width:60px;height:60px;cursor:pointer;-ms-flex-item-align:center;-ms-grid-row-align:center;-webkit-align-self:center;align-self:center;-ms-flex-item-align:center}.tab{position:relative;color:#424242;padding:6px;margin:0 4px;text-decoration:none;text-transform:uppercase;font-weight:400;-webkit-transition:.1s ease color;-webkit-transition:.1s ease color;-moz-transition:.1s ease color;-o-transition:.1s ease color;-ms-transition:.1s ease color;transition:.1s ease color}amp-sidebar{width:200px}amp-sidebar ul{padding:10px 0}amp-sidebar li a{display:block;padding:10px 20px}.title-cover{background-color:#4f7086;color:#fff;padding:30px 15px 20px 15px;text-align:center}.title-cover a{color:#fff}.title-cover a:hover{color:#fff}.meta-content{background-color:#e9e9e9;padding:20px 0}.meta-wrapper{margin:20px 20px;padding:20px 20px;background-color:#fff}#footer .copyright-tool,#footer .homeLink{margin:20px}.copyright-tool{color:#fff;font-size:.5em}.social-share{margin:10px 0 0 0;display:-webkit-box;display:-moz-box;display:-webkit-flex;display:-ms-flexbox;display:box;display:flex;-webkit-box-pack:center;-moz-box-pack:center;-o-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center}.social-share amp-social-share{margin:5px}#totop{position:fixed;bottom:20px;right:20px;font-size:1.2em;z-index:995;line-height:1.8em}#totop a{background:rgba(152,209,245,.6);text-decoration:none;color:#fff;padding:0;text-align:center;display:block;width:1.2em;height:2.2em;line-height:2em;letter-spacing:0;position:relative;display:inline-block;padding:0 0 0 16px;vertical-align:middle;text-decoration:none;font-size:15px}#totop a:after,#totop a:before{position:absolute;top:0;bottom:0;left:0;margin:auto;content:"";vertical-align:middle}#totop a:before{left:12px;width:8px;height:8px;border-top:2px solid #fff;border-right:2px solid #fff;-webkit-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}#totop a:hover{text-decoration:none;background:#4f7086;color:#fff;line-height:2.3em}.site-author-desc{font-size:1.2em;line-height:2em;margin-top:1em}.site-author-info{background-color:#fff;margin:20px}.gravatar-area{-webkit-border-radius:50%;border-radius:50%}.article-categories,.article-categories-list,.article-tag,.article-tag-list{padding:0;margin:0}.article-categories{margin-bottom:1.6em}.article-categories-list li,.article-tag-list li{list-style:none;display:inline-block;padding:0;margin:.2em 0}.article-categories-list li a,.article-tag-list li a{padding:.5em .6em;margin:.4em 0;background-color:#f5f2f0;color:#3a484b}.article-categories-list li a:before,.article-tag-list li a:before{content:"#"}.article-categories-list li a:hover,.article-tag-list li a:hover{color:#fff;background-color:#648aa4}.homeLink,.htmlPageLink{font-weight:700;-moz-transition:.7s;-ms-transition:.7s;-o-transition:.7s;-webkit-transition:.7s;-webkit-transition:.7s;-moz-transition:.7s;-o-transition:.7s;-ms-transition:.7s;transition:.7s;padding:.4em 0}.homeLink a,.htmlPageLink a{color:#fff;display:block;padding:1em;text-align:center}.homeLink:hover,.htmlPageLink:hover{-moz-transition:.3s;-ms-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;-ms-transition:.3s;transition:.3s}.homeLink{font-size:120%;background:#7496ad}.homeLink:hover{background:#94afc0}.htmlPageLink{font-size:110%;background:#7496ad}.htmlPageLink:hover{background:#94afc0}.ad-footer,.googleAdPost,amp-instagram,amp-twitter,amp-video,amp-vimeo,amp-youtube{margin:2.8em 0}.sns-link{margin:1em 0}.sns-link a{font-size:2.6em;padding:.4em .1em;margin:0 .1em;color:#d0d0d0}.sns-link a:hover{color:#4f7086}.applink-wrapper .applink-col{width:100%}.applink-wrapper .applink-col a{display:block;width:60%;margin:0 auto}.applink-wrapper,.babylink-box{border:1px solid #f8981d;position:relative}.applink-wrapper .applink,.applink-wrapper .babylink-wrapper,.babylink-box .applink,.babylink-box .babylink-wrapper{margin:1em 1em 1em 1em}.applink-wrapper .app-image,.applink-wrapper .babylink-image,.babylink-box .app-image,.babylink-box .babylink-image{margin:0 5% 0 0;display:inline-block;vertical-align:middle;width:40%}.applink-wrapper .app-title,.applink-wrapper .babylink-info,.babylink-box .app-title,.babylink-box .babylink-info{margin:0;display:inline-block;vertical-align:middle;width:55%}.applink-wrapper .app-info,.applink-wrapper .babylink-description,.babylink-box .app-info,.babylink-box .babylink-description{margin:1em 1.2em .5em 1.2em}.applink-wrapper .babylink-description,.babylink-box .babylink-description{line-height:1.8em}.applink-wrapper .babylink-manufacturer,.babylink-box .babylink-manufacturer{margin:.8em 0;line-height:1.8em}.applink-wrapper .babylink-title,.babylink-box .babylink-title{font-size:1em;margin:.8em 0;line-height:1.8em}.applink-wrapper .babylink-title a,.babylink-box .babylink-title a{display:block;padding:1em 0}.applink-wrapper .aicon,.babylink-box .aicon{position:absolute;display:none}.applink-wrapper .babylink-amazonBtn,.babylink-box .babylink-amazonBtn{margin:1.4em 0 1em 0;height:4em}.applink-wrapper .babylink-amazonBtn a.amb,.babylink-box .babylink-amazonBtn a.amb{-webkit-transition:.1s;-moz-transition:.1s;-o-transition:.1s;-webkit-transition:.1s;-moz-transition:.1s;-o-transition:.1s;-ms-transition:.1s;transition:.1s;font-size:1em;height:3.5em;line-height:3.5em;text-align:center;color:#fff;width:85%;margin:0 auto;padding:0;display:block;background-color:#f8981d;border-top:1px solid #fff;border-bottom:4px solid #c27006;border-radius:4px}.applink-wrapper .babylink-amazonBtn a.amb:hover,.babylink-box .babylink-amazonBtn a.amb:hover{color:#fff;border-top:4px solid #fff;border-bottom:1px solid #c27006}.applink-wrapper .amazon-icon:before,.babylink-box .amazon-icon:before{content:"\f270";font-family:fontawesome;color:#fff}.entry-content p.openMap{text-align:center}.entry-content .attention{border:1px solid #ce8a8a}.entry-content .attention h5.label,.entry-content .attention h6.label{color:#ce8a8a}.entry-content .r-download{border:1px solid #88a3c1}.entry-content .r-download h5.label,.entry-content .r-download h6.label{color:#88a3c1}.entry-content .r-memo{border:1px solid #88b9c1}.entry-content .r-memo h5.label,.entry-content .r-memo h6.label{color:#88b9c1}.entry-content .attention,.entry-content .babylink-box,.entry-content .r-download,.entry-content .r-memo{margin:2.2em 0;padding:0;border-radius:2px}.entry-content .attention h5.label,.entry-content .attention h6.label,.entry-content .babylink-box h5.label,.entry-content .babylink-box h6.label,.entry-content .r-download h5.label,.entry-content .r-download h6.label,.entry-content .r-memo h5.label,.entry-content .r-memo h6.label{background:0 0;background-color:none;border:none;border-bottom:none;border-left:none;border-right:none;border-top:none;margin:1.2em 1.5em;padding:0}.entry-content .attention h6.label,.entry-content .r-download h6.label,.entry-content .r-memo h6.label{font-size:1em}.entry-content .attention p.label,.entry-content .r-download p.label,.entry-content .r-memo p.label{font-size:.85em;margin:1.5em;padding:0}.entry-content .attention .amp-img-wrapper,.entry-content .attention table,.entry-content .r-download .amp-img-wrapper,.entry-content .r-download table,.entry-content .r-memo .amp-img-wrapper,.entry-content .r-memo table{margin:1.8em 1.8em 0 1.8em}.entry-content .attention dl,.entry-content .attention ol,.entry-content .attention ul{margin:1em 1em 1em 2em}.entry-content .r-download dl,.entry-content .r-download ol,.entry-content .r-download ul{margin:1em 1em 1em 2em}.entry-content .r-memo dl,.entry-content .r-memo ol,.entry-content .r-memo ul{margin:1em 1em 1em 2em}.entry-content .attention h5.label:before,.entry-content .attention h6.label:before{content:"\f071"}.entry-content .r-download h5.label:before,.entry-content .r-download h6.label:before{content:"\f019"}.entry-content .r-memo h5.label:before,.entry-content .r-memo h6.label:before{content:"\f0f6"}.entry-content .attention h5.label,.entry-content .attention h6.label,.entry-content .r-download h5.label,.entry-content .r-download h6.label,.entry-content .r-memo h5.label,.entry-content .r-memo h6.label{margin:1.8em 1.8em 0}.entry-content .attention h5.label:before,.entry-content .attention h6.label:before,.entry-content .r-download h5.label:before,.entry-content .r-download h6.label:before,.entry-content .r-memo h5.label:before,.entry-content .r-memo h6.label:before{margin:0 .5em 0 0;font-family:fontawesome}.entry-content .attention ol li,.entry-content .attention ul li{font-size:.85em}.entry-content .r-download ol li,.entry-content .r-download ul li{font-size:.85em}.entry-content .r-memo ol li,.entry-content .r-memo ul li{font-size:.85em}.entry-content .attention ul li:after,.entry-content .r-download ul li:after,.entry-content .r-memo ul li:after{top:.85em}.entry-content .attention p.label,.entry-content .r-download p.label,.entry-content .r-memo p.label{font-size:.85em;margin:1.8em}.amSimple{margin:1.8em 0;padding:1em 1.8em;position:relative;background-color:#f6f6f4}.amSimple p{margin:1em 0}amp-img,img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none}.imgCaption{text-align:center}.imgCaption span{font-size:.5em;color:#b6b6b6}.bcg{width:90%;margin:2.8em auto}.bcg-x-and-cell{width:100%;margin:0;position:relative;height:100%}.bcg-x-label{width:94%;margin:5px 0 0 6%;text-align:center}.bcg-y-label{-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;text-orientation:sideways-right;width:6%;display:inline-block}.bcg-y-label-inner{position:absolute;top:50%;left:1%;display:inline-block;-webkit-transform:translate(-50%,-50%) rotate(180deg);-moz-transform:translate(-50%,-50%) rotate(180deg);-o-transform:translate(-50%,-50%) rotate(180deg);-ms-transform:translate(-50%,-50%) rotate(180deg);transform:translate(-50%,-50%) rotate(180deg);text-align:center;height:100%}.label-circle{display:inline-block;padding:.2em;border-radius:50%;width:1.6em;height:1.6em;line-height:1.6em;font-size:.8em}.label-week{background-color:#758f94;color:#fff}.label-strong{background-color:#3c4b4e;color:#fff}.label-desc{margin:.8em;display:inline-block}.bcg-table-wrapper{margin:0;padding:0;width:94%;display:inline-block}.bcg-table{border-collapse:collapse}.bcg-table .bcg-td{width:50%;text-align:center;height:100px;border:1px solid #fff;margin:0;padding:0;font-size:1.2em}.bcg-table .def{background-color:#758f94;color:#fff}.bcg-table .em{background-color:#55696e;color:#fff}.bcg-table .strong{background-color:#3c4b4e;color:#fff}@media (min-width:800px){.article-nav,.entry-content,.entry-header,.entry-title{width:780px;margin:0 auto}.nav-container{width:800px;margin:0 auto}.meta-wrapper{width:760px;margin:20px auto}.site-author-info{width:760px;margin:20px auto}#footer .copyright-tool,#footer .homeLink{width:760px;margin:20px auto}}#hexo-amp-id-1{line-height:1.8em;padding:0}
Hexoでブログを開設したい方に捧げる連載記事「Hexoの使い方とブログの初め方」です。Hexoはnode.js製のブログフレームワークです。連載記事の概要や目次はこちらをご覧ください。
前回はHexoを使うために事前に何が必要なのかを解説しました。
続いて、今回の第4回目では、Mac OSXでhexo blogを始める前に必要なnode.jsの環境をインストールする方法について解説していきます。当記事はMac OSXユーザーに向けた内容となりますが、Windowsをお使いの方は別の記事をご覧ください。
ちなみに、当ブログでは現在、このような表示がされます。
自身のブログ
【一覧】markdownの記法まとめ・hexoで記事を書く方法
目次
何をインストールするの?
前回でも説明しましたが、まず当記事では以下の3つをインストールする流れを説明していきます。
ツール | 役割 |
node.js | javascriptと呼ばれるプログラムを実行する環境 |
nvm(windowsではnvmw) | node.jsのバージョンを好きなものに切り替えるツール。例えるなら複数のnode.jsを入れたり、引き出せる入れ物といったイメージ。 |
npm | node.jsで動くプログラム(例えるならアプリ)を管理するツール。Hexoはこのプログラムの一つに該当する。 |
インストールする順番は、
- nvm
- node.js
- 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をインストールしてみましょう。ターミナルを立ち上げて以下を入力します。
bash1
| $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash
|
nvmのアップデート方法
nvm自体を最新の状態にするには、以下のコマンドのようにgitから行うことができます。
$ nvm --version
現在のnvmのバージョンを確認します。
$ cd ~/.nvm
nvmのパスに移動します。環境によってはインストールパス~/.nvm
が違う事があります。
$ git pull origin master
gitを使って、最新のバージョンをマージします。
$ source ~/.nvm/nvm.sh
nvmを起動し直します。下記で解説するnvmの環境パスが設定されている場合には、コマンドを立ち上げ直してもnvmが起動してくれます。
$ nvm --version
アップデートしたnvmのバージョンを確認します。最新になっていれば、更新は以上で完了です。
nvmの環境パスを通す
続いて、ターミナルを立ち上げた直後にいつでもnvmが使える状態に設定します。Finder > 移動 > フォルダーへ移動
で~/.bash_profile
と入力しましょう。
~/.bash_profile
というファイルが見つかりますので、これをテキストエディターで次のように編集します。
.bash_profile1
| # 以下を追記します。こちらはターミナル起動時にnvmが使えるようになる設定です。
# source ~/.nvm/nvm.sh
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
|
編集したら保存します。保存が完了したらターミナルを再起動します。再起動したら、次回からはターミナル起動直後にnvmも起動するようになります。
nvmが使えるか、試しに次のようなnvmコマンドを入力してみましょう。
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
コマンドを使います。
今度はv4.3.0
を入れてみたいと思います。
これで複数のnode.jsをインストールすることができました。実際に2種類のnode.jsがインストールされているか確認してみましょう。nvmでインストールしたnode.jsを確認するにはnvm ls
コマンドを使います。
先ほど、インストールしたv6.10.0
とv4.3.0
がリストに表示されればOKです。インストールしたnode.jsをアンインストール(削除)したい時にはnvm uninstall
コマンドを使います。
以上のように、nvmでは複数のnode.jsをインストールや削除したり、またどれを使用するのか決める事ができるプログラムとなっています。
好きなバージョンのnode.jsを使う
前述しましたが、nvmは任意のバージョンのnode.jsを自由に切り替えて使うことができます。試しに、nvmでv6.10.0
を使う設定に切り替えてみましょう。切り替えるにはnvm use
コマンドを使います。
bash1 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_profile1
| # nvm use をターミナル起動時に実行する
nvm use "v6.10.0"
|
これで、ターミナル起動直後からnode.jsのv6.10.0
が使用できる状態になりました。
npmは既にインストールされている
nvmにより、node.jsがインストールされると、npmも一緒にインストールされています。つまり、npmに関しては特に行う作業がありませんが、念のため最新バージョンにアップデートしておきましょう。
アップデートするには、上記のようにnpm update
コマンドを使います。
最後に。node.jsの環境が整いました
今回はHexoブログに必要な環境である、node.jsとnpmとnvmのインストール手順を解説していきました。
BESSA R2 | 000027 photo by tea © 最初の手順となるnvmのインストールや、ターミナルの設定を変更する作業は少し分かりづらい部分もありましたが、一度設定しておくとその後はスムーズにnode.jsを扱う事ができます。
ぜひ、当記事を参考にして開発環境を準備してみてください。次回は需要があれば、hexoブログの書き方や運用方法、そしてプラグインの開発手順を解説していきたいと思います。