Create website with Nuxt.js (vuejs & vuetify) + contentful publish to GitHub pages

3 min readJul 13, 2018

This article aim to guide you through the setting up process Nuxtjs + contentful and publish to GitHub pages under 15mins.

DEMO: https://kelvinho.js.org

PRO ✅

`Contentful` is a handful CMS with API ready
`Nuxtjs` has the generate static page feature
`Push-dir` easy to push to Github.io repo
fast loading speed since it mostly html
vuetify with material design ready component
Ability to control generate all as static html or load dynamically on the fly to contentful API

Step 0 — Contentful 🎨

Apply, login and get the API token in 5min. Then, we are ready to use the contentful SDK via Nuxtjs. In this case, we can generate static content via contentful to Github pages.

Sign up https://www.contentful.com/sign-up/
Create an app Contentful web app space
Get the API KEY TOKEN: Space Settings > API keys > choose the app space
https://app.contentful.com/spaces/{spaceID}/api/keys

Step 1 — Setting up project 🎣

git clone https://github.com/kelvin2go/NuxtContentfulVuetify testNUXT

create .contentful.json in root folder ( same format as conftenful-sample.json). Those can be found in step0 at contentful api https://app.contentful.com/spaces/{spaceID}/api/keys

CTF_SPACE_ID, CTF_CDA_ACCESS_TOKEN

{
  "CTF_PERSON_ID": "3eaaGcQAE0ZmuLKU8uqfGW",
  "CTF_BLOG_POST_TYPE_ID": "blogPost",
  "CTF_PROTFOLIO_TYPE_ID": "portfolio",
  "CTF_PERSON_TYPE_ID": "person",
  "CTF_SPACE_ID": "SPACE_ID",
  "CTF_CDA_ACCESS_TOKEN": "Content Delivery API - access token",
  "CTF_CMA_ACCESS_TOKEN": "{} "
}

yarn install packages.nvmrc is using Node 9.3 and NPM v5.5.1 as default.

yarn

if error as below, try to remove the yarn.lock and tried again

error Couldn't find match for "fix/https-via-http-proxy"

Step 2 — fire up the project 🔥

yarn dev

Step 3 — Push to GitHub page 🎉

Build and bundle your static file to ./dist/*

yarn generateyarn add -D push-dir

Add deploy script to Github pages

//package.json"scripts": {
    "dev": "nuxt",
    "build": "NODE_ENV=production nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint",
    “deploy”: “yarn build && push-dir — dir=dist —remote=git@github.com:{USER_NAME}/{USER_NAME}.github.io.git — branch=master — local-branch-name={branch name} — cleanup — allow-unclean”  
},

Now you have a static site on GitHub Pages with ability to control the content via contentful 🎉

Step 4: Generated (as static / dynamic) content

Using Github pages (static content mostly), but with Nuxt generate. We can make it load Contentful API directly on the fly.

In nuxt.config.js, generate can control it as static or load contentful dynamically.

If we want to generate each slug as HTML as this example which require to run npmdeploy` every time have a new content.
https://github.com/kelvin2go/NuxtContentfulVuetify/blob/master/nuxt.config.js#L80

However if we want to lazy deploy once and load every new content, we cam use nuxt async data to grab from contentful API every time, this will not require to npm run deploy every time

References:

Nuxtjs GitHub deployment: https://nuxtjs.org/faq/github-pages/

Contentful with Nuxtjs: https://www.contentful.com/developers/docs/javascript/tutorials/integrate-contentful-with-vue-and-nuxt/

Contentful GH example: https://github.com/contentful/blog-in-5-minutes

#Nuxtjs #Contentful #Vuetify #Githubpage