pantazos / gatsby-starter-takeshape-portfolio

Gatsby Starter - TakeShape Portfolio

A Gatsby starter for creating a portfolio website with TakeShape. You can see the sample project in action here: https://shape-portfolio.takeshapesampleproject.com/

Quickstart

1. First install the starter.

$ npx gatsby new portfolio https://github.com/takeshape/gatsby-starter-takeshape-portfolio

If you prefer you can simply fork this template repository and create your own repo. After you git clone it to your local computer, run npm install and follow these same steps.

2. Next, set up your TakeShape project. The following command will prompt you to import the pattern used in this starter.

$ cd portfolio
$ npm run setup

3. Create an API Key with Dev permissions in your TakeShape project.

   • Click on the project name in the upper left > API Keys > New API Key. Save your new API key somewhere.
   • Copy and save the project ID from the URL. It looks like this, the UUID value between projects and api-keys: https://app.takeshape.io/projects/f5767c2f-debb-4af8-8966-4d4511d99a5c/api-keys

4. Back in your Gatsby project, create a .env file in your project with following lines:

TAKESHAPE_PROJECT=<takeshape-project-id-from-url>
TAKESHAPE_TOKEN=<takeshape-api-key-you-copied>

5. Finally, start your local development site at http://localhost:8000

$ npm start

Developing

Visual Studio Code is an excellent editor. This project has some basic config and recommended extensions that will make your development process easier.

Deploy

Check our walkthrough for instructions on how to deploy this Gatsby site to Netlify and trigger builds with TakeShape's webhooks.

Reach out

If we can make your life easier we want to hear from you at [email protected]

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 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.