Using TakeShape with Ship
Ship is a TakeShape-developed, unopinionated static site generator that builds your project into HTML pages with no JavaScript. You can also use Ship to deploy your builds to the most popular hosting providers, from Netlify to Google Cloud.
To use Ship, you can download it directly from npm by entering npm i -g @takeshape/ssg, but we recommend that you use Ship via the TakeShape CLI instead.
Who should use Ship?
Anyone who wants to streamline their deploy process.
One of the greatest benefits of TakeShape's products is that they simplify your workflow by bringing different functionalities together under one umbrella. By using Ship, you'll eliminate potential complications from using an independent static site generator, which will have an entirely separate community and ecosystem for you to get familiar with.
Why you should use Ship
The benefits of Ship:
Unopinionated: Bring all your favorite tools in whatever configuration you want.
No JS: We ship pure markup to your hosting provider, leading to lightning-fast in-browser performance.
Bring your own build system: Want to customize your build process? No problem. Our SSG is plug-and-play.
TakeShape special features: We provide a built-in fast runtime environment, live previews of your builds, and simple integration with any of your favorite hosting providers.
Sign up for a TakeShape account now to get started.
Once you have an account, you're ready go. Read on to learn how to use Ship.
NOTE
If you want to get started immediately with an example, you can check out our starter repos that use Ship.
Getting started with Ship
To get started, first you'll need to set up a static site on TakeShape. We're going to create a simple site and deploy it to Netlify, first with TakeShape's web client, then with our SSG via the TakeShape CLI.
Setting up a static site through TakeShape
Let's begin by logging into a TakeShape account.
If you're using a starter repo, jump straight to the next section by selecting here.
Otherwise, after you log in, you'll be taken to your project select menu, where you can create a project. In the dropdown labeled "Source", choose "Blank" to create a blank project.
Once you select the "Create Project" button, you'll be taken to your project's dashboard.
Near the top of the page you'll see a "Connect Service" button. Select it to connect a service. You're going to be setting up Netlify.
The next page you'll be taken to is a list of possible services you can choose. You of course want to select Netlify here.
On the next page, just select save. You'll be taken to netlify, where you can authorize TakeShape to have access to your account if you're already signed in. If you're not logged into your netlify account, or don't have one, you can log in or set up a netlify account by selecting here.
Once you have an account or are logged in, navigate to your Netlify service in your project dashboard as described above. Select on the Netlify service and select the Save button as you did earlier. You can now authorize TakeShape on Netlify.
Once you're done, you'll be taken to the Schema tab of your project. You should see queries related to static sites in your Schema Summary. Netlify should also appear in your Services list on the sidebar.
Adding a static site to your project
You're ready to add a site to your project.
Back on your project's dashboard, select the Settings tab, then select the Static Sites option in the menu. You'll see a page that says "Configure static sites to deploy your project". Select the New Static Site button.
You'll be taken to a new page, where you'll have to give your site a name and choose a hosting provider. Of course, choose Netlify for this example. You have an option to provide the Base URL if you'd like, but it's not required.
You can also select a "Destination", which will show you all the sites you currently have on Netlify. You can choose one of those, or choose "Create New Netlify Site".
You can name and add a password to your new site for Netlify if you'd like, but those are optional choices as well. If you do choose a name, ensure it doesn't conflict with the names of any other sites you have on Netlify.
You can also add environment variables here, which you can reference in your site's templates. Read about using environment variables in your templates here.
Once you select "Create Site", TakeShape will generate a new site on your Netlify account for you.
Once you're done, hit save. You now have a configured static site in your TakeShape project.
To publish it, just hit the publish button on your static site page list.
Then visit Netlify and log into your account.
On your dashboard, you'll see a list of sites. The new TakeShape site should be at the top of the list. Here's how mine looks:
And if you visit the site, you should see the page for TakeShape's Blank project template:
Congratulations. You've deployed a static site entirely through TakeShape.
But if you want to use our SSG to build a custom project and deploy it to Netlify, keep reading.
Deploying static site templates to TakeShape via the cli
Let's say you have your own project already built, and you just want to deploy it through TakeShape. Well, we've got you covered.
For this example, we'll use TakeShape's Vanilla JavaScript Starter Repo.
In the root directory of your project, init NPM if you haven't already:
npm init
Next, install the TakeShape CLI as a developer dependency:
npm i -D @takeshape/cli
Awesome. Our goal is to connect the CLI to a TakeShape account, so we can link our local project to a TakeShape project.
So use the login command to open a browser page where you'll log into your TakeShape account:
takeshape login
If you have an adblocker, this process may fail; run the same command with the --cli-login flag to log in from the CLI:
takeshape login --cli-login
Enter your email address and password, and you're all set.
Now let's link a project. Enter the following command:
takeshape link
You'll be presented a list of all your projects in the command line, which you can cycle through with the arrow keys. Hit enter when you find the project you want to link to.
Then you'll be asked to select a site. If you already have a site configured on your TakeShape project, awesome.
If not, that's fine. Follow the guide above by selecting here.
But if you do have a site, you should select it now. If not, you can select it later by using the takeshape link command again.
After that, the CLI will generate .graphqlconfig, .takeshaperc and takeshape-project.graphql files, which the CLI will later use to deploy your site to TakeShape.
Now the only thing you need is a tsg.yml file so Ship knows how to build your site. Let's walk through writing your own tsg.yml.
Editing a tsg.yml file
The tsg.yml file in your project is the template file that informs Ship how to build your site before deploying it to your host.
Let's go through the anatomy of this file so we can understand how to configure our build process.
templatePath
At the top of every tsg.yml will be the templatePath, which is the directory Ship will search through for any templates you're using. If you have no template, you can choose not to include this property at all.
# Typically your templates might be in the src directory
templatePath: src/templates
staticPath
The staticPath property tells Ship which directory to deploy. You can set it to "static" if you'd just like it to deploy the directory the tsg.yml file is already in.
All of your source files, including the JavaScript and CSS code, should be in the directory specified in your staticPath. You should also include any other important files, like robots.txt or humans.txt.
#Ship deploys this directory.
staticPath: static
locale and dates
You then have the locale and dates properties, which are used to specify the locale and date formats for your content. By default:
- Your locale will be "en-us"
- Your timezone will be "America/New York"
- Your date format will be "LLL", which displays dates in "Month name, day of month, year, time" order.
locale: en-us #defaut
dates:
tz: America/New_York #default
format: LLL #default
Here's a list of valid I18N locales.
For more information, see the below section on I18N internationalization support in Ship.
routes
At the top level of your file, specify a routes property, and label each route you'd like to define. You can configure them with a path, a template, and a context. The template property is where you can specify the route to the template. The context property is where you can specify the route to any variables you want to expose to the template.
routes:
homepage:
path: /
template: pages/homepage.html
context: data/homepage.graphql
context
The context property allows you to provide variables to your templates, which you can pull from data files like .graphql, .json and .yml. If you'd rather not pull them from files, you can set the values inline in your tsg.yml when you define the variables as part of your context.
Let's walk through the process of using context, then using data in templates, which we'll pull from the context.
Global context
If you set a global context, all your templates will have access to the data defined within that context.
To do so, declare a context property at the top level of your tsg.yml file:
#Global context available to all templates in all routes.
context:
[KEY]: [VALUE]
For example, if we want simple variable called greeting to be available globally in all our templates, we can create a greeting variable and assign any value we want to it. Let's go with "Hello world".
#Global context available to all templates in all routes.
context:
greeting: Hello world
Now in any of your templates, you can either use the greeting variable to inject "Hello world" into your markup, or you can use global.greeting. Both are valid ways to access global variables.
{{greeting}} and welcome to my site.
Local context
If you want to scope some data to a template in a specific route, you can do that as well from your tsg.yml file.
routes:
homepage:
path: /
template: pages/homepage.html
context: data/homepage.graphql
In the above example, we're exposing queries defined in homepage.graphql to homepage.html. This enablers the homepage.html template to use those queries to fetch data and inject it into the markup.
Queries in context
Sometimes you may need to pass variables to your GraphQL queries before fetching the data from TakeShape and exposing the result to your templates. In this case, you can define a query object within the context property, and you can set a variables object as well, which will take the variables you'd like to set.
In the below example, we're passing an imageConfig object to our queries, with w and h properties:
routes:
homepage:
path: /
template: pages/homepage.html
context: data/homepage.graphql
query: data/homepage.graphql
variables:
imageConfig:
w: 500
h: 500
Using environment variables
You can pull environment variables into your tsg.yml with the env object. Just use a period to reference whatever specific variable you want, and wrap it in a ${}. For example, to get an API_ENDPOINT variable, you'd use ${env.API_ENDPOINT}.
Here's how you might set that value in a context to be used in an HTML template:
routes:
homepage:
path: /
template: pages/homepage.html
context:
apiEndpoint: ${env.API_ENDPOINT}
Given the above tsg.yml, you could inject your API endpoint into your HTML template. But with context and environment variables, you can pull anything into your templates.
For example, you'd reference the above value in your templates by wrapping it in double curly brackets:
{{apiEndpoint}}
Referencing environment variables from your TakeShape project
In TakeShape's dashboard, on the Edit Static Site page, you can add environment variables to your project. You can them reference those variables in your templates and tsg.yml.
You can now use the env object in your template by wrapping it in double curly brackets {{ }}.
{{env.EXAMPLE_VARIABLE}}
And you can also use it in your tsg.yml as described above:
${env.EXAMPLE_VARIABLE}
imageDefaults
TakeShape uses the Imgix Rendering API to serve and manipulate images. All options available in the Imgix Rendering API Reference are valid for use when serving an image via Ship.
The imageDefaults property allows you to set the default options for all images your project will serve.
By default, your imageDefaults will be:
imageDefaults:
auto: compress, format
This will be the default settings even if you include no imageDefaults property. To have no settings, you must pass the property an empty object like so:
imageDefaults: {}
htmlCompression
Ship uses Minimize as a minifier to reduce the size of the bundle delivered to the browser when users visit your site.
Let's talk about how you can fine tune your compression to your needs.
Customizing the HTML compression of your project
To customize how your HTML is compressed, use the htmlCompression property. Here's an example:
htmlCompression:
enabled: true
options:
empty: true
comments: true
But all options available in the Minimize package are valid when customizing your htmlCompression. Check out all the options here.
blockcanvas
When adding an image to your TakeShape project, you may choose to make it part of a blockCanvas shape. If you do, TakeShape will auto-generate a corresponding blockCanvasHtml for that blockCanvas.
Your blockCanvasHtml field will contain a <figure> tag with a nested <img> that has the URL to your image. The image URL will contain all the Imgix options you specified for rendering your image.
However, if you change the name of your blockCanvas shape, the name of its corresponding blockCanvasHtml will also change to match.
If you rename your blockCanvas to, say, testCanvas, then the corresponding html field will be testCanvasHtml. The name doesn't matter, by the way. You can rename it to content, and it will generate a contentHtml field.
It's important to understand the blockCanvasHtml field, because you can use it to customize image parameters when querying a blockCanvas from your TakeShape project's endpoint.
Configuring blockCanvasHtml image parameters
To make changes to your blockCanvasHtml image's parameters from your templates, you'll need to customize your tsg.yml, and edit the query you're making from your template's associated graphql file.
Configuring image parameters for individual routes
Let's start with customizing the image parameters for individual routes. First, in your tsg.yml, add an images variable to the route for your template.
For example, if you want to customize images in your homepage route, your tsg.yml might look like this:
routes:
homepage:
path: /
template: pages/homepage.html
context:
query: data/homepage.graphql
variables:
images:
# Sizes go here
default:
small:
#etc
Here, you can add your options under each image size you want to customize. The available sizes are: default, small, medium, and large.
Remember, all options available in the Imgix Render API are available to you. Here's an example of how you might customize the width and height of each individual size for your homepage route:
routes:
homepage:
path: /
template: pages/homepage.html
context:
query: data/homepage.graphql
variables:
images:
default:
w: 500
h: 500
small:
w: 250
h: 250
medium:
w: 750
h: 750
large:
w: 1000
h: 1000
Configuring image parameters globally
To configure image parameters for any route, you must use a YAML anchor to define your options, then pass a reference to that anchor to the images property of each route.
Here's how it might look:
images: &images
default:
w: 500
h: 500
small:
w: 250
h: 250
medium:
w: 500
h: 500
large:
w: 1000
h: 1000
routes:
homepage:
path: /
template: pages/homepage.html
context:
query: data/homepage.graphql
variables:
images:
<<: *images
about:
path: /
template: pages/about.html
context:
query: data/about.graphql
variables:
images:
<<: *images
gallery:
path: /
template: pages/gallery.html
context:
query: data/gallery.graphql
variables:
images:
<<: *images
Passing your configuration to your query
Now we just need to update the query we've defined in the graphl file associated with our route.
In an $images argument passed to the query, we put TSImagesConfig. Then in our blockCanvasHtml query, we pass the $images variable in as an argument. Here's how it might look:
query($images: TSImagesConfig){
home {
blockCanvasHtml(images: $images)
}
}
paginate
Pagination with Ship is simple. Just add a paginate property to your tsg.yml.
Next, you'll have to set a template property, pointing to the template of your listing page.
template: pages/stories/landing.html
You can also set a path, to create a custom path to the listing page.
path: /blog/page-:num
And you can set the pageSize property to limit the number of items shown on each page.
pageSize: 12
To define the source of the query you'll use to fetch your page items from TakeShape, use the data property. Your query will likely be a get<type>List query, like getPostList or getProductList.
data: data/posts.graphql
To name what each item in your list will be, set the itemName property. For example, if you're fetching a list of products, you might set itemName to product. Then in your template, you'd use {{product.propertyNameHere}}, replacing propertyNameHere with a property like name or price to get whatever property you want from the specific product being paginated over.
itemName: product
Finally, you can use property to specify an array object you've set in the context, which you can then paginate over. For example:
context:
articles:
- title: A
- title: B
- title: C
In the above example, you have an array of articles, each with a title property. To paginate over these articles, you would set articles as a property at the highest level of scope as shown below:
paginate.property: articles
Putting it all together
Your tsg.yml might look like this:
blog:
path: /blog/:title
template: pages/blog/post.html
paginate:
pageSize: 12
path: /blog/page-:num
firstPage: /blog
template: pages/stories/landing.html
data: data/posts.graphql
itemName: post
Crafting the query for pagination
Your query should pull a list from your TakeShape API. It might be named get<type>List where <type> is a type of data you want to fetch. Here's an example fetching a list of products:
query{
getProductList{
total
items{
name
price
description
_id
}
}
}
Using the TakeShape Dashboard to publish your static site
When you navigate to your static site list on the TakeShape web client, you'll see a Publish button on each site in the list. You can always use that button to publish your site if changes are made.
When you make changes to your site, there are only three ways to publish those changes:
Select the Publish button, as described above
Set off a Publish Trigger
Using Publish Triggers
Publish Triggers allow you to trigger an automatic publish of your site whenever certain content changes.
Just choose the content you want to track, then set the Workflow Status to "Default: Enabled" so your triggers will be active.
Using CI to deploy your static site with TakeShape
In a perfect world, you could deploy your static site through TakeShape every time you successfully push a change to your git repository.
Well, TakeShape grants you that ability too. Let's walk through the process:
Getting your project data
First, configure your static site as described in our guide above.
You'll notice on the Edit Static Site page, when you select on your static site, the url contains a Site ID. It's after
/sites/in the url. There's also a Project ID after the/project/section fo the url. Copy both ID's.
The url format is: https://app.takeshape.io/projects/<projectId>/sites/<siteId>
- Next, create an API key with CI permissions. CI is the only role with permission to trigger static site publishes through your TakeShape project externally.
Adding your project data to the CI
With the above set up, you're ready to integrate your site with your CI provider.
Open your CI provider's settings, and go through the following steps:
Set your Project ID, Site ID and API Key as environment variables
TS_PROJECT_ID,TS_SITE_IDandTS_API_KEY. Also set theTS_SITE_NAMEvariable to the name of your static site.Keep your site codebase's
@takeshape/clidependency up to date. At the time of this writing, it's at version^7.222.1, but you can always check its page on the npm registry to be sure.Set the build command in your
package.jsontonpx takeshape deploy, and you're ready to roll.
Now when you push updates to your template code, your CI will push your templates to TakeShape and TakeShape will deploy static HTML to your configured host.
Using I18N locales with Ship
TakeShape uses I18N localization to allow you to localize your content into different languages. Read our doc on the subject to edit your TakeShape project to support different locales.
To configure locales for your project with Ship, open up your tsg.yml and add a locales property at the highest level of scope.
From there, you can use a locale like a property to set options on it. For example:
locales:
en-us:
pathPrefix: ''
dates:
tz: America/New_York
format: LLL
pathPrefix is an option that allows you to customize the path used to reach your localized content. In the above example, url's with no path prefix will resolve to en-us localized content.
You also have a numbers option for configuring how numbers are shown. Different regions represent numbers differently. For example, in the US, one thousand dollars is 1,000. But in other regions, it might be 1.000.
To configure your numbers, use the format and config properties.
Check out the d3 docs to see what options you can set in config. In the below example, we'll set a few options just to give you an idea of what your tsg.yml might look like:
locales:
en-us:
pathPrefix: ''
dates:
tz: America/New_York
format: LLL
fr:
pathPrefix: 'fr'
dates:
tz: Europe/Paris
format: LLL
numbers:
format: ","
config:
decimal: ","
thousands: "\u00a0"
grouping: [3]
currency: ["", "\u00a0€"]
percent: "\u202f%"
Using a date filter in your template
You can specify a locale in a template by using the date filter. It takes the same options as the dates property in your tsg.yml:
{{ date | date({format: 'LLL', tz: 'America/Los_Angeles', locale: 'fr' })}}
Accessing the locale in your template
You can inject the locale into your template with the {{locale}} property. It's made available in your template's context.
Using images in Ship
As explained in the section on imageDefaults above, TakeShape uses the Imgix Render API to manipulate your images and generate URL's to them, based on the settings provided in your tsg.yml.
But you can also customize an image directly in Ship with the image() function, which takes a configuration object with your preferred options.
For example, you might have something like this in your template:
{{ imageField | image({w: 320, h: 240, q: 90, crop: 'faces'}) }}
The above example produces an image with dimensions of 320px by 240px. Its output quality is 90, and it's cropped so that any faces detected in the image will be at the center.
You can add any option available in the Imgix Render API.
Using Live Links
Live links give users a direct link, right from the sidebar of your website, to everywhere a content entry appears on a site. They're easy to set up with TakeShape, so long as you're using Ship.
To see live links in action you'll need to have a static site configured. Make sure you set a base URL in your static site's settings. You also need to deploy your site's template using Ship to use the live links feature.
On the Edit Static Site page, you'll see your live links on the side under your workflow.
To configure a static site, follow our guide above.
Using Live Previews
Live previews are great for getting a feel for how your site will be before you publish it. Set the base URL in your static site to gain access to this feature.
Live previews update instantly whenever you make changes to your site settings or content, and have shareable links that expire after 24 hours.
Ship Recipes
Ship enables many creative solutions for building and deploying static websites. But sometimes you may need a little inspiration to get your imagination going.
That's why we've created some recipes, to demonstrate Ship in action.
Sitemaps
Sitemaps are a fundamental component of most websites and essential if your site needs to be indexed by a search engine. Creating a sitemap that is automatically updated whenever your content is updated is easy with TakeShape.
The three components needed for creating a sitemap with TakeShape are:
Queries to fetch the page you'll add to your sitemap
A sitemap template file to render the data from your queries into
A route where users will find your sitemap.
Let's walk through the process of setting up each step. For this example, we'll assume your TakeShape project is hooked up to an ecommerce API. You can deploy our Shop starter project to TakeShape if you need a starting point to follow along.
Queries
Your queries should be stored in a .graphql file. In that file you can define whatever queries you need to fetch the pages. Here's an example query file you might want to write:
query {
homepage: getHomepage {
_updatedAt
}
categories: getCategoryList {
total
items {
title
_updatedAt
}
}
collections: getCollectionList{
total
items{
title
_updatedAt
}
}
}
Assuming we have an ecommerce API connected to our TakeShape API Mesh, the above query gets us:
- A date for the last time the homepage was updated
- All product categories
- All product collections
The sitemap format requires only 3 fields:
<urlset><url><loc>
You can also include the <lastmod> field.
For this example we'll use those 4 fields, but you can read the sitemap spec to learn more about ways to flesh out your sitemap.
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>https://www.your-url-here.com{{ homepage|route('homepage') }}</loc>
<lastmod>{{ homepage._updatedAt }}</lastmod>
</url>
{% for category in categories.items %}
<url>
<loc>https://www.your-url-here.com{{ product|route('categories') }}</loc>
<lastmod>{{ category._updatedAt }}</lastmod>
</url>
{% endfor %}
{% for collection in collections.items %}
<url>
<loc>https://www.your-url-here.com{{ product|route('collections') }}</loc>
<lastmod>{{collection._updatedAt }}</lastmod>
</url>
{% endfor %}
</urlset>
That's all it takes to set up your sitemap template. Now let's finish by setting up a route.
Routes
Navigate to your tsg.yml at the root directory of your project, and add the following at the top level:
sitemap:
path: /sitemap.xml
template: feeds/sitemap.xml
context: data/sitemap.graphql
You can of course replace the template, context or path with whatever information more accurately represents the files you want to use.
If you have a Robots.txt file in your project, you can add a reference to your sitemap as shown below:
User-agent: *
Sitemap: http://www.takeshapesampleproject.com/sitemap.xml
To see these changes, you'll of course have to deploy your site via the CLI.
Open Graph and Meta Tags
Open Graph and Meta tags are used to set the appearance of your site in search engines and site previews on social media.
TakeShape gives you total control over the rendering and logic behind how these tags appear on a site. This recipe provides a basic implementation which you can modify and expand on to fit your specific needs.
First you'll create a shape that represents the default meta data to display. This shape will be used if ever a post has no meta data defined within it, as a fallback.
Next you'll create a shape for a post, giving it fields for meta data.
You can create a shape called Meta Defaults with Single Line widgets to represent each piece of meta data you want available to your site. Add an Asset widget to store the Open Graph image you'll associate with the site as well.
The image below shows an example:
Next, create the shape for posts. It'll contain a title, author and body, but also contain an object with meta data in it
You can then inject this data into your template by using conditional if-statements to render the site-wide Meta Defaults data if no page-specific meta data exists:
{% if page.social.title %}
<title>{{ page.meta.title }}</title>
<meta property="og:title" content="{{ page.meta.title }}"/>
{% elif page.title %}
<title>{{ page.title }}</title>
<meta property="og:title" content="{{ page.title }}"/>
{% elif metaDefaults.name %}
<title>{{ metaDefaults.siteName }}</title>
<meta property="og:title" content="{{ metaDefault.siteName }}"/>
{% endif %}
{% if page.meta.description %}
<meta name="description" content="{{ page.meta.description }}">
<meta property="og:description" content="{{ page.meta.description }}">
{% elif page.bodyHtml %}
{% set description = page.bodyHtml | striptags() | truncate() %}
<meta name="description" content="{{ description }}">
<meta property="og:description" content="{{ description }}">
{% elif metaDefault.description %}
<meta name="description" content="{{ metaDefault.description }}">
<meta property="og:description" content="{{ metaDefault.description }}">
{% endif %}
{% if metaDefaults.siteUrl and page._contentTypeName %}
{% set path = page | route(page._contentTypeName) %}
{% set canonicalUrl = metaDefaults.siteUrl + path %}
<link rel="canonical" href="{{ canonicalUrl }}">
<meta property="og:url" content="{{ canonicalUrl }}">
{% endif %}
{% if metaDefaults.l.siteName %}
<meta property="og:site_name" content="{{ metaDefaults.siteName }}">
{% endif %}
{% if page.meta.image %}
<meta property="og:image" content="{{ page.meta.image.path | image({w:1200,h:630,fit:crop}) }}">
{% elif metaDefaults.openGraphImage %}
<meta property="og:image" content="{{ metaDefaults.openGraphImage.path | image({w:1200,h:630,fit:crop}) }}">
{% endif %}
To make this data available to your templates, read our guide on using context with tsg.yml above.
Deployment Guides
TakeShape supports many different static site hosting platforms. The following are guides for deploying your site to all of them.
Connecting simple hosts
There are some hosts that are simple to connect, and they follow the same general formula.
The first thing you need to do is to go to the dashboard of your TakeShape project and select the Connect Service button. You'll then be given a list of available services. Select the one that best suits your needs.
You'll see a Save button in the top right, which you can select to open up the website for the service and log in. Complete the process with their instructions, and you're all set to add a static site to TakeShape.
These instructions are especially useful for Vercel and Netlify.
Follow this guide above to create your static site.
Connecting other hosts
To connect any other hosts, you'll have to navigate to the Settings tab in your TakeShape project dashboard, then select on Static Sites. In the page that opens up, shoose Create New Site. On the next page, set up your provider and select Save.
To find out how to set up different providers, continue to the sections below.
Amazon S3
To set up TakeShape to deploy to an S3 bucket, you need to create a bucket through AWS. You'll need the name of the bucket, an AWS access key ID and an AWS secret access key.
You can follow the AWS documentation on setting up an S3 bucket for static site hosting here.
Once your bucket is set up for hosting a site, you'll want to set up an IAM user account that has access to your S3 bucket. Check out AWS's docs on that here.
Azure Storage
Setting up Azure storage is as simple as getting your storage account's name and a valid secret key.
Check out Azure's docs on setting up a storage account for hosting a static website.
Google Cloud Storage
To set up Google Cloud Storage with TakeShape, you'll need:
- The name of the bucket you're using.
- The client email associated with the bucket.
- A private key associated with the bucket.
Create a Google Cloud Storage Bucket.
Check out google's docs on setting up a storage bucket to host a static website.
FTP Client
For the FTP client, you can set your Destination to the host name of the FTP server. If you want to get more specific, you can add the directory where the files should be published to.
You'll also need the FTP username and password.
With all that, you're ready to go.
Still need help? Get in touch with us.