どうも、webデザイナーのレーウィンです。
ポートフォリオサイトを作るにあたって、VuePressを使ってみたいので勉強してみることにします。
ついでに、他記事から来ていただいたwebデザイナーの方に静的サイトジェネレーターをもっと広められたらなという野望！
解説記事じゃなくて半分奮闘日記みたいなやつです。
ちなみにwindowsです。macの方はmac用コマンドを調べた方がいいです。
静的サイトジェネレーターって？
調べた限りはこんな感じです。
「CMS（ワードプレスとか）よりやること難しいけどいろんなデメリットを減らすことができるものだよ！」
バックアップが必要ない
もし本当にそうだったらこれすごいメリット。
wordpress等のCMSはDB(データベース)に記事等のデータが入っています。
そのため、DBをハッキング等された場合はコンテンツ自体が消えます。Oh…
対策をそれぞれする必要です、というか、定期的なバックアップとwordpress・テーマ・プラグインのバージョンを常に最新にすることが必要です。
ただしここで注意しなければならないのがテーマのバージョンアップ。これをするとheadタグ内や/body前に置いている、独自で入れていたタグが消えます。
例えばこのブログの場合はGoogleのタグが入っていますが、テーマを更新するとそれが消えてしまいます。
これはテーマの更新をする限りしなければならない、正直面倒。だけどほっとくのはセキュリティ的に不安。。
こうした問題を静的サイトジェネレーターで解決できるのであれば非常に便利ですね。Git＋静的サイトジェネレーターの環境はとてもよさそうです。
めっちゃ軽くなる
まあ、正直CMS重いですよね。私からしてみてもwordpressを初めとした各CMSは軽いとは思えません。もしかしたら最新のCMSは軽い処理をしているのかもしれませんが、仕組み上限界があります。
何故かというと、「動的」だからです。
ようするに、CMSはユーザーがサイトにアクセスした時に「headタグにこれとこれ！headerこれ！コンテンツはこれ！footerこれ！」という風に組み立てます。それが重さの原因となってるわけです。
ある程度知識がないと更新は難しい
CMSと比べると更新には知識が求められます。
そもそも基本的な制作・更新はターミナルという黒い画面を使って行います。CMSのように管理画面があるわけではないです。
つまり、敷居が高いです。
あくまで静的サイト
CMSとの明確な違いは動的か静的かですが、静的なサイトのデメリットとしてレスポンス系を実装しにくいということがあります。
例えばログイン画面とかですね。そういったものはCMSでプラグイン入れたりして実装するのが楽です。静的サイトジェネレーターでも実装はできるみたいですが、コストがちょっとどうなんだろう。
ここまで調べといてなんとなく思ったこと
「１人で管理するサイト・ブログは静的サイトジェネレーター向き、複数人で管理するサイトはCMS」
「PCでしか更新しないなら静的サイトジェネレーター、スマホでも更新したいならCMS」
こう考えると、メリットも大きい反面使えるサイトはある程度しぼられそうですね。あまり更新頻度の高くないサイトなら表示速度の速さってメリットを受けられるので便利かもですね～。
間違ってたらごめんなさい。
VuePressって？
静的サイトジェネレーターの１つです。
他にもHUGOとかGatsbyJSとかありますが、全部静的サイトジェネレーターになります。
何が違うのかというとベースが違っていて、例えばGatsbyJSはReact.jsというJSフレームワークをベースにしてたり、HUGOはGO言語がベースです。書いといてあれだけどGO言語ってなんぞ。調べてみた限りゲーム開発とかそっち系？サイトしか作ってない俺には無縁そうな言語・・・。
少し話逸れましたが、じゃあVuePressは何かっていうとVue.jsというJSフレームワークです。まあ、名前がVuePressだからね、そうだよね。
で、なんで多くある中からVuePressを勉強しようとしたかというと、まずVue.js自体がデザイナーにとって（他と比べると）理解しやすそうな気がしたからですね。フレンドリー。さらにVuePressはVue.jsの開発者が作ったもの。その点で信頼性が高いなーと思ったからです。
まあ、ぶっちゃけ勉強したいものを勉強すればいいのだと思いました。React勉強したいならGatsbyJSを触ればいいし、GO言語を既に学習している人にとってはHUGOは親しみやすいでしょうし。最終的には好みで選んでいいと思いました。
最初の最初の準備
Node.jsをダウンロードしてインストール
https://nodejs.org/ja/
ダウンロードしてぽちぽちしてればインストールできます（雑）
Node.jsはサーバーサイドで動くJSです。
フロントエンドでよく使われてるJSを、サーバーサイドでも使えるようにしようぜって生まれたのがNode.jsらしい。スマホゲーム・グラブルのマルチプレイとかでも使われてるらしい。Node.jsしゅごい。
まあVuePressとかの静的サイトジェネレーターはJSがベースで、それ使ってあれこれしてサーバーにアップとかするんだからNode.jsは必要なんじゃね？みたいな認識。え、違う？あははー、ぼくわかんなーい。
ちなみに
node -v
でインストールしてあるnodeのバージョンが見れます。正常にインストールしてあるか不安なら実行してみてください。
作業用フォルダを用意する
デスクトップでもいいのでフォルダを１つ用意します。
名前は「vuepress_test」にしときます。
コマンドプロンプト、起動！
コマンドプロンプトを起動します。
コマンドプロンプト上でフォルダ（以下、ディレクトリ）に移動する
とりあえずコマンドプロンプトで作ったディレクトリにジャンプしましょう。
まず作ったディレクトリのパスをコピーします。
パスのコピーは以下記事。まあ、１秒でできる作業です。
https://dekiru.net/article/13408/
で、コマンドプロンプトに戻ります。
コマンドプロンプトで以下を実行
cd C:\Users\(略)\Desktop\vuepress_test
cdはチェンジディレクトリの略です。C:の部分はコピーしたパスを貼り付けてください。右クリックでペーストできます。
上のコマンドを書いたらENTERキーを。したら左に書いてあったパスが実行したパスになります。
package.jsonを作る
コマンドプロンプトで以下を実行します。
npm init
英語でいろいろ聞かれるけど、全部ENTER連打で。再びパスが表示されてる状態になれば全部終了してます。
全ての設定が終わると、作ったvuepress_testディレクトリの中にいつの間にかpackage.jsonが！
この「npm init」はプロジェクトを開始する時のおまじないみたいなものです。深く考えると進まないので、とりあえずおまじないとして覚えておくことにします。
vuepressを導入していくー！
コマンドプロンプトで以下を実行します。
npm install --save-dev vuepress
なんかわちゃわちゃ処理がされますがコーヒーでも飲んで見守ります。
終わるとpackage-lock.jsonと、node_modulesが追加されてます。これも、とくに気にしなくていいです。
ちなみに、公式では
npm install -g vuepress
と書かれてますが、これはグローバルインストールというもので、なんかあまりよくなさそうです。気になる人は適当にぐぐってください。この記事では–sace-dev、ローカルインストールで環境を作っていくことにします。
docsディレクトリを作る
vuepress_testの中にdocsディレクトリを作ります。せっかくなのでコマンドプロンプトから作ってみます。
mkdir docs
mkdirはmake directoryの略です。そのまんまですね。
docsの中にREADME.mdを作る
作ったdocsディレクトリの中にREADME.mdを作ります。
echo '# Hello VuePress' > docs/README.md
このREADMEですが、「読んでおいてね～」みたいなREADMEではなく、プロジェクトの１つの重要な基準になります。なのでスルーせずに作りましょう。
中には’# Hello VuePress’ とだけ書いてあります。
package.jsonを書き換える
現状のpackage.jsonはこんな感じになってると思います。
{
"name": "vuepress_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"vuepress": "^0.14.4"
}
}
ここのscriptsの部分を書き換えてこんな感じにします。
{
"name": "vuepress_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"author": "",
"license": "ISC",
"devDependencies": {
"vuepress": "^0.14.4"
}
}
今の状態を見てみよう
ここまで何やってるのか意味わからんだったのですが、ここでようやく確認ができるようになります。
以下のコマンドを実行してみましょう
npm run docs:dev
正常にできていれば何やらわちゃわちゃ処理されてローディングみたいなバーが表示されてDONEが表示されます。
そして、最後にURLが書かれていると思います。
http://localhost:8080/
ってかまあ、localhostですけどね。このURLをブラウザでたたいてみてください。
うまくいっていれば右上に検索ボックス、真ん中に「’# Hello VuePress’」と書かれたページが表示されます。
404ページが表示される場合はscriptsが何かしら間違ってる可能性が高いです（経験談）
この記事の最後：README.mdを書き換えてみる
コマンドプロンプトはそのままでREADMEの中にある
‘# Hello VuePress’
を適当に書き換えてみましょう。
いえーい
するとブラウザを更新していないのにlocalhostで表示されてる文字が「いえーい」に変わってます！これがVueの力だ・・・！
というわけで今回はここまで～！では！