めるノート

へっぽこWebエンジニアが地団駄を踏んでいる日誌

Vuepressをサッとビルドして、Netlifyでサッとデプロイしてみた

すごく今更感があるのですが、先日Vuepressを立ち上げてみたので、雑にその様子を書いてみます。
最初はVuepressで、こっそり掃き溜めブログでも作ろうかなって思ったんだけど、Kibunlogというアプリが掃き溜めにとてもよかったので、Vuepressでの公開は特にしていません。

KibunLog:気分ログ日記-楽しく続くメンタルケアSNS

KibunLog:気分ログ日記-楽しく続くメンタルケアSNS

  • Haruka Murakami
  • ヘルスケア/フィットネス
  • 無料

Vuepressのビルドについては公式サイトの通り。

# install
yarn global add vuepress # OR npm install -g vuepress

# create a markdown file
echo '# Hello VuePress' > README.md

# start writing
vuepress dev

# build to static files
vuepress build

これでサッとビルドができます。

ディレクトリ構成や設定ファイルについては以下が参考にできます。
.md ファイルが記事なので、ファイルを増やすと記事も増やせます。

vuepress.vuejs.org

デプロイについても公式ドキュメントがあります。
自分は今回Netlifyを使いました。

vuepress.vuejs.org

まず、Netlifyにデプロイするために、Vuepressのプロジェクトで git init して、GitHubリポジトリにPushします。
また、今回自分はNetlifyを使うのが初めてだったので、GutHubのアカウントと連携して、Netlifyのアカウントを作成しました。

www.netlify.com

Netlifyでアカウントを作成してログインをしたら、右上に「new site from Git」ボタンがあるのでそれをクリックします。

f:id:c5meg1012:20180609141408p:plain

デプロイしたいVuepressのリポジトリを選択して、デプロイ設定に進みます。

ヘッダーメニューの「Settings」に進んで、左サイドバーの「Build & deploy」の「Edit settings」からデプロイの設定ができます。

f:id:c5meg1012:20180609141442p:plain

Vuepress公式ドキュメントのこちらを参考に、Netlifyを設定します。

vuepress.vuejs.org

f:id:c5meg1012:20180609141511p:plain

これで、GitHubリポジトリにpushをすると自動デプロイされるようになっていると思います。
pushしてデプロイがうまくいったかどうかは、Netlifyのヘッダーメニューの「Overview」から確認できます。

f:id:c5meg1012:20180609141528p:plain

以上、サッとビルドしてサッとデプロイしたときの雑なメモでした。
Vuepressについての日本語記事でとてもいいなーと思ったのは、有料記事にはなってしまいますがCodeGridの@nakajmgさんの記事です。
サッと作るだけではなく、Vuepressをきちんと作り込みたいなって思った時に参考になると思います!

app.codegrid.net