How to deploy a Vuepress website for free, using Render

Vuepress is a really cool static site generator.  I have been using it for jws.dev for months, now. In the case of jws.dev, I am hosting it on keybase but I recently discovered Render and it is able to do some things that I can’t do as easily with keybase.

Render has a free tier that lets you host a static site for free, with automatic continuous deployments from git, and custom domains with SSL (something that Heroku‘s free tier doesn’t have).

Render also offers the ability to run server-side code (Laravel, Django, Express, etc) if you wish.  They also offer $7/mo managed PostreSQL databases.

So, what can we do with this?

If you take a look at https://github.com/steinbring/kb.jws.app, you will find a pretty standard Vuepress instance.  In the root of the project, there is the file deploy.sh:

#!/usr/bin/env sh
yarn add vuepress
vuepress build

This script installs the vuepress generator and then runs the build command.

You can then specify the build command within the Render dashboard and since vuepress build puts the result into ./.vuepress/dist, you can also specify it as the publish directory within the dashboard.

With that set up, whenever you commit a change to https://github.com/steinbring/kb.jws.app, the deploy script runs, a new copy of the site is generated, and the change goes live.

Want to see it work for yourself?  Feel free to fork the github repo, send me a merge, and watch the site update.

Leave a Reply

Your email address will not be published. Required fields are marked *