Setup VuePress for a Simple Website

September 30, 2018

Setup VuePress

You could do a global installation.

npm install -g vuepress

I choose to do a local installation within my project folder

mkdir test
cd test
npm install -D vuepress

Create a docs directory. Create your main page within this directory.

mkdir docs
echo '# Hello VuePress' > docs/README.md

Create package.json with the following content.

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

Start a development server.

npm run docs:dev

Create simple website

Create a configuration file in docs/.vuepress/config.js with the following content.

I am not using a sidebar (since I am not writing a documentation page), but using a top navigation bar instead.

module.exports = {
  title: 'LuaPass',
  description: 'Private Password Manager',
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }]
  ],
  themeConfig: {
    search: false,
    sidebar: false,
    /*
    sidebar: [
      '/contact.html',
    ]
     */
    nav: [
      { text: 'Privacy Policy', link: '/privacy.html' },
    ]
  }
}

Store logo.png at docs/.vuepress/public.

docs/README.md is your main page. Use the following markdown for content.

# LuaPass

> Private Password Manager

![LuaPass](./static/img/cover.png)

[Download from Google Play](https://play.google.com/store/apps/details?id=com.luasoftware.luapass)

Store cover.png at docs/static/img/cover.png.

Create docs/privacy.md.

---
title: Privacy
---

# LuaPass Privacy Policy

I am Privacy Policy

NOTE: privacy.md is accessible as /privacy.html. If you are interested for the page to be accessible as /privacy/, refer to VuePress Remove .html Extension From Pages Route.

Edit Theme & Layout

You can copy the current theme to docs/.vuepress/theme for editing and modification.

vuepress eject docs

Build and Deploy

npm run docs:build

The output is generated at /docs/.vuepress/dist.

If you are interested to host the static website at Google App Engine, refer to How To Host Static Website On Google App Engine and Google App Engine Static Website Redirect Trailing Slash.

References:

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.