solution • Vue headless CMS site - martindubenet/wed-dev-design GitHub Wiki

[  Vue.js coding  ][  Vuetify templates  ][  Vue.js setup for Vuetify  ][  Vue headless CMS site  ]

Vue headless CMS site

Minimal setup with markdown files compiled as a static website. The simplicity of Markdown contents helps author focussing on writing while the Vue system streamline the contents navigation as a single page application (SAP) without depending on a database maintenance.

VuePress and VitePress variants

VuePress v2 (refered as next) is the latest iteration of Vue's headless CMS maintained by its community. VitePress is gonna stay focus on performance and maintained by Vue developers.

Feature VuePress (v1) VuePress v2 VitePress (v1)
GitHub vuepress vuepress/vuepress-next vitepress
Versions vuepress vuepress-next vitepress
Guide Starter v2 Starter Vite Starter
Multi languages (i18n) Config Config Config
Vue version v2 v3 v3
Vuetify support v2 ? ?

 

Tools

References

Plugins

Basic plugins are proposed in the nav of the official VuePress website.

Here's a list of lest popular npm packages that may suit my needs:

  1. vuepress-markdown-it-wikilink

Tutorials

  1. Building the Code Monkeys Blog with VuePress
  2. How to create a custom VuePress theme with Vuetify (v1)

 

VuePress on Netlify

Netlify offers FREE hosting and compiling of Vue headless CMS (VuePress Markdown contents) solution from GutHub sourced project.

Follow step-by-step instructions « Deploying a VuePress site to Netlify » on vuepressbook.com.

  1. Login your Github account and create your new repository for this project (named vpdemo1 in this tutorial),

  2. On your workstation, git clone the GitHub directory your just created online.

  3. Make sure your local ~/.gitconfig file contains your user.name and user.email. If not follow these instructions.

  4. At the root, create a first content file (required to be named) README.md :

    # First VuePress site

hello, world.

  5. Next commit this new file and push it to GitHub

    git remote add origin [email protected]:yourUserId/vpdemo1

  6. Initialize nodeJS in your project and update your ./package.json file details.

    You may use the optional --force suffixe to skip npm questions and apply sensible defaults for a fast start.

    npm init

  7. Findout what version of VuePress you have:

    vuepress -V