Setup Landing Page Website With VuePress 1.x

I am going to create a simple landing page using VuePress 1.x with the following elements:

Main page with logo and description
A privacy policy page.
A carousel of images.
A email textbox with I am interested / Notify me when launched button.

Why use VuePress for Landing Page

Main reason I use VuePress is that I am familiar with Vue.js, and it helps when I want to build custom components. Also, I can probably import and use existing Vue.js components.

I want to make use of VuePress default theme and layout (What does VuePress look like?), so I don't have to build the UI from scratch. The default theme come with a Homepage hero setup and navbar, should be good enough for my curret needs.

VuePress besides being a static site generator, it is also a SPA (Single Page Application) with PWA (Progressive Web App) cache support. I get all these features out of the box.

The benefit of a static site generator written with JavaScript/Vue.js is that I could easily deploy/integrate Vue.js component to do dynamic runtime stuff: a sign me up button to collect email or a carousel of images.

Good documentation and good development environment (with livereload).

Caveats

v0.1.0 started on April 2018 (1 year ago), with v1.0.0-alpha.1 started on September 2018.

I am using v1.0.0-alpha.48 which is still pretty new. VuePress have 116 open issues (23 May 2019). One of the pending issues I faced: Use vuepress-plugin-clean-urls to Remove .html File Extension and Trailing Slash.

Setup VuePress

NOTE: I am going to use yarn instead of npm for package installation.

Install vuepress locally.

cd /code/vuepress/PROJECT_NAMEyarn add -D vuepress@next

NOTE: I prefer to install vuepress locally in project directory. vuepress@next is currently required to install VuePress 1.x.

Create the main page (index.html).

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

Edit package.json to add docs:dev and docs:build.

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

Start development server (comes with livereload features)

yarn docs:dev

Generate static files for deployment.

yarn docs:build

NOTE: Output is generated at docs/.vuepress/dist

Configurations, Pages, Assets

Edit docs/.vuepress/config.js.

module.exports = {  title: 'MyApp',  description: 'Read my description ...',  head: [    ['link', { rel: 'icon', href: '/favicon.ico' }]  ],  themeConfig: {    logo: '/logo.svg',    search: false,    nav: [      { text: 'Privacy', link: '/privacy/' },    ]  }}

themeConfig.logo.svg is an optional logo at top left bar (on right side of title). The displayed size is about 35.19px x 35.19px.

Store public assets (e.g. logo.svg, favicon.ico) at docs/.vuepress/public directory.

Favicon

Refer to Add Favicon (Head), Manifest, etc.

Store favicon.ico at docs/.vuepress/public directory.

Robots.txt

Create docs/.vuepress/public/robots.txt.

User-agent: *
Disallow:

NOTE: Refer Robots.txt Configuration.

Page Meta Tags

You might want to add some Facebook Opengraph and Twitter Card.

Refer to VuePress Add Meta Tags to Page Markdown.

JSON-LD Structured Data

You might want to add some Structured Data / Rich Snippet.

Refer to VuePress Add JSON-LD Structured Data (Rich Snippets) to Page.

Privacy Page

For privacy page, create docs/privacy.md.

---title: Privacypermalink: /privacy---# TitleContent ...

NOTE: Refer to VuePress 1.x: Use Permalink to Remove .html File Extension.

Mainpage

Edit docs/README.md.

---home: trueheroImage: /hero.svgfooter: Copyright © 2019permalink: /---

NOTE: home: true enable Homepage layout using Default Theme Config. It comes with a few settings such as tagline, actionLink, features, etc. It also set omit page title and use site title.

Carousel of Images

Refer to Import vue-carousel Component Into VuePress 1.x.

Refer to Pre-launch Signup Email Component With VuePress/Vue.js and Cloud Functions.