This is a sample project to get you started building a static website with TakeShape (TS) and Gatsby.js. You can see the sample project in action here: https://shape-portfolio.takeshapesampleproject.com/
- Use the "Deploy to TakeShape" button to create the project in TakeShape.
- Set up and run the client application
- Create a new API key in TakeShape and name is "Gatsby". Copy the API key into your clipboard
git clone https://github.com/takeshape/takeshape-samples takeshape-samples && cd takeshape-samples/shape-portfolio-gatsbyjs- Make a
.envfile that contains the following
TAKESHAPE_PROJECT=<TAKESHAPE-PROJECT-ID-FROM-URL> TAKESHAPE_TOKEN=<TAKESHAPE-API-KEY-YOU-COPIED>npm install- This will install all dependenciesnpm start- Start the development server. It runs on http://localhost:8000 by default
- Have fun playing around with the sample site!
- Change some markup a template file and the site will regenerate automatically
- Try adding a new field to an existing content type then add it to the corresponding GraphQL query and template
Check our walkthrough for instructions on how to deploy this Gatsby site to Netlify and trigger builds with TakeShape's webhooks.
If you're using JetBrains we recommend using the JS GraphQL plugin. This plugin allows for real time validation of your queries against the schema you define in TS though modeling
If we can make your life easier we want to hear from you at support@takeshape.io
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 this 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 the documentation. In particular, check out the Guides, API Reference, and Advanced Tutorials sections in the sidebar.
-
You can optionally set up continuous deployment of your templates.