ねこちゃんでもできるVuePressとSurgeで静的サイトホスティング

ねこちゃんでもできるVuePressとSurgeで静的サイトホスティング

はじめまして。とりあえず適当にやっていきましょう。

まずは適当にVuePress用のディレクトリでも作っていきます。

mkdir sugoi-awesome-docs
cd sugoi-awesome-docs

VuePressをローカルにインストールします。

yarn init
yarn add vuepress

docsディレクトリを作成し、その下にREADME.mdを作成します。

echo '# Hello VuePress' > docs/README.md

とりあえずこの時点で一回ビルドしてみましょう。

vuepress dev docs

ローカルサーバーが起動してURLを教えてくれるのでブラウザでそのURLに飛ぶと…


シンプルでいい感じの静的サイトが生成されています。当然のようにホットリロード。偉い。

次はローカル環境のこれを誰でも見れるようにデプロイしていきましょう。Surgeというサービスを使っていきます。

npm install --global surge

package.jsonのscriptsに以下のようなスクリプトを書き足します。

  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "docs:deploy": "npm run docs:build && surge docs/.vuepress/dist"
  },

これで優勝です。もうコマンド一発でデプロイできます。Netlifyのように不自由な操作を強いられることはありません。やっていきます。

yarn run docs:deploy

以上です。初回はメールアドレスやパスワードの認証を求められますが、基本的にCUIで一瞬で終わります。

hogefuga.sh形式のURLが発行されるのでブラウザからアクセスしてみると確かに静的サイトとしてホスティングされているのが分かりますね。

懸念点としてはyarn run docs:deployする度に発行されるところですが、初回の実行時に発行されたURLをコピーして、package.jsonのscriptsを、

  "scripts": {
    "docs:deploy": "npm run docs:build && surge docs/.vuepress/dist hogefuga.sh"
  }

のようにすることで、毎回同じURLを使うことができるようになります。

もちろん自分で所有しているドメインを使うこともできます。Surgeの公式サイトを参考にしてください。

また、VuePressの方も結構な勢いで機能が追加されているので常にチェックしておくと面白いと思います。

個人的にはAtomic Designで作成されたプロジェクトの中にdocs/ディレクトリを作って、Componentsのドキュメントカタログ的なものを使ったりすると便利なのかなぁと思いました。

VuePress単体でも勿論使えるのですが、Nuxt.jsとかと組み合わせて使えるので、うまく活用するといいと思います。以上です。

maikiichan