⚡ Build server-less, static websites with Vue.js and Netlify CMS.
Build server-less, static websites with Vue.js and Netlify CMS.
This is a starter template to build static websites with Vue.js and Netlify CMS, based on Nuxt v1.x. What it covers:
Setup via Vue CLI ?
Easily setup a nearly blank Nuxt.js project.
Currently not optimized for Vue CLI v3.0.
Content editing via Netlify CMS ✏️
Netlify CMS is a client-side CMS connecting directly to your git repository to edit markdown files.
Also supports other file formats, but this template only works with the default, frontmatter markdown format.
Show content in Vue.js via Nuxtent/Nuxtdown module ?️
The Nuxtdown module (fixed fork from Nuxtent) allows querying the content and show in the UI.
Static-site generation via Nuxt.js ✅
Nuxt.js, the famous framework to build universal Vue.js applications, generates a static-site.
node 8.0+
and npm 5.0+
installedvue init
to work, as this template is not yet optimized for the newer Vue CLI.$ vue init renestalder/nuxt-netlify-cms-starter-template my-project
$ cd my-project
# install dependencies
$ npm install # Or yarn install
static/admin/config.yml
.Nice, you did the the important steps to get started. Now configure all the components correctly for your infrastructure.
static/admin/config.yml
nuxtdown.config.js
<head>
tags and page titles are set via Nuxt.js. Don't bother with routing configuration for Nuxt.js, this is solved by Nuxtdown.nuxt.config.js
During development, run the client-side SPA version of your application. Use the dev
or serve
task, whatever fits you better. They do the same.
# serve with hot reloading at localhost:3000
$ npm run dev
Go to http://localhost:3000
For production, generate the static-site.
# generate a static project
$ npm run generate
To make it work on your production server, the build needs to know the final url/domain where the site will run. For this, you can edit the npm generate:manual
task in the package.json
and set your production URL. This is useful when you manually deploy your website:
# generate a static project that will be hosted on the URL given in package.json
$ npm run generate:manual
The folder of your generated project will contain a netlify-example.toml
file you can rename to netlify.toml
to get started with Netlify deployment. It automatically sets the BASE_URL
based on your Netlify configuration and the type of deployment (Production deployment, branch deployment, preview deployment). So no need to set the production URL in the package.json
.
If you use other CI solutions, you always have to make sure, that the environment variable BASE_URL
is set to the URL where the website will run. Tools like GitLab allow you to set environment variables in the settings of the project and make it easy to use what ever way you want to deploy your project.
If you're interested in contributing to the project, see CONTRIBUTING.md