Vuepressをサッとビルドして、Netlifyでサッとデプロイしてみた
すごく今更感があるのですが、先日Vuepressを立ち上げてみたので、雑にその様子を書いてみます。
最初はVuepressで、こっそり掃き溜めブログでも作ろうかなって思ったんだけど、Kibunlogというアプリが掃き溜めにとてもよかったので、Vuepressでの公開は特にしていません。
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 ファイルが記事なので、ファイルを増やすと記事も増やせます。
デプロイについても公式ドキュメントがあります。
自分は今回Netlifyを使いました。
まず、Netlifyにデプロイするために、Vuepressのプロジェクトで git init して、GitHubのリポジトリにPushします。
また、今回自分はNetlifyを使うのが初めてだったので、GutHubのアカウントと連携して、Netlifyのアカウントを作成しました。
Netlifyでアカウントを作成してログインをしたら、右上に「new site from Git」ボタンがあるのでそれをクリックします。
デプロイしたいVuepressのリポジトリを選択して、デプロイ設定に進みます。
ヘッダーメニューの「Settings」に進んで、左サイドバーの「Build & deploy」の「Edit settings」からデプロイの設定ができます。
Vuepress公式ドキュメントのこちらを参考に、Netlifyを設定します。
これで、GitHubのリポジトリにpushをすると自動デプロイされるようになっていると思います。
pushしてデプロイがうまくいったかどうかは、Netlifyのヘッダーメニューの「Overview」から確認できます。
以上、サッとビルドしてサッとデプロイしたときの雑なメモでした。
Vuepressについての日本語記事でとてもいいなーと思ったのは、有料記事にはなってしまいますがCodeGridの@nakajmgさんの記事です。
サッと作るだけではなく、Vuepressをきちんと作り込みたいなって思った時に参考になると思います！
