[Part 3] Final wrap-up and deploy to netlify

In this last post of the series, we will deploy our Vuepress blog to Netlify. I've spruced up the template a little bit by adding more tailwind classes, you can check out the repo on Github.

Setup Local Repository and Netlify Account

Sign up Netlify (if you haven't yet) and link it to your github/gitlab account.

Then we have to install a local Vuepress as a dependency. This is important! Since the whole tutorial is built with 1x-alpha, we are going to install the latest.

npm install vuepress@next //mine is on 1.0.0-alpha.37

Then add a npm script to your package.json

  "scripts": {
    "build": "vuepress build"
  },

I personally like to test the build before pushing everything to netlify. In your project root directory, run the build command:

npm run build

If it builds successfully, we are safe to deploy everything to netlify.

Deployment setup

From your netlify dashboard, click the New Site from Git button on the top right. Select your repo and you should see the a screen for deployment setting. Add some configurations like the screenshot below:

Basically, we are telling Netlify to use the alpha vuepress version we installed along with the repo to run the build command, then output to a generated .dist folder. If you have put everything under a docs folder like the documentation did, your build command should be vuepress build dev and destination folder should be docs/.vuepress/dist.

Hit the deploy button and you should see your site building! Mine is deployed on here.

That's it! If you have any question please feel free to drop me a line :D Thanks for following along.

---

This is a cross-post from my website. Check out the original and more there!