triBlog

トリアナのブログ。

フロントエンド

【VuePress】ゆる〜くインストールからHello VuePressを表示するまでをまとめてみた

VuePressを触れるようになろうシリーズ
ライター画像
おくだ

個人でブログ書きたいなぁとか、技術メモをサイトとして公開したいなぁって方必見。
静的サイトジェネレーターのVuePressを使って爆速なサイトを作っていきましょう。

今回は初歩の初歩、インストールから画面に「Hello VuePress」を表示するまでを解説していきます。
ぜひみなさん実際に手を動かしながら読んでくださいね。

VuePressのざっくりとした説明

これは以前記事書いたのでそちらを見ていただきたいです。

もうその記事すら見るのめんどくさいって人向けにざっくり説明すると、

マークダウンファイルで文章を書く(〜.md) → コマンド叩く → HTMLテキストが生成される(〜.html)

という流れでページを公開できるサイトを作ります。
PHP使いません。DB使いません。だからすっごく軽いんです。

開発環境

・VSCode(他のエディタでも可)
・macOS
・ターミナル

でOK。

今回は初心者の方も真似しやすいようにぜ〜んぶ無料で作っていきます。

VuePressの公式ドキュメントはこちら↓

あと、Node.jsが入っていない方は以下のサイトからインストールしてください。
最新版と推奨版がありますが、推奨版のほうで大丈夫です!

実際に手を動かしていこう

インストールする

もうね、どんどん手を動かしていきましょう。
まずはインストールです。

適当にフォルダ作って、ターミナルでそのフォルダを開いたら以下のコマンドをドン。

と表示されればインストール成功。これだけでVuePressがインストールされます。

んで、作っておくと便利なpackage.jsonを以下のコマンドで生成しましょう。

すると、以下のようなpackage.jsonになると思います。

“bull”となっているところが今回の私のプロジェクト名です。
ここはみなさんが命名した箇所になると思います。

のちのち、buidとかdevとかするんですが、毎回、

ってタイプするのも面倒なので、npm run dev、npm run buildと省略して叩けるようにしましょう。

package.jsonにこれを足すだけ。今は”scripts”の中にはtestコマンドが入ってるので、それを消して上の記述を足しましょう。

docsってのはこれから記事を書くマークダウンファイルを格納するフォルダの名前です。
docsフォルダの中身をdevしたりbuildしたりするんだと思ってください。

今の時点でpackage.jsonはこんな内容になっていると思います。

マークダウンで記事を書く

では早速、docsというフォルダをルート直下に作成し、その中にindex.mdというマークダウンファイルを作ってください。

これは別にコマンド叩かなくても普通にfinderやエディタ上でフォルダ・ファイル作成して結構です。
そのindex.mdに、

と入力し保存します。ちなみに#は1つで見出し1みたいな感じです。詳しいマークダウンの書き方については省略します。

書いた記事をローカルで確認する

開発中にlocalhostでソースを確認したいときはdevコマンドを使います。

ターミナルで上のコマンドを叩いてください。
これを叩くことでファイルの更新が監視され、ローカルでファイルの状態が確認できるようになります。
(要はローカルで開発状況を見るためのコマンド)

ブラウザを開いて、localhost:8080にアクセスしてみてください。
さっきのマークダウンファイルが出力されて見えるはずです。

Hello VuePressの文字が見えますね〜〜〜。
しかも勝手にデザインが当たってるし、検索窓までつけてくれてます。

マークダウンファイルからHTMLファイルを生成する

ですが、これは開発中なので見れるだけで、このままサーバに移してもWEBには公開されません。
実際にWEBで公開できるようにHTMLファイルを生成したいと思います。

このときに使うのがbuildコマンドです。

これを実行すると.vuepressというシステムファイルと、その中にindex.htmlファイルが生成されるんです。

これでサーバにソースを移したときでも、このindex.htmlファイルが最初に表示されるはずです。

ちなみに、docsフォルダの中にaboutフォルダを作成し、そこでindex.mdを書いたら、
localhost:8080/about/っていうパスになります。
(もちろんmdファイルからhtmlファイルを生成してから確認してくださいね)

まとめ

ここまでついてこれたでしょうか。

次回は記事のグローバルナビゲーションの表示について解説していきます!

お楽しみに〜〜〜!

記事を書いた人

ライター画像
おくだ エンジニア

インタラクティブ表現とUIを極めたい。自称トリアナの新しい風。ミニマリスト。 技術記事多めです。

ライター画像
おくだ エンジニア

インタラクティブ表現とUIを極めたい。自称トリアナの新しい風。ミニマリスト。 技術記事多めです。

ページ上部へ