Code Monkey home page Code Monkey logo

mpouzouki's Introduction

Netlify Status

Read from Google Sheets API with Eleventy

Example site: https://read-from-google-sheets.netlify.com/

This site is an example of using Eleventy's JavaScript Data Files which simplify sourcing content from remote data sources and making them available as objects to use globally across an Eleventy site.

The site is pulling content from a read-only Google Sheets feed at build time.

Instructions

To get your own instance of this 11ty example project cloned and deploying to Netlify very quickly, just click the button below and follow the instructions.

Deploy to Netlify

Wait, what happens when I click that button?

Good question. Here's what it will do...

  1. Netlify will clone the git repository of this project into your Github account. It will be asking for permission to add the repo for you.
  2. We'll create a new site for you in Netlify, and configure it to use your shiny new repo. Right away you'll be able to deploy changes simply by pushing changes to your repo.
  3. That's it really.

Changing the data source

There are a couple of steps required to expose the content from your Google Sheet as a JSON API.

  1. Create a google sheet and format it with column names in the first row. The JSON feed generated will use these column names.
  2. You'll use the unique ID of the sheet from its URL to address it later.
    • For example: https://docs.google.com/spreadsheets/d/1CfI6XGm9OjjNKGr3kXRSKVLui_gkHZdadoOPIiNgE9s/edit#gid=0
    • Where: https://docs.google.com/spreadsheets/d/{SHEET_ID}/edit#gid=0
  3. After creating you sheet, you need to publish it to the web. Do this from the **File menu in Google Sheets. Select the option to publish the sheet as a web page.
  4. Check that you can now access the JSON feed of the sheet, using your Sheet ID in a URL using this convention:
    • https://spreadsheets.google.com/feeds/list/{SHEET_ID}/od6/public/values?alt=json;
  5. Specify the Sheet ID to be used when constructing the request URL in /src/site/_data/prod/sheet.js

Local development

Prerequisites

Running locally

# install the dependencies
npm install

# External data sources can be stashed locally for API-less dev
npm run seed

# It will then be available locally for building with:
npm run start

mpouzouki's People

Contributors

philhawksworth avatar getit0 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.