【VuePress】ゆる〜くインストールからHello VuePressを表示するまでをまとめてみた
個人でブログ書きたいなぁとか、技術メモをサイトとして公開したいなぁって方必見。
静的サイトジェネレーターのVuePressを使って爆速なサイトを作っていきましょう。
今回は初歩の初歩、インストールから画面に「Hello VuePress」を表示するまでを解説していきます。
ぜひみなさん実際に手を動かしながら読んでくださいね。
目次
VuePressのざっくりとした説明
これは以前記事書いたのでそちらを見ていただきたいです。
もうその記事すら見るのめんどくさいって人向けにざっくり説明すると、
マークダウンファイルで文章を書く（〜.md） → コマンド叩く → HTMLテキストが生成される（〜.html）
という流れでページを公開できるサイトを作ります。
PHP使いません。DB使いません。だからすっごく軽いんです。
開発環境
・VSCode（他のエディタでも可）
・macOS
・ターミナル
でOK。
今回は初心者の方も真似しやすいようにぜ〜んぶ無料で作っていきます。
VuePressの公式ドキュメントはこちら↓
あと、Node.jsが入っていない方は以下のサイトからインストールしてください。
最新版と推奨版がありますが、推奨版のほうで大丈夫です！
実際に手を動かしていこう
インストールする
もうね、どんどん手を動かしていきましょう。
まずはインストールです。
適当にフォルダ作って、ターミナルでそのフォルダを開いたら以下のコマンドをドン。
|
1 |
npm install -g vuepress |
|
1 |
+ vuepress@1.3.1 |
と表示されればインストール成功。これだけでVuePressがインストールされます。
んで、作っておくと便利なpackage.jsonを以下のコマンドで生成しましょう。
|
1 2 |
npm init -y npm add -D vuepress |
すると、以下のようなpackage.jsonになると思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "name": "bull", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "vuepress": "^1.3.1" } } |
“bull”となっているところが今回の私のプロジェクト名です。
ここはみなさんが作成したフォルダ名になると思います。
のちのち、buidとかdevとかするんですが、毎回、
|
1 2 |
vuepress dev docs vuepress build docs |
ってタイプするのも面倒なので、npm run dev、npm run buildと省略して叩けるようにしましょう。
|
1 2 3 4 5 6 |
{ "scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" } } |
package.jsonにこれを足すだけ。今は”scripts”の中にはtestコマンドが入ってるので、それを消して上の記述を足しましょう。
docsってのはこれから記事を書くマークダウンファイルを格納するフォルダの名前です。
docsフォルダの中身をdevしたりbuildしたりするんだと思ってください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
{ "name": "bull", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "vuepress": "^1.3.1" } } |
今の時点でpackage.jsonはこんな内容になっていると思います。
マークダウンで記事を書く
では早速、docsというフォルダをルート直下に作成し、その中にindex.mdというマークダウンファイルを作ってください。
これは別にコマンド叩かなくても普通にfinderやエディタ上でフォルダ・ファイル作成して結構です。
そのindex.mdに、
|
1 |
# Hello VuePress |
と入力し保存します。ちなみに#は1つで見出し1みたいな感じです。詳しいマークダウンの書き方については省略します。
書いた記事をローカルで確認する
開発中にlocalhostでソースを確認したいときはdevコマンドを使います。
|
1 |
npm run dev |
ターミナルで上のコマンドを叩いてください。
これを叩くことでファイルの更新が監視され、ローカルでファイルの状態が確認できるようになります。
（要はローカルで開発状況を見るためのコマンド）
ブラウザを開いて、localhost:8080にアクセスしてみてください。
さっきのマークダウンファイルが出力されて見えるはずです。
Hello VuePressの文字が見えますね〜〜〜。
しかも勝手にデザインが当たってるし、検索窓までつけてくれてます。
マークダウンファイルからHTMLファイルを生成する
ですが、これは開発中なので見れるだけで、このままサーバに移してもWEBには公開されません。
実際にWEBで公開できるようにHTMLファイルを生成したいと思います。
このときに使うのがbuildコマンドです。
|
1 |
npm run build |
これを実行すると.vuepressというシステムファイルと、その中にindex.htmlファイルが生成されるんです。
これでサーバにソースを移したときでも、このindex.htmlファイルが最初に表示されるはずです。
ちなみに、docsフォルダの中にaboutフォルダを作成し、そこでindex.mdを書いたら、
localhost:8080/about/っていうパスになります。
（もちろんmdファイルからhtmlファイルを生成してから確認してくださいね）
まとめ
ここまでついてこれたでしょうか。
記事のグローバルナビゲーションの表示についてもまとめていますので、
ぜひご覧ください！
関連記事
記事を書いた人
睡眠・食事・運動に気をつけてます。 100歳まで生きる予定です。
睡眠・食事・運動に気をつけてます。 100歳まで生きる予定です。