Skip to content
An example static app using integrating graphql from graphcms and hosting with netlify
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets css and markup cleaning May 8, 2017
views
.editorconfig
.gitignore
app.js
app.production.js
package.json
readme.md
yarn.lock

readme.md

GraphCMS, Spike, & Netlify Example

This is an example static site made with graphcms and spike, and hosted on netlify. You can see the full sample app live here!

Setup

  • make sure node.js is at version >= 6
  • npm i spike -g
  • clone this repo down and cd into the folder
  • run npm install
  • run spike watch or spike compile

Structure

All configuration can be found in the app.js file. We use spike-records, a general purpose plugin for consuming external data, in order to pull in data from GraphCMS. You can see a basic graphql query for the data that we need. We also transform the data to shed the generic wrapper (data.allRecords.x) before piping it into templates, and generate a single view for each item using the template option.

The primary views and templates are all found in the views folder. View syntax is written in sugarml, a pug-like whitespace-sensitive html syntax parser for reshape. There is no lock-in here though, as you can convert to a sugarfree syntax with one simple option and keep all the same layout, looping, and local syntax the same. The markup is quite simple, really.

The css is also very simple and is found in assets/css. Very roughly written to follow gps guidelines. There is no javascript at all on this site as it doesn't require interactivity.

You can’t perform that action at this time.