Deploy static vuepress site using now.sh and basic authentication

Dominik Aksamit — Sat, 18 Jan 2020 19:46:42 +0000

Vuepress is a minimalistic, vue-powered static site generator. Now is free and easy-to-deploy static hosting. Both used together let us deploy generated static sites for free in seconds.

So, what if we would like to quickly deploy our site and restrict access with username and password? Here, I'm gonna show you how to set up a project step by step.

TL;DR:
Repo: https://github.com/daksamit/vuepress-basic-auth
Demo: https://vuepress-basic-auth.now.sh (credentials: admin | admin)

Set up a new project

First of all, we need to create a project directory (vuepress-new-auth), init yarn project and add vuepress dev dependencies.

mkdir vuepress-now-auth
cd vuepress-now-auth
yarn init -y
yarn add -D vuepress

For better dev experience, we add useful scripts to our package.json file.

"scripts": {
  "start": "vuepress dev src",
  "build": "rm -rf public && vuepress build src && mv src/.vuepress/dist public"
}

Vuepress development

Let's create our first vuepress page. If src directory doesn't exist yet, we need to make it. Let's add heading to our README.md and start dev server.

mkdir src
echo "# Vuepress now auth" > src/README.md
yarn start

Now deployment

If we don't have now installed yet, we can install it globally: yarn global add now. Then we have to sign in: now login
To deploy our site, we just need to run now and in a moment we have generated deployment links. Now our project is live :)

Basic Authentication

The only thing left to do is adding basic authentication to our vuepress project.
the deployed site is available for everyone. We can protect app by adding static-auth module, creating now.json and index.js in root working directory. Here is what we need to do:

Add now.json configuration file

// now.json

{
  "version": 2,
  "name": "vuepress-now-auth",
  "builds": [
    { "src": "index.js", "use": "@now/node" }
  ],
  "routes": [
    { "src": "/.*", "dest": "index.js" }
  ],
  "env": {
    "USERNAME": "admin",
    "PASSWORD": "admin"
  }
}

Add static-auth module

yarn add static-auth

add index.js for now server

// index.js

const protect = require('static-auth')
const route = '/'
const { USERNAME, PASSWORD } = process.env
const isAuthenticated = (user, pass) => (user === USERNAME && pass === PASSWORD)
const options = {
  directory: __dirname + '/public'
}
const app = protect(route, isAuthenticated, options)
module.exports = app

Finally, just run yarn build && now --prod and enjoy :)

Of course, you can read more about vuepress and now by following links:

DEV Community: Dominik Aksamit