vuepressを触ってみた
PHP/Laravel・AWS中心のWebエンジニア / テックリード。10年超の開発経験をもとに副業・業務委託のご依頼を受け付けています。
vuepressを触ってみた
2019年6月26日

目的

  • Go の勉強で Hugo を触ってみたものの自分としては、んー今じゃない感がありました。機能としては十分だし、成熟しつつあるドキュメントも多いんだけども Go をちゃんと学習してからだなと思った次第
    • ちゃんとというのは曖昧で正確に言えば基礎を一通りしてからでってことですね。最初の過程をすっ飛ばしました。
  • そこで代わりになるものはないかなーできれば Vue か React 関連で。。。っとおもったら vuepress なるものがあるらしいとのことで触ってみた

触った所感

  • わかりやすい。ただその一言ですね。ただ日本語ドキュメントは、Hugo とくらべてあまりない印象
    • コードを書いた際のスニペットもいい感じでした。
    • 絵文字も見れますしね。
  • ひとまず導入手順のみ書き残そうと思った次第です

導入手順

VuePress

下記コマンドを実行

yarn init
yarn add -D vuepress
echo '# Hello VuePress' > README.md

package.json に追加

"scripts": {
    "dev": "vuepress dev",
    "build": "vuepress build"
  },
yarn dev // サーバーを起動しブラウザで確認
yarn build // buildを行いディレクトリを作成
touch .vuepress/config.js

以下を記述 base: ‘/dirName/’ // GitHub Pages の公開ディレクトリ dest: ‘docs/’, // build 時の出力先指定

module.exports = {
  title: "GitHub Pages product by vuepress", // 公開ページのタイトル
  desctription: "VuePress 挑戦", // ページの説明
  dest: "docs/" // build字の出力先指定
}

最終的には、サーバーを立ち上げればHello Worldが確認できます。

途中で確認自体はできているんで後半は、GitHub ページで表示するための手順を含めてます。

## Link