Use Gatsby TakeShape Startup Starter to Create a New Website with Your TakeShape Content

Colby Fayock: [0:00] We're going to start off with a new project in an API Key in TakeShape. We're going to create a new website to use our content using the Gatsby starter, TakeShape Startup. To use the starter, we're going to use the Gatsby CLI to create our project.

[0:12] In your terminal, you can use the Gatsby CLI with gatsby new/your-directory -- I'm going to use my-startup-project -- and then the link to the starter. With that installed, we can navigate into our project and we can try to run develop.

[0:25] You'll quickly notice that we're running into errors. This Gatsby starter preconfigures our project for TakeShape. In our configuration, we're sourcing our content using GraphQL. We're also using TakeShape environment variables.

[0:37] To use those environment variables, we're going to want to create a new file in the root of our project. We're going to call that file .env. This is going to be our environment file where we store variables for our project. Environment files like this, typically will hold private values, so we want to keep it in our gitignore so it doesn't get saved.

[0:53] In our environment file, we can start off with our TAKESHAPE_API_KEY, and we are going to set it to a unique API key value. We also want to create a variable called TAKESHAPE_PROJECT. To find our project id, we can go to our TakeShape project and we can find our id right in the URL. With that id copied, we can paste it as our value for TAKESHAPE_PROJECT.

[1:15] When we look back at our config, we can see that we set our TAKESHAPE_PROJECT and our TAKESHAPE_API_KEY. With that configured, we can now start back up our development server, where we can see it succeed to start up. Once we open it up another browser, we can see our new website with our content.

[1:30] In review, we used this Gatsby starter to create a new starter project for TakeShape. With our new project, we set up some environment variables which allowed us to configure TakeShape for our project which create our new Startup website with our content.