https://github.com/redmega/example_05_static_site_generation_with_gatsby
An example static app built with gatsby using the gatsby-source-graphcms plugin and hosting with netlify
https://github.com/redmega/example_05_static_site_generation_with_gatsby
Last synced: 7 months ago
JSON representation
An example static app built with gatsby using the gatsby-source-graphcms plugin and hosting with netlify
- Host: GitHub
- URL: https://github.com/redmega/example_05_static_site_generation_with_gatsby
- Owner: Redmega
- License: mit
- Created: 2017-08-22T17:22:33.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-08-22T20:04:55.000Z (almost 9 years ago)
- Last Synced: 2025-01-02T09:46:09.411Z (over 1 year ago)
- Language: CSS
- Size: 4.88 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
GraphCMS, Gatsby, & Netlify Example
This is an example static site made with [graphcms](https://graphcms.com/) and [gatsby](https://gatsbyjs.org), and hosted on [netlify](https://netlify.com). You can see the full sample app live [here](https://gatsby-graphcms.netlify.com/)!
[comment]: # (A detailed blog post can be found [here](https://graphcms.com/blog/static-site-generation-using-graphcms-spike-and-netlify).)
## Setup
- make sure [node.js](http://nodejs.org) is at version >= `6`
- `npm i gatsby-cli -g`
- clone this repo down and `cd` into the folder
- run `npm install`
- run `gatsby develop` or `gatsby build && gatsby serve`
## Structure
All configuration can be found in the `gatsby-config.js` file. We use [spike-records](https://github.com/static-dev/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](https://github.com/reshape/sugarml), a pug-like whitespace-sensitive html syntax parser for [reshape](https://reshape.ml/). There is no lock-in here though, as you can convert to a [sugarfree syntax](https://github.com/static-dev/spike-tpl-sugarfree) 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](https://github.com/jescalan/gps) guidelines. There is no javascript at all on this site as it doesn't require interactivity.