Skip to content
Nuxt statically generated site for ghost blog
Branch: master
Clone or download
Latest commit aa0ae45 Apr 7, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Get build/generate working with v-html css Mar 20, 2019
components Get rid of parent container on nav Mar 20, 2019
layouts Add hella meta tags Mar 26, 2019
middleware Initialize nuxt project Feb 20, 2019
pages Add hella meta tags Mar 26, 2019
plugins Use filter to format date in post list Mar 18, 2019
static Update icon and title meta data for index Mar 25, 2019
store Catch nuxtServerInitErrors Mar 21, 2019
util Create static 404 page Mar 21, 2019
.editorconfig Initialize nuxt project Feb 20, 2019
.env.example Add details to readme Mar 26, 2019
.eslintrc.js Allow html in templates - html Mar 18, 2019
.gitignore Ignore tmp Mar 20, 2019
LICENSE.MD Add license file Apr 7, 2019
package.json Add app icon, use pwa for favicon Mar 21, 2019


Nuxt Static and Universal site generation using the Ghost Content API and NUXTJS

Site fetches and provides Ghost blog data to NUXTJS components With data already provided to the VUE components, a site can be rapidly templated

Build Setup

To get the Ghost Content API working, you will first need to access your blog's backend to get the API key. Instructions may be found here.

You will then need to provide this information to the file .env.example, and the rename this file to '.env'. This app uses @nuxtjs/dotenv to load these environment variables into the project.

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate

Important Configuration

The /util/ghost.js file contains some important configuration items.

First, it exports the GhostContent API that can then be used in components to fetch data (for both static and universal site generation). This must be called as a function in other components.

Second, you will see the array postIndexFields. As you may not want to provide all post data to you home page for posts links, you can configure desired items in this array. See the Ghost Content API for more details.

Last but not least, it contains a function called generateRoutes that is imported in nuxt.config.js. This will generate dynamic routes (depending on how many post pages, authors, and tags are fetched) when you run npm run generate. See Nuxt generate property.

You may need to tweak this to your liking, but for now it generates are post, pages, and index pages for all posts, posts by tag, and post by author with pagination.

In nuxt.config.js you will also note that:

generate: {
    subFolders: false,

The subFolders property was set to false to be able to provide a 404 error pages with Ghost's Navigation data (dynamic data retrieved from Ghost) when generating a static site. This page is 404.vue.

In Action

To see a Netlify-hosted, statically generated version of this site in action, visit

For a detailed explanation on how things work, checkout Nuxt.js docs.

You can’t perform that action at this time.