Learn how to spin up a site using Ghost as a headless CMS and build a completely custom front-end with the static site generator VuePress.
package.json
:
js-yaml
will create yaml frontmatter and fs-extra
will place the Markdown files in the right directories.
To start, create a new file in the root directory of your project:
url
value to the URL of your Ghost site. For Ghost(Pro) customers, this is the Ghost URL ending in .ghost.io
, and for people using the self-hosted version of Ghost, it’s the same URL used to access your site.
Next, update the key
value to a key associated with the Ghost site. A key can be provided by creating an integration within the Ghost Admin. Navigate to Integrations and click “Add new integration”. Name the integration appropriately and click create.
moment.js
to include a formatted date in the filename like so:
sidebarDepth
property tells VuePress that we want to render subheadings from h1
and h2
headings from our Ghost content. You can find more information about the default theme config here.
The next step is to create a VuePress config.js
file in a directory called .vuepress/
:
fs
and path
modules from VuePress’ shared utils and add a new getSidebar()
function as shown below:
.vuepress/components/
folder. Create this folder structure and make a new file in components
called PostList.vue
. In that file add a <template>
element add the following to list all of the posts:
<template>
element, add a <script>
element, which will contain queries that will in turn pass data to the <template>
above:
index.md
file like this: