Getting Started

Here's a few go-to first steps for a VuePress project:

Creating Common Directories

Many projects end up needing a few directories to get up to speed for public browser consumption. These directories should exist inside the ./docs/.vuepress/ directory.

Here's a couple of commands to handle adding public and a sub-directory images for your project:

mkdir docs/.vuepress/public

mkdir docs/.vuepress/public/images

Adding Initial Images

The key starting images for most VuePress projects are:

• Site favicon file: ./docs/.vuepress/public/
• Brand mark for the site navbar: ./docs/.vuepress/public/images/
• Home page hero brand image or logo: ./docs/.vuepress/public/images/

TIP

Remember, VuePress will transfer the files in the ./docs/.vuepress/public/ directory into the root directory of the generated site files (./docs/.vuepress/dist/) after running the npm run docs:build command.

This means you can safely use the relative link method below to link to images in the project folder that will work when the final files are hosted, too. Here's an example using the relative /images/xxx.file syntax:

![Image](/images/obe-wds-logo-vert-dark-ground.png)

Home Page Boilerplate

Next up, you can dive right in and set up the home page, using the following boilerplate yaml code:

---
home: true
heroImage: /images/some-hero-image.png
heroText: Example heroText
tagline: Example tagLine Text
features:
  - title: Simplicity First
    details: Minimal setup with markdown-centered project structure helps you focus on writing.
  - title: Vue-Powered
    details: Enjoy the dev experience of Vue, use Vue components in markdown, and develop custom themes with Vue.
  - title: Performant
    details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
actions:
  - text: Secondary Action
    link: /some-link.html
    type: secondary
  - text: Primary Action
    link: /some-link.html
    type: primary
footerHtml: true 
footer: Proudly powered by the amazing <a href="https://v2.vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer">VuePress</a> & <a href="https://github.com/vuepress/vuepress-next" target="_blank" rel="noopener noreferrer">Repo</a>
---

.htaccess File

Next up, it doesn't hurt to add in an .htaccess file to cover auto-routing to a secure https domain. Here's some code to accomplish this, where the file should be located at ./docs/.vuepress/public/.htaccess:

# Prevent directory indexing
Options -Indexes

RewriteEngine On

# Force HTTPS
RewriteCond %{HTTPS} !=on
RewriteCond %{REQUEST_URI} !^/\.well-known/acme-challenge/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/cpanel-dcv/[0-9a-zA-Z_-]+$
RewriteCond %{REQUEST_URI} !^/\.well-known/pki-validation/[A-F0-9]{32}\.txt(?:\ Comodo\ DCV)?$
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]