Use TakeShape's starter projects to get up and running in minutes with a Gatsby.js site on Netlify
⚡️ See this sample project running live on Netlify
Starting a new company is hard work. It takes considerable time, money, and energy to build a stellar team, develop an amazing product, and find customers for it. Creating your company’s website shouldn’t take away any resources from these important efforts, but it should still provide you with a foundation to grow.
You can build a speedy, cost-effective, and maintainable static website for your business that still gives you editability and complex functionality as your business grows using the Jamstack.
Jamstack is a modern architecture where websites and applications are hosted statically and served from a content delivery network (CDN). This architecture provides a great deal of benefits, including cost effectiveness, security, reliability, and scalability. While traditional websites require maintenance, scaling, and optimization in order to keep costs low, Jamstack sites are cheap and low-maintenance from the start.
In this step-by-step guide, you’ll be introduced to the Jamstack as we walk through the process of creating a new site that runs on modern technologies with a reliable CMS to manage the content. And we’ll do it all in under 30 minutes!
What tools should I use to build, update, and serve my static Jamstack website?
For our website, we're going to use three modern tools for building our site, managing the content, and hosting and deploying it to the cloud: Gatsby.js, TakeShape, and Netlify.
If you haven’t heard of Gatsby.js, it’s a modern website framework that uses React.js and GraphQL to dynamically generate websites. It provides tools for developers to pull in many sources of content, including content from external services, and to output a website or app to a directory of static files and assets.
TakeShape is a content management system (CMS) with an intuitive user interface to add, edit, or delete content without the cost or maintenance overhead of a legacy CMS like Wordpress. Using TakeShape, all the members of your team can be productive right away, whether they’re a developer, content creator, or executive.
Once you have a website or web application, you'll ultimately need to deploy it to a host so the world can visit it! That's where Netlify comes in: it builds your site, makes it available across a global CDN, and associates it with your custom domain.
Netlify’s continuous integration (CI) features make sure your site is always up to date. It integrates with Git clients, including Github and Gitlab, to automatically build and deploy new sites when your code changes. When you use TakeShape as your CMS, you’ll also have access to webhooks that can automatically trigger another build and deploy whenever changes occur to your content.
Here’s how this all fits together: you’ll use Gatsby as the framework to code your site; TakeShape as the tool for editing and updating your content on the fly; and Netlify to host and continually rebuild your site as it's updated. Now, let’s get building!
Step 1: Creating a new project in TakeShape
Creating a new TakeShape project
To get started with TakeShape, you'll first need to create a free account if you don’t have one already.
TakeShape provides a number of ready to go example projects that will let you preconfigure a new project with an optimized, off-the-shelf solution. We'll use the Shape Startup Template to create and organize the kind of content that a young company needs.
Under the Create a New Project header on the Projects page, select the Shape Startup Template and give it a name. For our walkthrough, we're going to use a fake company name TakeShape Startup, Co., but if you're building this for your company, this is where you should use your company's name.
After selecting the Template and entering a name, click Create Project and you'll be dropped into your new project dashboard which includes a variety of sample content that we'll use to create our new website.
Save your Project ID and API Key
When you land into your new project dashboard, you will also have a new project ID that we'll use to connect to the TakeShape API when creating our website with Gatsby.
If you look at the URL of the page you're on, you'll see it looks like:
https://app.takeshape.io/projects/[Project ID]/…
Copy and paste this ID to a secure place, like a local text file, where you can easily find it later.
Then, select the dropdown arrow in the top left of the dashboard next to your project name and select API Keys.
Click the New API Key button in the top right and you'll be asked to include a Title and Permissions for your key. You'll want to name the key something that makes sense that you'll remember when reviewing your keys. For our walkthrough, we'll use “Website” for our title.
As for permissions, we can select Read as we'll only be requesting the data, not modifying anything.
Finally, click Create API Key in the top right and you'll be presented with a popup that includes your new API key. This is the only time you'll see this key!
Copy this key and save it alongside your project ID—we'll need both of them later on to fetch our content from TakeShape with Gatsby. Once you have saved your key, you can click I Understand.
Step 2: Creating a new site with Gatsby.js
Next, we'll configure a new Gatsby project in our local development environment. You'll be expected to be able to use a terminal to run commands using npm or yarn.
Note: If you'd prefer to avoid local development, you could skip this section directly deploy the TakeShape Gatsby Starter to Netlify using the deploy button at the bottom of the page. This will create a new project in Netlify and Github repository for your project.
Installing the Gatsby CLI
To set up our Gatsby project locally, we'll first need to install the Gatsby CLI. In order to install the CLI, you can use your favorite NPM-based package manager and run the following command:
npm install -g gatsby-cli
To make sure it's installed, you can run the following command:
gatsby --help
If your install succeeded, it should show you how to use the Gatsby CLI.
Setting up a new TakeShape Gatsby project
Inside your terminal, navigate to the directory where you want to create your project. Once there, run the following command, replacing my-startup-project with a new folder name of your choice. This will create a new Gatsby project and install the necessary dependencies:
gatsby new my-startup-project https://github.com/colbyfayock/gatsby-starter-takeshape-startup
Once the installation is complete, navigate to your project directory:
cd my-startup-project
Setting up TakeShape environment variables
For this project to communicate securely with TakeShape, create a new file called .env in the project root and include the following content, replacing the placeholder values with the unique Project ID and API Key that we saved earlier:
# Inside .env
TAKESHAPE_PROJECT="[TakeShape Project ID]"
TAKESHAPE_API_KEY="[TakeShape API Access Key]"
Starting up and building the project
Once the environment variables are configured, we're ready to go! Gatsby gives us two commands, develop and build:
Running
gatsby developwill start a development server where we can run our code locally, make changes as needed, and visit the local version of our site.On the other hand,
gatsby buildwill compile our code to static files, saving the output to the /public folder.
Once we've run the site locally and can confirm everything is working, we'll add these files to a new Github repository (but GitLab or Bitbucket would work, too!).
Step 3: Hosting and deploying a website with Netlify
Creating a Netlify account
To host and deploy our new website, we'll need an account on Netlify. You can get started by signing up with a range of options including your Github, Gitlab, or Bitbucket account. If you'd prefer the traditional email route, you can use a regular email address as well.
Connecting your Git repository to Netlify
Once you're set up with Netlify, you'll want to connect your Git repository to your Netlify account. For this walkthrough, we're going to use Github, but Gitlab and Bitbucket should work similarly.
When logging in, the first page you'll land on is the Sites page. Go ahead and click the New site from Git button in the top right of this page to get started.
When you land on the Create a new site page, click the button that refers to your Git repository provider.
Once you click that, Netlify will open up a window from that Git provider (like Github), which will request permissions to your account. This is similar to using OAuth with a Google or Facebook account. Netlify requires you to connect your account so it can retrieve the repository to pull down the code in order to build and deploy it.
After you've integrated Git with your Netlify account, you should now see a list of your repositories. Now you can continue to select the repository of your new website at which point you'll be asked to configure the site.
Since Netlify recognizes Gatsby sites, it does a great job at preconfiguring this for us. We should be set with “gatsby build” as our Build command and “public/” as our Publish directory. This means that Netlify will run the build command to compile our website and the output of that command will be available in the publish directory.
But before we click the Deploy button we want to configure an advanced setting, which is our keys, so let’s first click Show advanced. Here, let’s add both of our environment variables TAKESHAPE_PROJECT and TAKESHAPE_API_KEY along with their respective values.
Finally, you can hit the Deploy site button and Netlify will kick off a new build!
Once completed, you should now be able to access your new website with the link at the top of the Overview page!
Step 4: Configuring webhooks with TakeShape to build and deploy changes with Netlify
Finally, if we're making changes to our content in TakeShape, we're going to want our website to rebuild and deploy so that we can automatically keep it updated. To do this, we can take advantage of webhooks to trigger new builds on Netlify.
Creating a new webhook in Netlify
To create a webhook in Netlify, first navigate to the Build & deploy page of your project settings and under the Continuous Deployment section, find Build hooks.
Here, click the Add build hook button and add "TakeShape" or another value you will remember as the Name. Unless you changed the primary branch of your builds, we'll want to leave the Branch to build as "master". Then click Save.
This will create a new URL that we'll use to set up our webhook in TakeShape, so we'll want to save this value for later.
Note: similar to an API key, you do not want to make this URL public. This provides the ability for builds to be triggered on your Netlify project. While this might not necessarily be able to cause major security issues, someone could potentially use this URL to run up your Netlify bill!
Adding our Netlify webhook to TakeShape
To start, we'll want to navigate to our TakeShape project, click the down arrow in the top left of the UI, and select Webhooks from the dropdown.
Once on the Webhooks page, click the Plus (+) button to add a new webhook, enter in your Netlify webhook URL from before, and add the Content: * resource. Check the boxes of all actions for all resources including Create, Update, and Delete, and then finally click the Save button.
Testing that the webhook works
You should now have your TakeShape webhook set up, so let's test that it works.
Navigate to the Homepage section in your TakeShape project and make a change to the content. This can be as simple as adding an exclamation point (!) to the end of the Heading.
Once you click the Save button, you can navigate back to your Netlify project and you should now see a new build triggered.
Shortly after, once that build is finished, you should now see your new change on your deployed website!
Taking advantage of more features from TakeShape
Want to learn about more exciting features TakeShape has to offer? Check out takeshape.io where you can dig into the full range of options you have with the TakeShape Content Editor or how you can combine all of your API services into one, single GraphQL API with TakeShape Mesh!
Top comments (0)