Setup VuePress for a Simple Website

NOTE: Refer to Setup Landing Page Website With VuePress 1.x for a newer version of this guide.

Why use VuePress (or not)

VuePress is still in early development (early Alpha as of September 2018, started on April 2018), so it is probably not ready for production.

I pick VuePress because I am familiar with Vue.js.

VuePress is currently designed to generate documentation such as VuePress (with a top navbar and left sidebar, and a next and previous button on each content page). If you are writing documentation, this should be a perfect fit.

You can customise the default theme/layout, but I don't think there are many theme/layout options at the moment (PS: I didn't explore hard enough).

Great development server with livereload.

Fairly simple to learn and setup: I created a simple page within 1 hour.

It comes with Service Worker configured, so you get PWA with local caching by default.

Setup VuePress

You could do a global installation.

npm install -g vuepress

I choose to do a local installation within my project folder

mkdir testcd testnpm install -D vuepress

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

mkdir docsecho '# 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 PolicyI 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:

• https://vuepress.vuejs.org/