Deploying your VuePress blog to Netlify

In our last blog post we create a blog using VuePress. Now we need somewhere to deploy our website. I’ve chosen Netlify because it’s free and easy to use. You can set it up with GitHub, GitLab or even BitBucket.

Creating a Netlify account

If you haven’t done created an account yet, I suggest you sign up now and connect your chosen git platform with your account.

Configuration file

Let’s start by creating a Netlify configuraation file called netlify.toml. We then want to add the following

[build]    publish = "pages"    command = "npm run docs:build"

This tells Netlify that on build we need to run the command npm run docs:build which is one of the commands in the scripts section of our package.json file. In our docs/.vuepress.config.js file, you might remember setting the dest attribute to “pages” which is where our built project will be locatated. If you changed this attribute to something other than pages, then you will need to update the publish attribute in the netlify.toml file to reflect this.

Please create a repository in your chosen git platform and connect that to your git project.

Now we want to add our project to git by running.

git initgit add .git commit -m "Initial commit"git push -u origin master

You can now head back over to Netlify and select the “New site from Git” button.

Once you click this button, you will be greeted with the following screen.

Please select your chosen Git platform and then select the repository where you added your project. Once done, you should come to a “Deploy settings” page and with any luck your “Basic build settings should look like this.

If it does, then you can go ahead and click “Deploy site”. It will then start building your project based on your website. It will let you know if the build has been deployed successfully or failed. (Hopefully we see a success, otherwise you can contact me on Twitter).

And now your website is ready to go and you can show it to the world! Every time we commit and push, Netlify will automatically build and deploy.

Next time, we’ll add NetlifyCMS so we can manage our posts via an admin panel. We’ll also look at adding an RSS feed, comments and automatically posting our posts to Facebook and Twitter.

If you enjoyed this post and want to stay up to date, please register an account.