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:
Top comments (1)
For windows peeps:
"rmdir /s dist && vuepress build src && move src/.vuepress/dist dist"