Skip to content
A Gatsby starter template for creating a single page cafe website using Contentful and Netlify
JavaScript CSS
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.
src Added README images Dec 1, 2019
.gitignore
.prettierignore
.prettierrc
LICENSE
README.md
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
package.json
yarn.lock

README.md

Gatsby

Gatsby Starter Cafe

A single page starter template for cafes utilising Gatsby, Contentful and LeafletJS

Demo

🚀 Here is a live demo of the website

These are the Contentful Content Models which make up the menu section of the site:

Category Image Menu Item Image

📝 Getting Started

Create a .env file in your root directory:

CONTENTFUL_SPACEID=YOUR_SPACE_ID
CONTENTFUL_ACCESS_TOKEN=YOUR_ACCESS_TOKEN

Install dependencies: npm install

📁 Customisation

To add your instagram username, change the gatsby-config.js file:

    {
      resolve: `gatsby-source-instagram`,
      options: {
        username: `YOUR_INSTAGRAM_USERNAME`,
      },
    },

To add your business' coordinates onto the map, change the index.js file:

{typeof window !== 'undefined' &&
      <LeafletMap
        position={[55.952103, -3.196175]} // Your Coordinates
        zoom={18} // Zoom Level
        markerText={"Local Cafe, 65 Park Row"} // Icon text
      />
    }

IMPORTANT NOTE: In order for the site to run, Contentful has to set up in exactly as shown in the pictures above. If you want to create different content models then some static queries and files will have to be updated or this will cause an error. These queries can be found in the following files: breakfast.js lunch.js hotDrinks.js coldDrink.js

Any questions or problems please open an issue I'll be happy to help.

Happy Coding!! 💻

🎓 Learning Gatsby

Looking for more guidance? Full documentation for Gatsby lives on the website. Here are some places to start:

  • For most developers, we recommend starting with our in-depth tutorial for creating a site with Gatsby. It starts with zero assumptions about your level of ability and walks through every step of the process.

  • To dive straight into code samples, head to our documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.

You can’t perform that action at this time.