Forem: Mark Catalano

Dev Tool Startup Founders, Share you Accelerator Story!

Mark Catalano — Fri, 02 Aug 2019 12:49:03 +0000

I'm currently going through Techstars with my startup TakeShape. Have you built a dev tool company? Gone through an accelerator? Done both at the same time!? I'd love to get your advice and hear your story!

Use The New Netlify Addon CLI Command To launch A Gatsby Site On Netlify In 2 Minutes

Mark Catalano — Tue, 23 Apr 2019 13:01:43 +0000

TLDR: Scroll down to the example to see how to use netlify addons:create takeshape --template shape-portfolio and netlify dev.

Launching a new Gatsby project with TakeShape and Netlify was already easy; but we don’t just want TakeShape to be easy to use, we want TakeShape to be super duper easy to use. That’s why we’re really excited about Netlify’s two latest additions to their CLI: addons and dev. Getting a live site running Gatsby, with content powered by TakeShape, takes less than two minutes.

Here are a few ways to spend those three extra minutes:

Listen to 3 episodes of 60-second science 🎧
Donate to a good cause 💰
3-minute meditation on the benefits of the JAMstack 🧘(ommm-JAMstack-ommm)

We’ll talk a bit about each of the new commands separately and then see them in action together.

The netlify addon command

Add-ons are a new feature from Netlify which allow you to quickly provision external services for your Netlify-hosted site. Besides creating the addon command, Netlify is also building an addon marketplace. We want developers who use TakeShape to be able to be early adopters of this awesome new feature.

The netlify dev command
Matt Biilman, co-founder of Netlify, announced the dev feature at the recent JAMstack_conf_nyc. His presentation was pretty rad and I recommend checking it out, especially the part where he live codes in vim:

Dev allows you to virtualize the Netlify stack on your local dev machine. This is crazy awesome! The power this gives to a developer really can’t be understated and I have to give it up to Netlify for continuously elevating the developer experience. To use the netlify dev command, you’ll need to have the latest version of the Netlify CLI installed - run npm install netlify-cli -g.

Here’s what you can do with it at a high level:

netlify dev starts a local dev server for the build tool you're using
netlify dev:exec <command> runs a shell command within the netlify dev environment
netlify functions:create bootstrap a new function

One more thing!
netlify dev --live lets you share your dev environment with anyone on a live url! What! Amazing!

Check out the repo for complete documentation.

EXAMPLE - Put’em both together! Using TakeShape’s Netlify addon with Gatsby
The TakeShape add-on really shines when used with an external SSG like Gatsby. The add-on makes your life easier by doing 3 things.

Here we go!

Setup Netlify
- Fork the shape-portfolio-gatsbyjs repo 🍴
- Visit https://app.netlify.com/start to create a new Netlify site from the forked repo 🆕
- Clone the forked shape-portfolio-gatsbyjs repo 👯
- Run netlify link to link the working directory to the netlify site 🔗
TakeShape add-on
- Run netlify addons:create takeshape --template shape-portfolio 🎶
- Run netlify addons:auth takeshape 🔐
- Follow the instructions to create a TakeShape account and claim the TakeShape project ✅
Change content
- Change some content in the TakeShape project ✏️
- From Netlify, observe Gatsby build on Netlify, visit the deployed site, celebrate 🕺
Local Dev
- You’ll probably want to make some code changes and do a little local dev. This is where the new dev command comes in. From your local working directory, run netlify dev. This takes care of the hard work of getting your TakeShape API keys configured in your local environment. Make your code changes, commit to git, and then your site will redeploy with your changes.

And you’re done! This gets you up and running with TakeShape, Gatsby and Netlify in a few short minutes. You can stop right here and just start making copy changes. You now have a URL that you can share with the world!

What’s Next
We want devs to be able to do this even faster! We’re working on being able to launch a TakeShape powered site with a single click directly from any of the TakeShape sample project Github repos.

15 Powerful Tools To Add Advanced Functionality To Your JAMstack Project

Mark Catalano — Mon, 07 Jan 2019 21:00:17 +0000

The JAMstack makes it easier to create rich sites than ever before, which means your projects will be more secure, more stable, and more affordable than ever before.

Running a JAMstack site requires a slight change in the way you think about architecting your project. A successful JAMstack site is all about composing the best services for your specific project. When you want to deliver dynamic experiences like form submissions, search, and server-side data processing you’ve got lots of options to choose from. An entire crop of new services has grown to handle so many of use-cases that you’d once dedicate an entire server towards.

Building with the JAMstack means you can avoid maintaining your own server, add powerful features to your project without nearly as much code, and focus your time on building a great user experience.

Form Endpoints

It used to be that one of the biggest downsides of running a static-site was that there was no good way of handling form submissions. Luckily, a bouquet of companies has arisen to handle this simple, common task for you. Simply provide their unique address as your form’s action, and they’ll serialize, store, and even send along your data to webhooks. There are lots of options to choose from (see below), but so far Basin seems to be the best value of the bunch with unlimited forms and unlimited submissions for $5/mo.

Other great solutions:

Formkeep, Formcarry, FieldGoal, FormBackend, and PageClip all offer similar functionality to Basin. There’s probably even more than we can list here. Take a look, compare them, and pick the one that’s right for you.
If you’re already using Netlify, then their built-in form handling is probably your best bet. This way, you can avoid adding extra complexity by keeping all your site’s data together in one place.
Zapier Webhooks is a great DIY solution if you want to hack something together yourself. You can set your form’s action to your Zapier webhook, then pass the data along to any other service you can think of.

Search

Search could well be the heaviest burden of your project. It’s a tricky situation: search is incredibly difficult to do well, but it’s a UI feature that users expect to be done—and be done perfectly. Luckily, search services like Algolia make it easy to deliver a sophisticated search experience without building it from the ground up. They offer a Search API for indexing and ranking your project’s content, as well as pre-built interface elements in a variety of frameworks to let you drop in a search tool that works wonderfully.

Other great solutions:

SearchIQ offers a smaller set of features as Algolia, but at a lower price. One notable difference is they provide crawling of your project, which saves you from building the index yourself. They also provide drop-in JavaScript tools to provide autocomplete and search result pages.
For a different take on this problem, Lunr provides a client-side search solution. If you’re rendering out a static site with a limited amount of content, say a blog or store, this could make for a great alternative. After rendering a static index file, Lunr will build a searchable index that you can cache in the browser's localStorage for future visits.

Authentication

Authentication is tricky to get right and the consequences for making a mistake are huge. If you want to maintain user identities as part of your project, stick with an off-the-shelf solution like Auth0. They provide a single-sign-on platform, an embeddable log-in widget, and advanced security features like multi-factor authentication and password-less login. Robust documentation and developer SDKs will make it easy to integrate Auth0 into your project. And, with 7k free active users and unlimited logins, they’re one of the most affordable services for getting your project up off the ground.

Other great solutions:

Netlify is a great service for hosting your JAMstack site, and one of the many reasons for that is the Netlify Identity add-on service they provide. You’ll get up to 1000 active users for free, easy connections to external identity providers like Google and GitHub, and authentication widgets to add to your site. If you’re already running your JAMstack project on Netlify (and you should consider it!), this is an easy choice.
AWS Cognito is the most affordable option, but it’s also harder to implement than the off-the-shelf solutions provided by Auth0. However, the aws-amplify library makes it much easier to integrate AWS into your JAMstack app. If you’re already using AWS to power the rest of your product’s services, then it may pay off to look into using Cognito first.

Functions as a Service (FaaS)

Serverless functions are one of the most exciting parts of the JAMstack. Using a FaaS allows you to add just about any functionality you can imagine to your JAMstack site. For example, if none of the form providers we mentioned float your boat, spin up a serverless function and roll your own. Gives you tons of flexibility without having to worry about the underlying server or infrastructure. When you’re not using the function you’re not being billed for it. The grand-daddy of FaaS is AWS lambda. AWS Lambda functions are our go-to at TakeShape, in-fact, TakeShape itself runs on AWS Lambda.

Other great solutions:

Netlify Functions - basically a front for AWS lambda functions. If you’re using Netlify to host your JAMstack site and you like the convenience of centralized billing then Netlify functions are for you.
Google Cloud Functions (https://cloud.google.com/functions/) - Programmable cloud functions. Just like AWS lambda functions, but provided by Google. Good for being the recipient of a Webhook triggered by TakeShape.
Zeit Now - https://zeit.co/now - An up-and-comer with an incredibly easy to use CLI.
Zapier Webhooks is a great DIY solution if you just want to connect two services without doing any coding. It can save you a bunch of time, but the downside is that the functions can cost you much more to run if you use them frequently.

Headless Content Management Systems (CMS)

Finally, to manage the content of your JAMstack project you’ll want an easy-to-use CMS and static site generator. Leave folders of Markdown files behind and use TakeShape, a straightforward CMS and static site generator for organizing, developing, and deploying your JAMstack site. If you’re creating a web app, TakeShape’s GraphQL API provides a simple, easy-to-use endpoint to query for all your content at once. And best of all, TakeShape already provides sample projects that can get your site up and running within 5 minutes! You can try TakeShape for free and find that it’s the easiest way to manage content for your JAMstack site.

10 Best Tools To Start Selling From A JAMstack Website

Mark Catalano — Thu, 06 Dec 2018 19:04:15 +0000

Why should you build your commerce experience on the JAMstack? 💰.

Faster performance - The faster a site is the more sales it generates.
More security - Security breaches are costly and ruin reputations.
More affordable to run - Process tons of transactions without scaling your own infrastructure.
DX - Better Dev Experience = more time spent on customer UX.

Payments

If you need to charge credit cards, you’ll want to use a payment gateway service like Stripe. By sending payment information straight to them, you’ll avoid ever even seeing your customer’s payment information, leaving their all-important financial security to the highly-experienced team at Stripe. They provide an elegant dashboard, easy-to-use tools for refunding payments or handling disputed transactions, integration with hundreds of other services (including others in this list!), and a developer-friendly API for connecting their platform to your project.

Other great solutions:

PayPal, the online payments heavyweight, offers a similar API to Stripe and a plethora of integrations. One key difference is that unlike Stripe, you’ll need to collect payment details from customers during checkout—which could introduce security headaches for you down the road.
Braintree, is another worthwhile competitor to Stripe. It beats Stripe in the kinds of payments it accepts, including Venmo, but doesn’t integrate with as many other services. Unlike PayPal’s solution, you don’t need to touch customer’s payment information.

E-commerce

There are many giant e-commerce platforms that can provide you with a plain storefront, but if you want more control or need to layer e-commerce onto your existing site, then those platforms may not be the best choice. A service like Snipcart can be a great choice for quickly adding e-commerce to your JAMstack site, since it provides just the right balance of simple set-up and deep customization. With Snipcart, you’ll get a basic shopping cart and checkout interface, but also the ability to deeply customize appearance and behavior. You’ll also get a dashboard for managing your orders and more advanced features like shopping cart recovery and inventory management. Plus, they integrate with all the Payment Gateways listed above, so you’ll be able to get paid quickly and securely.

Other great solutions:

Gumroad is a simple, hands-off solution designed for creators. Whether you’re an indie selling artwork, apps, or articles, you can quickly set up a store on Gumroad, add their buy button to your website, and get back to work. However, while Gumroad’s widgets are well-designed and attractive, if you want to customize the look-and-feel of your checkout, then you’ll want to go with a different service.
On the other hand, Foxy tends more towards deep customization over quick set-up. It’s the most powerful and customizable of the solutions listed here, but much more geared towards developers than merchants. If you need more than just a shopping cart and a checkout, then you may want to look elsewhere.

Memberships

While e-commerce sites provide the ability to sell goods, selling subscriptions to your site can be much more complex. If you want to provide subscribers with special newsletters, access to paywalled content, and more, you’ll want to go with a specialized subscription service like Memberful. At its core, Memberful combines simple subscription flows and management with integrations into the most common tools for content creation and management like Wordpress, Mailchimp, and Discourse. One TakeShape customer, Massive Science, implemented Memberful for managing their community. Memberful gives them simple drop-in widgets for subscribing new members and for members to access their accounts, more advanced OAuth APIs for implementing authentication for paywalls and discussion forums, and newsletter integrations for maintaining special members-only mailing lists.

Other great solutions:

If you’re building a web app, then you may want to consider a more API-driven subscription manager like Chargebee and Recurly. While they expect you to provide your own front-end subscription interfaces, they’ll handle all the complex back-end logic for charging your subscribers and provide analytics to help you reduce churn.

Headless CMS

Finally, you’ll want a website with an easy-to-use CMS in order to manage your products and categories, generate a secure and stable static site, and create a truly unique experience for your fans, members, or customers. TakeShape is a straightforward CMS and static site generator for organizing, developing, and deploying your JAMstack site. If you’re creating a webapp, TakeShape’s GraphQL API provides a simple, easy-to-use endpoint to query for all your content at once. And best of all, TakeShape already provides a sample “Shape Store” project that can get your site up and running within 5 minutes! You can try TakeShape for free and find that it’s the easiest way to get started selling from your JAMstack site.

All You Ever Wanted To Know About GraphQL

Mark Catalano — Tue, 27 Nov 2018 20:54:57 +0000

Co-founder of TakeShape, Andrew Sprouse, presents GraphQL to a JAMstack meetup in New York.

Accompanying Github repo: https://github.com/takeshape/jamstack-meetup-graphql-demo

What is GraphQL?

Schema Definition + Query language + Resolution framework

Schema

Provides a strongly typed description of your data
Schema Description Language (SDL) is the recommended cross-platform way to specify schema.

enum Title {
    ACTOR
    DIRECTOR
}

type Role {
    characterName: String!
    title: Title
    movie: Movie
}

type Person {
    name: String!
    photo: String
    filmography: [Role]
}

type Movie {
    title: String!
    watched: Boolean
    rating: Float
    poster: String
    actors: [Person]!
    director: Person!
    year: String
}

GraphQL Schema also specifies how you interact with your data with queries and mutations

type Query {
    listMovies: [Movie]
}

type Mutation {
    addMove(title: String): [Movie]
    removeMovie(title: String): [Movie]
}

Query Langauge

Query your data and fetch exactly what you need

query {
    getToWatchList {
        watched
        movie {
            title
            year
            director
        }
    }
}

{
  "data": {
    "getToWatchList": [
      {
        "watched": true,
        "movie": {
          "title": "Top Gun",
          "year": "1985",
          "director": "Tony Scott"
        }
      },
      {
        "watched": true,
        "movie": {
          "title": "Big Trouble in Little China",
          "year": "1986",
          "director": "John Carpenter"
        }
      },
      {
        "watched": true,
        "movie": {
          "title": "The Princess Bride",
          "year": "1987",
          "director": "Rob Reiner"
        }
      },
      {
        "watched": false,
        "movie": {
          "title": "Taxi Driver",
          "year": "1976",
          "director": "Martin Scorsese"
        }
      }
    ]
  }
}

Mutations

Modify your data

mutation {
    addMovieToWatch(title: "Die Hard") {
        watched
        movieTitle
        movie {
            title
            year
            director
        }
    }
}

{
  "data": {
    "addMovieToWatch": [
      {
        "watched": false,
        "movie": {
          "title": "Taxi Driver",
          "year": "1976",
          "director": "Martin Scorsese"
        }
      },
      {
        "watched": false,
        "movie": {
          "title": "Die Hard",
          "year": "1988",
          "director": "John McTiernan"
        }
      }
    ]
  }
}

Resolution Framework

Each GraphQL implementation provides it own query resolution framework
GraphQL.js is the reference implementation
Perform query and mutation resolution

Schema (SDL)

type Query {
    getToWatchList: [ToWatch]
}

type Mutation {
    addMovieToWatch(title: String!): [ToWatch]
    removeMovieToWatch(title: String!): [ToWatch]
    markMovieWatched(title: String! watched: Boolean!): [ToWatch]
}

Resolvers

const resolvers = {
    Query: {
        getToWatchList: () => {
            return WatchList.list();
        }
    },

    Mutation: {
        addMovieToWatch(_, {title}) {
            return WatchList.add(title);
        },

        removeMovieToWatch(_, {title}) {
            return WatchList.remove(title);
        },

        markMovieWatched(_, {title, watched}) {
            return WatchList.markWatched(title, watched);
        }
    }
};

Resolvers are also able to resolve dynamically computed fields

Schema (SDL)

type Move {
    title: String
    rating: Float
    poster: String
    actors: String
    director: String 
    year: String
}

type ToWatch {
    movieTitle: String!
    movie: Movie
    watched: Boolean!
}

Resolvers

const resolvers = {
    ToWatch: {
        async movie(toWatch) {
            const info = await fetchMovieInfo(toWatch.movieTitle);
            return info ? {
                title: info.Title,
                rating: info.imdbRating,
                poster: info.Poster,
                year: info.Year,
                actors: info.Actors,
                director: info.Director
            } : null
        }
    }
};

GraphQL + CMS = Peanut Butter + Jelly

Mark Catalano — Wed, 21 Nov 2018 15:46:58 +0000

I recently got the chance to present on the benefits of using GraphQL and Headless CMS to a JAMstack meetup in New York. The event was hosted by The New Dynamic at Postlight Studio.

Headless GraphQL CMS + SSG

TakeShape's combo of Headless + GraphQL + Static Site Generator makes for a pretty sweet CMS for the JAMstack. That's a lot of jargon so I’ll break it down:

Headless

Content is decoupled from presentation. The authoring environment is totally separate and disconnected from the website that your users interact with.
Because your artifact is pre-rendered html, css and JavaScript your experience is more performant, more secure and more scalable.

GraphQL

GraphQL is core to TakeShape. Every time you interact with content on TakeShape you’re interacting with GraphQL

CMS

Some users may feel more comfortable interacting with something visual so we provide an interface for non-technical users to manage content.

Static Content Generator (Static Site Generator)

We built a static site generator that we think of more as a Static content generator. It’s a step lower of an abstraction. You can use TakeShape's static content generator as a way to generate a static website. But we wanted to keep it simple. GraphQL query + Template = html. We let you to bring your own build system to handle JavaScript and CSS however you like.

Model, Create, Develop, Use

Deciding to use GraphQL

There were some pros and cons that we thought about when we were making the decision to build TakeShape around a GraphQL API

Cons

GraphQL was relatively new and not yet widely adopted. It’s first stable release was October 2016 and we started specing out TakeShape in August 2016
Facebook's patent licensing terms that were restrictive. Thankfully that's been resolved.
Rest was so familiar. Could we really convince people to use GraphQL?

Pros

Flashbacks to wrestling REST endpoints to mash up custom data. Trying to tie together multiple APIs or retrieve content from multiple entities at once is tricky. This is exactly why Facebook created GraphQL.
Messing around with curl trying to figure out how an API worked. If you've ever used an API based CMS and you weren’t sure what fields you were going to get back to use in your templates you know this pain.

In the end, it came down to a few things

Like most developers working with new technologies much more than we like working with something old and crufty.
GraphQL drastically reduced the amount of code that we needed to write to actually get the our API working, which meant we could build TakeShape faster.
The self-documenting features of GraphQL drastically simplify the experience of learning how to use TakeShape's API for new developers. And since we were building a tool where everyone’s API would essentially be up to their circumstance and their creativity it was important that learning how to interact with our TakeShape be easier.
Most importantly we were our own guinea pigs. We find GraphQl queries to be easier for people to understand and work with. We knew we wanted to build a CMS that helped people who had similar problems to ourselves and saw the world like we did. It’s nice to look at and easy to understand what’s going on when you’re working with GraphQL.

query {
  homepage {
    title
    image {
        path
    }
}

<html>
<head>
    <title>{{ homepage.title }}</title>
</head>
<body>
    <h1>{{ homepage.title }}</h1>
    <img src="{{ homepage.image.path | image }}"/>
</body>
</html>

How we use GraphQL to build TakeShape

TakeShape is built around a GraphQL API. It’s not just our interface to other Developers. We use it to actually build the application. It’s not a bolt on
TakeShape uses the same GraphQL API that we make available to users to build sites, to power the single page react web client for modeling and content creation, the CLI tool and the Static Content Generator.
It’s how the entire app runs.

Using a GraphQL API to build a GraphQL CMS that provides a GraphQL API. It’s Meta!

How Developers use TakeShape’s GraphQL API

Making requests directly through the GraphQL endpoint
Using the TakeShape Static Content Generator and writing GraphQL query files that retrieve content stored in TakeShape and is used to generate static sites
Or by using Static Site Generators like Gatsby that play well with GraphQL

Interested In Headless GraphQL CMS?
TakeShape is a headless GraphQL CMS that makes building JAMstack sites easier. At TakeShape we're building the best tools for managing content possible for the most creative designers and developers. Our project templates, make it easy to get started. Plus, pricing is downright affordable. Sign up for a free account and spend more time being creative!

Use Gatsby.js And TakeShape To Make Your JAMstack Site Sweeter

Mark Catalano — Fri, 16 Nov 2018 20:42:41 +0000

This is part 4 of our 4 part series. Check out part 1 to get an introduction to TakeShape and learn content modeling and content creation. In part 2, you’ll learn how to create a static site that loads data from TakeShape. In part 3, you’ll learn how to quickly deploy your new static site onto Netlify for a straightforward, secure, and speedy hosting solution.

TLDR: Short-circuit this tutorial and start playing around with the completed site. We won’t be offended! Login and create a new project with “Shape Portfolio” template. Then clone the completed project repo, check out the README.md and start jamming.

> git clone https://github.com/takeshape/takeshape-samples
> cd takeshape-samples/shape-portfolio-gatsbyjs

The Bold And Adventurous Should Continue

You’ve reached the final part of this series, which showed you how to create a static-site portfolio with TakeShape. If you’ve been following along from the start you’re achieved quite a lot! You’ve created a content model and GraphQL API using TakeShape, used TakeShape’s static site generator to load your content into a fully customizable static site, and deployed your static site with Netlify.

In this conclusion, you’re going to take your portfolio site to the next level by learning how to build it with Gatsby.js, a static site generator that layers modern web tools like React.js and Webpack on top of the speedy and secure foundation of a JAMstack website. Gatsby is another great JAMstack tool for generating a JAMstack site with data from GraphQL APIs, especially when it comes to highly-interactive web applications. And TakeShape makes for a wonderful CMS backend for all of your Gatsby sites since every TakeShape project has a GraphQL API that easily integrates with Gatsby.

In this walkthrough, you’ll get started with Gatsby and translate your existing portfolio website into a React-based website. This is the most advanced walkthrough in this series, so if you haven’t already read through the previous articles, we recommended that you at least skim them first.

Hello Gatsby!

Get started by cloning the Gatsby starter project “hello world” and making sure everything works. Install the required libraries and then run the developer site with npm start.

> git clone https://github.com/gatsbyjs/gatsby-starter-hello-world shape-portfolio-gatsbyjs
> cd shape-portfolio-gatsbyjs
> npm install
> npm start

Visit localhost:8000 in your browser to see the starter site running!

Connect Gatsby to TakeShape

Since they’re both built around GraphQL data, Gatsby and TakeShape fit together like Lego bricks. After you provide TakeShape as a datasource to Gatsby, you’ll be able to query your data right from your pages and components.

To start, install the gatsby-source-graphql and dotenv plugins:

> npm install gatsby-source-graphql dotenv

Then create a gatsby-config.js file in the project’s root to configure the plugin:

require("dotenv").config();

module.exports = {
    plugins: [
        {
            resolve: "gatsby-source-graphql",
            options: {
                typeName: "TS",
                fieldName: "takeshape",
                // Url to query from
                url: `https://api.takeshape.io/project/${process.env.TAKESHAPE_PROJECT}/graphql`,
                // HTTP headers
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${process.env.TAKESHAPE_TOKEN}`,
                },
                // Additional options to pass to node-fetch
                fetchOptions: {},
            },
        },
    ]
};

You’ll notice that this configuration uses TAKESHAPE_PROJECT and TAKESHAPE_TOKEN values from our local environment. We’ll keep these values in our environment so that we don’t inadvertently commit these secrets to version control.

The Gatsby starter project should already contain a .gitignore file that includes .env, but you might want to double check, just in case.

Then, create a read-only TakeShape API token and copy your project’s ID from its URL in the TakeShape web client. Finally, create a file named .env in the root of your project that looks like this:

TAKESHAPE_PROJECT=<YOUR-PROJECTS-ID>
TAKESHAPE_TOKEN=<YOUR-API-TOKEN>

Test your connection

Start your Gatsby development server with gatsby develop. As long as the configuration is correct, you’ll see the server start successfully and be able to test your connection to TakeShape with the built-in GraphiQL IDE.

Once the server has started, navigate to http://localhost:8000/___graphql in your browser. You’ll see a page that looks like the API Explorer in TakeShape—because it’s the same software!

Test that you can access your portfolio projects through Gatsby with this GraphQL query:

query {
  takeshape {
    getProjectList {
      total
    }
  }
}

As you type this in, you should see the different fields autocomplete. Then, when you run the query you should see the total number of portfolio projects you’ve created in TakeShape so far. As you can see, Gatsby can easily talk to TakeShape, figure out the schema for your entire project, and let you pull that data right into your Gatsby project.

Now, we can start recreating our portfolio in React!

Migrating from Nunjucks to React

We’ll start by creating pages for each project in your portfolio, then move onto the simpler task of recreating the home and about pages.

But before we do any of that, we need to migrate the base layout and structure over to React!

Layout

First we’ll create a folder named layouts within the src directory of our project. Then we’ll create a file named default.js. You can do this in two commands, from the root of your project:

> mkdir src/layouts && touch src/layouts/default.js

Our default.js layout will be very similar in purpose to the default.html layout in the Nunjucks template you created for your shape-portfolio in part 2, though since it’s built with React, it’ll look slightly different:

import React from "react";
import PropTypes from "prop-types";

import Header from "../components/header";
import Footer from "../components/footer";
import Menu from "../components/menu";
import "./default.css";

const Layout = ({children}) => (
    <>
        <Header siteTitle="Shape Portfolio"/>
        <div className="container">
            <Menu/>
            <div className="main">{children}</div>
            <Footer/>
        </div>
    </>
);

Layout.propTypes = {
    children: PropTypes.node.isRequired
};

export default Layout;

The purpose of this component is to provide a basic layout from which all your pages can inherit. By wrapping your other components with this layout, you can ensure that all the pages in your project maintain a consistent appearance and don’t duplicate any functionality. You’ll make children a required property of the Layout component, since it should always be acting as a wrapper for something else, whether that’s a list of projects, a project itself, or something else entirely.

Next create a default.css file in the same src/layouts directory. You’ll notice that it gets imported right into this default.js file as well. Now you might be saying, “Importing CSS into JS? That’ll never work!” Well since Gatsby comes with Webpack built in, it’ll extract and bundle all your CSS when it’s time to build your site. This has the benefit of letting you keep your styles right alongside your components.

For now, go ahead and copy the main.css styles from the shape-portfolio project into default.css. You won’t be diving into advanced styling in this walkthrough, although the fancier CSS-in-JS techniques that Gatsby supports with additional plugins are worth exploring in more depth.

Header & Footer

In your default.js layout, the Header, Footer, and Menu are all abstracted into standalone components. You’ll start by creating the Header file, which will provide all the the <head> tags for your project.

Start by adding the react-helmet and gatsby-plugin-react-helmet packages to your project:

> npm install react-helmet gatsby-plugin-react-helmet

Then add gatsby-plugin-react-helmet to your list of plugins in your gatsby-config.js file:

module.exports = {
    plugins: [
    'gatsby-plugin-react-helmet',
     {
       resolve: "gatsby-source-graphql",
       …
      }
  ]
}

React Helmet is an easy-to-use component for managing the document head of all of your pages. It will append the <head> tags you provide to the beginning of every page you include it on—and since you’re including it in your default layout, it’ll be included in every page.

In your src directory, create a new components directory and inside it create a new file named header.js that looks like this:

import React from "react";
import Helmet from "react-helmet";

const Header = ({siteTitle}) => (
    <Helmet>
        <html lang="en"/>
        <title>{siteTitle}</title>
        <meta charSet="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link
            href="https://fonts.googleapis.com/css?family=Work+Sans:400,500,600,700"
            rel="stylesheet"
        />
    </Helmet>
);

export default Header;

That’s all it takes to create a Header component, to be imported and used by your default layout.

Next create your site’s footer in src/components/footer.js. This component is simpler:

import React from "react";

const Footer = () => (
    <footer className="footer">
        <p>
            © {new Date().getFullYear()}{" "}
            <a
                href="https://takeshape.io"
                target="_blank"
                rel="noopener noreferrer nofollow"
            >
                TakeShape Inc.
            </a>
        </p>
    </footer>
);

export default Footer;

You’ll notice that this footer contains our first piece of dynamic content: the copyright date will automatically reflect the current year by using the new Date().getFullYear() function. The ability to use JavaScript inside of components is one of the most powerful aspects of React!

The final layout component that you’ll create will also be the first one to query data from your TakeShape project. To enable this functionality, you’ll use the StaticQuery API provided by Gatsby. With StaticQuery, a component can individually request the data that it needs to render. This is a great fit for your Menu component, since it’ll render the same on every page regardless of what other content the page contains.

In order to render images from TakeShape, you’ll also use the getImageUrl API provided by TakeShape’s takeshape-routing package.

First, install the takeshape-routing package:

> npm install takeshape-routing

Then, create a src/components/menu.js component that looks like this:

import React from "react";
import { Link, StaticQuery, graphql } from "gatsby";
import { getImageUrl } from "takeshape-routing";

import routes from "../routes";

const menuQuery = graphql`
  query {
    takeshape {
      projects: getProjectList {
        items {
          name
        }
      }
      about: getAbout {
        socialProfiles {
          profileUrl
          socialNetwork
          socialNetworkIcon {
            path
          }
        }
      }
    }
  }
`;

const Menu = ({ data }) => (
  <nav className="menu">
    <div className="menu__container">
      <p className="site-name">
        <Link to="/">
          <strong>Shape Portfolio</strong>
        </Link>
      </p>
      <ul className="nostyle">
        {data.takeshape.projects.items.map((project, i) => (
          <li key={i}>
            <Link to={routes.project(project.name)}>{project.name}</Link>
          </li>
        ))}
      </ul>
      <hr />
      <Link to="/about">About</Link>
      <ul className="nostyle inline">
        {data.takeshape.about.socialProfiles.map((profile, i) => (
          <li className="social-profile" key={i}>
            <a
              href={profile.profileUrl}
              target="_blank"
              rel="noopener noreferrer"
            >
              <img
                className="social-network-icon"
                src={getImageUrl(profile.socialNetworkIcon.path)}
                alt="Social network icon"
              />
              <span className="social-network-name">
                {profile.socialNetwork}
              </span>
            </a>
          </li>
        ))}
      </ul>
    </div>
  </nav>
);

export default () => (
  <StaticQuery query={menuQuery} render={data => <Menu data={data} />} />
);

The menu consists of two objects: a query for the data we want to include and a component to render it. At the bottom of the file, the two objects get passed to Gatsby’s StaticQuery API, which takes on the work of fetching the data and rendering the component.

The menu also makes use of Gatsby’s Link component. Notice how you use Link to link within your site, as you would link to a project page, while you use a standard anchor to link outside your site, as you would link to a social network. When you use Link, Gatsby can load these new pages dynamically with Javascript, preventing additional page loads. It’s a slick out-of-the-box feature.

Finally, the Link uses the function routes.project to set its destination. You’ll need to create that function yourself. Luckily, that’s the next step!

Project Pages

You’ll want to create a standalone page for every project, so that you can link directly to different projects in your portfolio. But, each page should also be created dynamically, based on data from TakeShape. So how can you go about creating pages dynamically?

First, create a new file named gatsby-node.js in your site’s root directory. This will contain code that’s executed by Gatsby’s build process. You’ll plug-in to Gatsby’s createPages API to create a standalone page for each of your portfolio’s projects.

First create the file:

> touch gatsby-node.js

Then add your function:

const path = require("path");
const routes = require("./src/routes");

exports.createPages = async ({ actions, graphql }) => {
  const { data } = await graphql(`
    query {
      takeshape {
        projects: getProjectList {
          items {
            _id
            name
          }
        }
      }
    }
  `);

  data.takeshape.projects.items.forEach(({ _id, name }) => {
    actions.createPage({
      path: routes.project(name),
      component: path.resolve("./src/components/Project.js"),
      context: {
        projectId: _id
      }
    });
  });
};

This function will first query TakeShape for a list of all the project names and IDs. Then, for each project, you’ll use the actions.createPage API to create its standalone page. Each page will need three things:

A path, which you’ll generate using a routing function using the project’s name.
A component, which you’ll create to render the project’s page.
A context, which you’ll provide to each project page’s individual GraphQL query,

Creating your Project path

You’ll create the function to generate a route for the project. First create a file named routes.js in the src directory and add the slugify package to your project.

> touch src/routes.js  
> npm install slugify

Next, in src/routes.js, add a function for creating routes for your projects based on their names:

const slugify = require("slugify");

exports.project = function(name) {
  const slug = slugify(name.toLowerCase());
  return `/projects/${slug}/`;
};

As you add other dynamically-generated pages to your portfolio, you can add their routing rules to this same file.

Creating your Project component and query

Your component will render the entire project, which you’ll wrap in the Layout component you already created. This will render a complete page for each project!

Start by creating a file named Project.js in your src/components directory that looks like this:

import React from "react";
import { graphql } from "gatsby";
import { getImageUrl } from "takeshape-routing";

import Layout from "../layouts/default";

export const ProjectMetadata = ({ startDate, endDate, client }) => {
  const startYear = new Date(startDate).getFullYear();
  const endYear = endDate ? new Date(endDate).getFullYear() : null;
  const includeEndYear = endYear && startYear !== endYear;
  return (
    <div className="project__metadata">
      <p className="project__metadata">
        {startYear}
        {includeEndYear ? `&endash; ${endYear}` : ""}
      </p>
      {client ? (
        <p>
          <a href={client.url} target="_blank" rel="noopener noreferrer">
            {client.name}
          </a>
        </p>
      ) : (
        ""
      )}
    </div>
  );
};

export const Project = ({ project }) => (
  <article className="project">
    <header>
      {project.coverImage ? (
        <img
          className="project__cover-image"
          alt={project.coverImage.description}
          src={getImageUrl(project.coverImage.path, {
            h: 600,
            w: 1200,
            fit: "crop"
          })}
        />
      ) : (
        ""
      )}
      <h1>{project.name}</h1>
      <ProjectMetadata
        startDate={project.startDate}
        endDate={project.endDate}
        client={project.client}
      />
    </header>
    <div
      className="project__description"
      dangerouslySetInnerHTML={{ __html: project.description }}
    />
  </article>
);

export default ({ data }) => (
  <Layout>
    <Project project={data.takeshape.project} />
  </Layout>
);

export const query = graphql`
  query($projectId: ID!) {
    takeshape {
      project: getProject(_id: $projectId) {
        name
        startDate
        endDate
        coverImage {
          description
          path
        }
        client {
          name
          url
        }
        description: descriptionHtml
      }
    }
  }
`;

Starting from the bottom, this file exports a query for an individual project and component that renders the complete project page, both of which are used by the createPage API. The query accepts the context you provided to the createPage API and fetches data for each Project page. It then provides it to the page with the data parameter. The page wraps the Project component in the Layout component in order to render the complete page.

The Project component in this file provides the logic for actually rendering each project. It also uses a ProjectMetadata subcomponent to handle the logic for formatting the project’s metadata.

Homepage

Your homepage will provide a list of your projects, which we’ll create in a separate reusable component. The homepage will provide its own query for a list of projects, then pass it on to the ProjectList.

The Gatsby starter project you used will already contain a file named index.html in the src/pages directory. src/pages is a special directory in Gatsby: each file in this directory will automatically create its own standalone page, as long as the file exports at least a component.

Update your src/pages/index.html to be like this:

import React from "react";
import { graphql } from "gatsby";

import Layout from "../layouts/default";
import ProjectList from "../components/ProjectList";

const IndexPage = ({ data }) => (
  <Layout>
    <ProjectList projects={data.takeshape.projects} className="main" />
  </Layout>
);

export default IndexPage;

export const query = graphql`
  query {
    takeshape {
      projects: getProjectList {
        items {
          name
          startDate
          coverImage {
            description
            path
          }
        }
      }
    }
  }
`;

Then, create a file named ProjectList.js in your src/components directory and make it look like this:

import React from "react";
import { Link } from "gatsby";
import { getImageUrl } from "takeshape-routing";

import routes from "../routes";

const ProjectListItem = ({ project }) => {
  const startYear = new Date(project.startDate).getFullYear();
  const endYear = project.endDate
    ? new Date(project.endDate).getFullYear()
    : null;
  const includeEndYear = endYear && startYear !== endYear;
  return (
    <Link to={routes.project(project.name)} className="project">
      <img
        className="project__thumbnail"
        src={getImageUrl(project.coverImage.path, {
          h: 200,
          w: 300,
          fit: "crop"
        })}
        alt={project.description}
      />
      <p className="project__name">
        <strong>{project.name}</strong>
      </p>
      <p class="project__metadata">
        {startYear}
        {includeEndYear ? `&endash; ${endYear}` : ""}
      </p>
    </Link>
  );
};

const ProjectList = ({ projects }) => (
  <ul className="nostyle project-list">
    {projects.items.map((project, i) => (
      <li className="project-list--entry" key={i}>
        <ProjectListItem project={project} />
      </li>
    ))}
  </ul>
);

export default ProjectList;

In this file, the ProjectList component renders a set of ProjectListItem components. Each ProjectListItem displays some limited information about the project and links to the Project page you’ve already made. This component doesn’t require a query to be included with it, since it’s not a standalone page and the data is provided by the index.js file that includes it.

At this point, you should be able to run gatsby develop, navigate to http://localhost:8000/, and see a list of projects. Clicking on any one of them should take you to that project’s page. It’s alive!

About and 404 Pages

Finally, you’ll finish off by creating a standalone About page and a standalone 404 page. For the about page, you can create a file about.js in src/pages that looks like this:

import React from "react";
import { graphql } from "gatsby";
import { getImageUrl } from "takeshape-routing";

import Layout from "../layouts/default";

const AboutPage = ({ data }) => (
  <Layout>
    <article className="about">
      <img
        className="about__portrait"
        src={getImageUrl(data.takeshape.about.portrait.path, {
          h: 150,
          w: 150,
          fit: "crop"
        })}
      />
      <div
        className="about__biography"
        dangerouslySetInnerHTML={{ __html: data.takeshape.about.biography }}
      />
    </article>
  </Layout>
);

export default AboutPage;

export const query = graphql`
  query {
    takeshape {
      about: getAbout {
        biography: biographyHtml
        portrait {
          title
          description
          path
        }
      }
    }
  }
`;

The file should export your AboutPage component and a query so that the page can render on its own.

For the 404 page, you’ll just wrap a few lines with your Layout component and call it a day:

import React from "react";
import Layout from "../layouts/default";

const NotFoundPage = () => (
  <Layout>
    <h1>NOT FOUND</h1>
    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
  </Layout>
);

export default NotFoundPage;

Preview your production site

Running gatsby develop lets you run a development-friendly version of your site, with neat features like hot-reloading of components when you make changes.

To preview what your site will look like in production, you can use the gatsby build and gatsby serve commands:

After running gatsby build, your website will be compiled and saved into a folder named public at the top of your project.
After running gatsby serve, you can visit your production preview at localhost:9000 in your browser.

Deploy your fancy new site to Netlify

Now that your project is completed, it’s time to get it online! By using Gatsby, you’ll be circumventing TakeShape’s built-in static site generator, so you will need to set up your deployment system manually using a combination of Netlify’s continuous integration features and TakeShape’s webhooks functionality.

First make sure that your project is hosted in a remote Git repository, like on GitHub. Then create a New site from Git from the Netlify sites page. Authorize Netlify to access your project’s repository, then use the default build configuration. Netlify should automatically recognize that you’re using Gatsby as your static site generator and configure your build settings correctly. Then click Deploy Site.

Your first Deploy should fail. That’s ok! You haven’t added your TAKESHAPE_PROJECT and TAKESHAPE_TOKEN settings to your environment in TakeShape, so you should expect it to fail.

To fix this, go to your Netlify site’s settings and go to the “Build & Deploy” section. From there, you can edit your “Build environment variables” to securely add your TakeShape credentials. Click Edit variables and then add your variables for TAKESHAPE_PROJECT and TAKESHAPE_TOKEN. Click Save.

Then, go to your site’s Deploy section and click Trigger deploy. You’ll watch your deployment script run and log messages as it goes. At the end, you should see success messages and finally a declaration that your “Site is live”! Congrats!!! 🎉 If you go back to your site’s overview, you should see a link to your newly live site.

Finally you’ll want to set up a Build webhook (Webhooks are available on all paid TakeShape plans) so that you can tell Netlify to rebuild your site when you create, update, or delete your content in TakeShape. Back in your Netlify site’s “Build & Deploy” settings, look for the section labelled “Build hooks”. Click Add build hook, give it a name like “TakeShape”, click Save, and then copy the URL that gets created for you.

Then, in TakeShape, navigate to your project’s webhook settings in Project Settings > Webhooks. Configure a new webhook so that the URL you just copied is the Webhook URL and the Resources that trigger it are Content: *. And make sure you check the Create, Update, and Delete actions. Leave the Secret field blank and click Save.

Now, whenever you create a new content object, update an existing one, or delete a content object, it’ll trigger a new build of your site in Netlify. This way, your site is always up-to-date with your TakeShape project.

Conclusion

If you’ve made it this far, congratulations! You dove head-first into the JAMstack and survived. Hopefully, you now have a strong understanding of the power of a configurable CMS, an automatically-generated GraphQL API, and a powerful React-powered static site. JAMstack is the future of web development and you’re now at the cutting edge.

If you have any feedback, comments, or questions on our series, don’t hesitate to reach out. Your feedback is always welcome through our in-app live chat or via support@takeshape.io.

Interested In Headless CMS For Gatsby.js?

TakeShape is a headless GraphQL CMS that makes building JAMstack with Gatsby easier. At TakeShape we're building the best tools for managing content possible for the most creative designers and developers. Our project templates, make it easy to get started. Plus, pricing is downright affordable. Sign up for a free account and spend more time being creative!

🍯 Two Awesome Days at JAMstack Conf 2018!

Mark Catalano — Thu, 01 Nov 2018 18:54:05 +0000

My co-founder at TakeShape and I spent 2 days at JAMstack Conf 2018 in San Francisco. Here's my debrief of the event.

TLDR: We're very much looking forward to JAMstack conf 2019! Did you go to JAMstack Conf? I'd love to hear about other people's experiences in the comments!

What is the JAMstack 🍯? The JAMstack is JavaScript, APIs and Markup. The short of it is the JAMstack is probably what you've been doing for a while, just with an awesome name!

The first time I heard the term JAMstack was probably in 2015 reading "What is the JAMstack?", on Netlify's blog. A few weeks prior Matt Biilmann, founder of Netlify wrote a piece for Smashing Magazine titled "Why Static Site Generators Are The Next Big Thing" that explored the ideas behind JAMstack without using the word itself. On stage at JAMstack Conf 2018, Matt talked about where the JAMstack name came from. Like most great ideas, turns out it was a few friends sitting around their living room tossing around ideas.

I'm a front-end developer by trade and I fell in love with the term JAMstack the moment I heard it. As a front-end developer JAMstack is empowering. It gives you a framework to take your ideas all the way from front-end to what used to be the domain of the backend-developer. During his talk at JAMstack conf a very animated and energetic Chris Coyier proclaimed "I'm a front end developer and I don't need anybody...!" Bam!

The Conference

// Detect dark theme var iframe = document.getElementById('tweet-1057015887654412288-917'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1057015887654412288&theme=dark" }

Attending the JAMstack conference felt, as Bud Parr from The New Dynamic put it, like coming home. Netlify may have coined the term, but it's clear that a community is growing around the JAMstack. The conference was perfectly sized, around 150 people attended the Agency day on day 1 and 300 people attended the main track on day 2. It felt like you could meet everyone, and I think I tried to do just that. There was a high level of camaraderie and friendliness all around and everyone was friendly and eager to learn. Phil Hawkwsorth, M.C. for the event, put together an incredible lineup of speakers. I really can't say enough good things the experience. I hope Netlify will repeat the event next year and I can't wait to see how the ideas presented at the conference start to spread.

// Detect dark theme var iframe = document.getElementById('tweet-1057786682609672193-853'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1057786682609672193&theme=dark" }

Hot Takeaways

My quick takeaways 🔥 from each talk.

Day 1 - Agency Day

Matt Biilmann, How we talk about the JAMstack
JAMstack is graduating into the common developer vernacular.

Thomas Reynolds, The 3 types of clients you’ll need to convince
Technical Design Document Template from Microsoft. This would have been handy to have in my agency life.

Tim Fogarty, Finding the best home for your data
Don't bother standing up your own DB infrastructure, even on AWS, unless it's somehow going to be a differentiator. Learn from Gitlab's mistakes.

Taylor Gilbert, 3 truths that you can bet the next 5 years on
Holy moly a lot of big agencies are getting into JAMstack. 50% of the agencies in Gartner's magic quadrant are adopting JAMstack approaches over traditional monolithic stacks in order to deliver "best in class service stacks".

Great quote form Jeff Bezos:
"I very frequently get the question: 'What's going to change in the next 10 years?' And that is a very interesting question; it's a very common one. I almost never get the question: 'What's not going to change in the next 10 years?."

Day 1 - Lightning Talks

Zoltan Olah, Turning design into code the painless way
Check out adding Storybook for our TakeShape product development process

Eric Gardner, Building books from static sites: Digital (and print) publishing with the JAMstack

How can I get my fiancé to use Quire to publish her dissertation in Art History?

Tanmai Gopal, How to setup production-ready automation for database change to JAMstack deployment
Note to self, next time I present to a group, be more high energy and try to come up with more witty punch lines. Also check out Hasura

Bud Parr, Go Go Hugo!
How is Hugo so fast?

Steve Gardner, Make more pointless things
Practice doing lots of little creative projects. You get the benefit of compounding interest on your knowledge and skills. And you gain confidence to tackle the larger projects that once seemed daunting. This talk was soo well paced and crammed so much into 10 minutes. It made me want to go out and start making things right away.

Day 2 - Main Track

Monica Dinculescu, Bet you didn’t think your browser could do that
Holy Moly IBM plex looks great!

// Detect dark theme var iframe = document.getElementById('tweet-1057331736068014080-406'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1057331736068014080&theme=dark" }

Prateek Bahatnagar, Supercharged PWAs with Preact-cli
Lots of opportunity to optimizing TakeShape's web client. Gotta reach for that 💯 on Lighthouse.

Jessica Lord, Everyone is a Developer
Reminder to read "How to Design Programs" as a bedtime story to my future child.

Chris Coyier, The All-Powerful Front-End Developer
⚡⚡⚡⚡⚡ SO MUCH ENERGY ⚡⚡⚡⚡ For me this talk was the most empowering of the day.

Simona Cotin, Build scalable APIs using GraphQL and Serverless
Why use GraphQL? Increases performance. Query only the data you need. Increased flexibility. Tooling is fantastic. GraphQL helps you create single interface over many Serverless functions.

Quincy Larson, How freeCodeCamp.org serves millions of learners using the JAMstack
Learned to code in his 30s and now teaches millions of people to code all over the world for free. I'm not doing nearly enough with my life.

Wes Bos & Scott Tolinski, Syntax FM Live
Live podcasts are so much fun!

How To Know If You're Already On The JAMstack

You building things for the web?
You crave perf.
You're building amazing dynamic interfaces with vanilla JavaScript / react / vue
You agree with the following statement: Pre-rendering markup and putting it on a CDN is awesome You know that using static site generator doesn't mean building a boring experience. It means you get to build a kick ass site and not deal with a bunch of baloney like how to set up a LAMP stack
You laugh at the idea of spinning up an EC2 instance and use Serverless functions like a civilized person.
Bonus points - When you hear headless CMS you think "Sweet, no more WordPress!", instead of thinking of a horseman.

The JAMstack site has a less silly definition.

I'm A JAMstack Believer

I've bought into the benefits of JAMstack. I want sites to be fast. I want to be able to assemble projects using best-in-class services, not just what a particular platform supports. I want to spend more time creating and less time dealing with backends. I think enabling more people to create better things is how we grow an even more interconnected community. I believe in the JAMstack so much that I co-founded a company, TakeShape a headless GraphQL CMS, to help people create more things with a JAMstack approach.

Looking For A Headless CMS?

TakeShape is a headless GraphQL CMS and static site generator for building JAMstack websites. At TakeShape we're building the best tools possible for managing content, for the most creative designers and developers.Sign up for a free account and spend more time being creative with the JAMstack!

Publish A JAMstack Site To Netlify In Less Than 2 Minutes With TakeShape

Mark Catalano — Mon, 29 Oct 2018 10:48:40 +0000

In part 3 of this 4 part series, you'll learn how to publish a static site to Netlify

This is part 3 of a 4 part series about building a portfolio with Takeshape. Check out part 1 to learn how to model and create content. Part 2 shows you how to create a static site that loads data from TakeShape. In part 4 (coming soon) you’ll extend your skills even further and learn how to build a React-based static site with TakeShape and Gatsby.js.

If you’ve been following along with the series, you already have a flexible content model in TakeShape and a static site that works with it. Now, you’ll learn how to use Netlify with TakeShape to deploy your live site in as few as 2 minutes. Here's a demo of what you'll be deploying. With 1-click integration, TakeShape makes it easy to get your new site live, running on a CDN and using HTTPS.

If you’re just joining, don’t worry. You can catch up quickly by signing up for a free TakeShape account, creating a template “Shape Portfolio” project, and cloning the “takeshape-samples” repository from GitHub. After creating your template project, open your terminal to clone and access the sample repo with the command git clone https://github.com/takeshape/takeshape-samples.git takeshape-samples && cd takeshape-samples/shape-portfolio. Now we’re all on the same page!

TakeShape and Netlify go together like Peanut Butter and Jelly

Before getting started with the rest of the walkthrough, here’s a quick primer on why TakeShape and Netlify make such a delicious JAMstack sandwich with your content at the center.

Netlify is a powerful and easy-to-use platform for deploying, maintaining, and upgrading your static site. Out of the box, Netlify provides robust hosting, continuous integration tools, and default security with automatic HTTPS. As your site grows, Netlify helps remove many of the obstacles static sites face early on. They’ll provide you with endpoints for form submissions, serverless functions, and even let you manage user identities. Put simply, they give you all the pluses of going static with none of the minuses.

Even better, TakeShape is built to integrate directly with Netlify. With a 1-click integration, you can quickly set up a static site publishing target for your TakeShape project and get your new project live within minutes. With TakeShape handling your content and Netlify hosting your site, you’re free to focus on what matters: your content and your code.

Connect your TakeShape project to Netlify

Now, you’ll put these bold claims to the test by integrating your TakeShape project with Netlify. You’ll quickly see that it lives up to the hype!

Start by either logging in or signing up for an account with Netlify. You can do this for free and even use your existing GitHub, GitLab, or BitBucket account.

TakeShape already provides some comprehensive instructions to configure Netlify on your project, so we’ll keep this brief.

First, go to Project Settings > Integrations and link your Netlify account with your TakeShape project. Then, go to Static Sites and create a new static site. Name it whatever is appropriate and choose Netlify as the provider. Then, for the destination, choose + Create a New Static Site. Both the “Name” and “Password” fields are optional. If you don’t choose a name Netlify will generate one for you automatically. You can edit the name and password later from the Netlify admin. Finally, click Save.

Poof! Wasn’t that easy?

Deploy your static site to Netlify

Your site templates will make the following journey:

Local Dev Environment > TakeShape Environment > Netlify Hosting

Now that you’ve got TakeShape and Netlify talking to one another, you’re all ready to deploy your site using the CLI. Deploying your site will upload your templates and configuration to TakeShape’s cloud environment so that you can build and publish your project before uploading it to Netlify.

In your terminal, cd to the folder with your TakeShape project on your local machine. Next, you’ll re-initialize your TakeShape project with npm run init, input your TakeShape username and password, and choose your newly configured “Netlify” static site as the deploy destination. You should see the newly generated files .graphqlrc, .tsgrc, and graphql.config.json, as well as a success message and a warning to not add these files to your version control.

Now, for the moment of truth. Run npm run deploy. If everything goes okay, you’ll see a success message. If things don’t go as expected read the output of the error message in the terminal closely to try to debug the problem.

Bonus points: Set up continuous integration with Netlify
Since Netlify has built-in continuous integration, it’s possible to set up your site to automatically deploy when you push new commits to a branch if your project lives in GitHub, GitLab, or BitBucket. TakeShape has provided a simple guide to get that set up and working, and it can really be a boost to your productivity when building out your site.

Publish from the web

When you deploy your site from the CLI, TakeShape will publish it once automatically. If you add or change your project’s content, you can publish the changes right from the TakeShape web client by selecting “Publish [your static site name] in the project menu dropdown.

From the project menu, when you select “Publish Netlify,” TakeShape will start building a new version of your project and uploading it to Netlify. You’ll see a success message within a second or two.

And that’s all there is to it! As you can see, TakeShape and Netlify compliment one another beautifully. In just a few minutes, you can have a secure, fast, and fully-customizable static site.

Next steps

Really, we could stop right here, since you’ve got a static website working beautifully with TakeShape and Netlify. But in the final part of our walkthrough, we’re going to kick it up a notch, as Emeril Lagasse says. We’ll show you how to take your static site to the next level. You’ll unlock new levels of power and flexibility by using Gatsby.js as your static site generator to build your portfolio using React components. So exciting!

Interested in CMS For Static Websites?

TakeShape is a headless GraphQL CMS and static site generator for building JAMstack websites. At TakeShape we're building the best tools for managing content possible for the most creative designers and developers. Our project templates, make it easy to get started. Plus, pricing is downright affordable. Sign up for a free account and spend more time being creative!

How To Build A JAMstack Website With TakeShape

Mark Catalano — Wed, 24 Oct 2018 21:17:26 +0000

In part 2 of this 4 part series, you'll learn how to use a headless cms to build a static site.

This is part 2 of the 4 part series. Check out part 1 to get an introduction to TakeShape and learn content modeling and content creation. In part 3 (coming soon) you’ll learn how to deploy your static site to Netlify. In part 4 (coming soon) you’ll extend your skills even further and learn how to use TakeShape with Gatsby.js.

In part 1 you learned how to model and create content and making it available through TakeShape’s GraphQL API. Now you’ll learn how to use TakeShape’s static site generator in combination with that API to quickly create a JAMstack website. You’ll create and configure a TakeShape static site on your local machine, write GraphQL query files and use data returned from those queries in HTML templates.

If you want to skip setting up your static site from scratch, you can grab the “Shape Portfolio” sample template as a starting point. Simply run the command git clone https://github.com/takeshape/takeshape-samples.git && cd takeshape-samples/shape-portfolio. This will download a static site repo that’s pre-configured to work with the “Shape Portfolio” template in TakeShape. This repo has a more complex, styled, and scripted version of what we just built together. It might give you some inspiration and guidance on where to take your portfolio next.

If you decided to stay, we’ll be building that same shape-portfolio static site from scratch so you can learn how it works. Ready, set, go!

Hello Portfolio

You’re going to start by cloning the blank-project template from Github, this will provide you with a bare-bones TakeShape setup. First, clone the repository to your computer, then copy the blank-project out into a new folder, and finally remove the cloned repo since you don’t need anything else from it. In your terminal, it looks like this:

> git clone https://github.com/takeshape/takeshape-samples.git
> cp -r takeshape-samples/blank-project/ shape-portfolio
> rm -rf takeshape-samples

Then you’ll enter the newly copied project folder, install the required software needed to run the project with npm, and initialize it with the TakeShape configuration:

> cd shape-portfolio
> npm install
> npm run init

Running init will establish the connection between your local development environment and the TakeShape service. You’ll be prompted to make several sections to configure your environment. The first prompt will be for your TakeShape credentials. Input your TakeShape account email and password, then use the arrow keys to select your portfolio project. You’ll get a reminder about not having any sites set up yet (don’t worry, we’ll get to that in Part 3).

The initialization creates two files, .tsgrc and graphql.config.json. These are already in your project’s .gitignore file because you started with the blank-project template.

You can now test that everything’s been set up correctly by running npm start. If everything goes as expected, your default browser will open to localhost:5000 and display the blank-template page. Hooray! You’ve just run TakeShape from your local machine. Now it’s time to start hacking on your portfolio 🤓. If you get an error or aren’t able to load the site read any error messages that are output to the terminal to debug the problem.

Project Structure

By cloning the blank-project template, you’ve been provided with some of the basic files and folders that TakeShape expects. We’ll explain a bit more about each of them now.

Configuration

At the root of your project is a file called tsg.yml. It holds the configuration for your project and it’s the best place to start. Here’s what’s in tsg.yml:

templatePath: src/templates
staticPath: static
buildPath: build

routes:
  homepage:
    path: /
    template: pages/index.html

At the top is the templatePath variable, which tells TakeShape where to look for template files when building your project.
Next is the staticPath variable, which tells TakeShape where to look for files like stylesheets, scripts, and static images like favicons.
After that is the buildPath variable, which is where TakeShape will place your project after it’s been built.
Finally, there’s the routes variable. Each child of this variables configures the routing rules of your project. Right now we only have the homepage route, which specifies the routing path (the index path, in this case) and what template file the route should use. Templates are all relative to the templatePath set at the top of the file.

There are more complex ways to build routes, including dynamic variables that comes from the content you’ve created in TakeShape. We’ll get to this in a moment. First, let’s take a look at the templates you’re going to use.

Template Files

By default, TakeShape uses the Nunjucks templating system.

The src/templates folder contains three starter subdirectories: data, layouts, pages. data contains GraphQL query files that retrieve content from the TakeShape API. pages contains individual unique page templates. layouts contains a base template that other templates extend. Inside layouts is a starter layout template called default.html, which looks like this:

<!doctype html>

<html>
<head>
  <title>Blank Project - TakeShape</title>

  <meta charset="utf-8">

  <link rel="stylesheet" href="/stylesheets/main.css"/>
  <link rel="author" href="humans.txt"/>
</head>

<body>

<div class="main">
  {% block content %}{% endblock %}
</div>

<script src="/javascripts/main.js"></script>
</body>
</html>

As you can see, this provides the basis for other pages to wrap themselves in the layout by using Nunjuck’s extend functionality. Extending is accomplished by using the using {% extends "layouts/default.html" %} and {% block %} tags.

In pages/index.html you can see how this template extends the default layout:

{% extends "layouts/default.html" %}

{% block content %}
  <h1>Blank Project Template For TakeShape</h1>
{% endblock %}

With these basic foundations, you can build plenty of pages with minimal repetition.

Static Files

Finally, we’ll take a quick look at static files like stylesheets and scripts. The starting default.html template above already links to the files /stylesheets/main.css and /javascripts/main.js. You’ll find these files in the top-level static directory.

Building your portfolio

Homepage

Now that you know how everything fits together, you can start customizing your homepage to create an amazing portfolio!

First, you’ll want to display your projects on your homepage. To do this, you’ll need to add some data to the homepage route, write a query, and then render the data on the homepage. To add data to the route, you’ll update your homepage route configuration in tag.yml to look like this:

routes:
  homepage:
    path: /
    template: pages/index.html
    context: data/projects.graphql

Then create a projects.graphql file in the src/templates/data directory. In this file, you’re going to craft the query for your project data that’s sent to the TakeShape API. As long as you set up your Project content type following the pattern in Part 1, your file should look like this:

query {
 projects: getProjectList {
   items {
     name
     coverImage {
       path
     }
   }
 }
}

Now, you can use projects as a variable in our homepage template in order to render a list of all projects on the homepage. In pages/index.html you’ll update it to look like this:

{% extends "layouts/default.html" %}

{% block content %}
<ul>
  {% for project in projects.items %}
  <li>
      <img src="{{project.coverImage.path|image({h: 200, w: 300, fit: 'crop'})}}">
      <p><strong>{{project.name}}</strong></p>
  </li>
  {% endfor %}
</ul>
{% endblock %}

For the cover image, note the image filter being applied to the image’s path. TakeShape users get to host their images on imgix, an amazing and powerful image CDN, for free! The image filter is a special TakeShape filter that accepts IMGIX filter parameters and returns the imgix URL for the image. We’ve set a custom height and width on the image and we’ve told imgix to crop the image to fit these dimensions. All the potential options are listed on imgix’s comprehensive API documentation.

Standalone project pages

Next, you’ll want to create standalone pages for your projects so that you can provide more detail about each one and link to projects directly.

To get started, update your tsg.yml configuration with a new route for project pages:

  project:
    path: /projects/:name/
    template: pages/project.html
    paginate:
      data: data/projects.graphql
      itemName: project

This is a little more complex than our last route, so let’s break it down:

The path uses the variable :name in order to render a unique URL for each project page. This variable comes right from the query we’re using in the paginate variable.
paginate tells TakeShape how to split up the data from the projects.graphql query we created earlier into individual pages. In this case, each item in the query will get its own page. itemName sets the variable that refers to each paginated item. In this case, we’ll access data from a variable named project.

Next, you’ll want to add a few more fields to the projects.graphql query so that you can present more information about each project on its standalone page. Update your query to look like this:

query {
  projects: getProjectList {
    items {
      name
      startDate
      endDate
      coverImage {
        path
      }
      descriptionHtml
      client {
        name
        url
      }
    }
  }
}

Pretty straightforward! Think you’re getting the hang of building a site in TakeShape? Remember, you can explore the API for your entire project in TakeShape’s web interface. It’s really handy when writing queries yourself.

Now, you can create the pages/project.html template to render out the project data into HTML. Here’s what that will look like:

{% extends "layouts/default.html" %}

{% block content %}
<article class="project">
  <header>
    <img class="project__cover-image" src="{{project.coverImage.path|image({h: 600, w: 1200, fit: 'crop'})}}">
    <h1>{{project.name}}</h1>
    <div class="project__metadata">
    <p>{{project.startDate|date('YYYY')}}{% if project.endDate %} – {{project.endDate|date('YYYY')}}{% endif %}</p>
    {% if project.client %}
    <p><a href="{{project.client.url}}">{{project.client.name}}</a></p>
    {% endif %}
    </div>
  </header>
  <div class="project__description">{{project.descriptionHtml|safe}}</div>
</article>
{% endblock %}

This is pretty straightforward, too! Notice how the built-in TakeShape date filter is being used to format the start and end dates of your project so only the year is displayed. Also, notice that the safe filter must be applied to the project description. This is because it’s output from the TakeShape API as raw HTML.

Now that each of your projects has a page, you want to be able to link to individual projects from your homepage. On the homepage template, wrap each project list item with an anchor tag <a href="{{project|route('project')}}">. It should look like this:

{% extends "layouts/default.html" %}

{% block content %}
<ul>
  {% for project in projects.items %}
  <li>
    <a href="{{project|route('project')}}" title="{{project.name}}">
    <img src="{{project.coverImage.path|image({h: 200, w: 300, fit: 'crop'})}}">
    <p><strong>{{project.name}}</strong></p>
    </a>
  </li>
  {% endfor %}
</ul>
{% endblock %}

route is another special TakeShape filter. If you have a route defined for an object, like the one that defined a dynamic path for the project pages, then the route filter will return the route for that item. It’s pretty handy! Just refer to the name of the route as it appears in your tsg.yml and you’ll be good to go!

Now, if you run npm start in your terminal, the website should build successfully. You will see a homepage with a list of your projects and you should be able to click through to each one.

For a next step, you can try creating an About page using your biography, or a page that lists all of your clients. Make sure to check out TakeShape’s documentation if you get stuck writing your configuration or templates.

Next Steps

In part 3 we’ll take the static site you just created and deploy it to Netlify! In just a few steps, you’ll be able to deploy your site to Netlify’s CDN and host your page on a secure HTTPS connection. How cool is that?

Until then, keep hacking!

Interested in JAMstack CMS?

JavaScript, APIs, and Markup, are the JAMStack. TakeShape is a headless GraphQL CMS and static site generator for building JAMstack websites. At TakeShape we're committed to building the best CMS tools possible for the most creative designers and developers. With our project templates, it's easy to get started. Plus, pricing is flexible and affordable. Sign up for a free account and spend more time being creative!

How To Build A Design Portfolio With TakeShape

Mark Catalano — Mon, 22 Oct 2018 14:46:46 +0000

In part 1 of this 4 part series, you'll learn to model and create content with TakeShape

This is part 1 of a 4 part series. In part 1, we’ll start by creating a new project in TakeShape, modeling some basic content types, and then filling them in. In part 2, we’ll use TakeShape’s static site generator to create the HTML and CSS for the final website. In part 3 (coming soon) we’ll deploy the static site to Netlify. In part 4 (coming soon) you’ll extend your skills even further and learn how to use TakeShape with Gatsby.js.

Every web designer needs to have a great portfolio. While services like Squarespace make it easy to build a website using a cookie cutter template, the results all start to look the same. Yet when you design websites for a living, your portfolio should do more than simply catalogue your projects; it should itself demonstrate your craft.

This is where TakeShape comes in! TakeShape is a flexible and easy to use tool that will let you focus on perfecting the unique design of your portfolio instead of wrestling with a server or debugging a database. With TakeShape you can perfect your portfolio in no time at all. Let's get started!

Sign Up For A TakeShape Account

If you don’t have a TakeShape account yet, start by signing up. If you already have an account, log in.

Create A New Blank TakeShape Project

After you log in, create a new project using by selecting the Blank Project template. Then, give your new project a name.

Note If you want to skip ahead to Part 2 and begin building the static website, you can choose the “Shape Portfolio” template instead. We’ll keep going from the blank project so you can see how it’s built.

Create A Content Type

Since the main purpose of your portfolio is to show off your design projects, we’ll start by creating a content type for them.

Click the Add Content Type button in the bottom left of the sidebar, just above your username. You’ll be taken to the “New Content Type” screen. Every content type has a few basic fields you need to fill in before you can start modeling your content.

![TakeShape New Content Type Page](https://thepracticaldev.s3.amazonaws.com/i/xkc9lbr05q6jpheb6eeh.png_

Title is the human-readable name of your content type. As a best practice, content type titles in TakeShape should be singular, not plural. We’ll name this type “Project”.
Name is how your content type will be named in TakeShape’s GraphQL API. Once you’ve given your content type a title, the name will fill in automatically. (But it can also be modified independently.)
Description is an optional, but extremely helpful, field—especially if your content type uses a generic name like “Project.”
Finally, we’ll keep the Annotation as “Multiple” since we want to include multiple projects in our portfolio. (We’ll create content types with other kinds of Annotation later on.)

Now we can start modeling our Project content type in order to create the fields that every one of your projects will have. TakeShape’s drag-and-drop interface makes it easy to quickly add a variety of fields, creating a rich content type that’s exactly suited to your needs and can be updated if your needs change.

To begin, add the following widgets from the left sidebar by dragging them to the drop zone and configuring them as follows:

Single Line: In the Title field enter “Name” and check the “Required” box. This needs to be a plain text string because later on you’ll use it to generate the URLs for each project page.
Date: In the Title field enter “Start Date” and check the “Required” box. This will allow you to sort your projects chronologically.
Date: In the Title field enter “End Date.” This is an optional field, which will indicate whether you have completed your project or not.
Asset: In the Title field enter “Cover Image.” This is an optional field, which will visually represent your project in lists and on the project page.
Block Canvas: In the Title field enter “Description.” This is an optional field, which will allow you to compose your project’s description with rich text and formatting.

Once you’ve finished adding these widgets, click the Create Content Type button to save your new type. After you save, you’ll be taken to the (empty) “Project” page.

Add The First Project To Your Portfolio

Now you can add your projects to your portfolio! Click the green New Project button at the top right.

You’ll see that all the widgets you dragged into the content type now appear as fields ready to accept information. You can give your project a Name, a Start Date, an (optional) End Date, a Cover Image, and a longer Description.

You’ll notice a few fields provide special interfaces for editing their information. For example, when setting the Start Date, a calendar-based date selector will appear. And when adding a Cover Image, the “Asset Library” will slide over from the right. You can upload new images by dragging-and-dropping them into this slide-over; then you can drag-and-drop these images from the “Asset Library” slide-over into the Cover Image field. Finally, the Description field has easy-to-use editing tools that appear when you need them, like when you highlight text or start a new paragraph.

When you’re done adding content, click the green Save button to save the content and return to the list of projects. If you click the down arrow [⌄] next to Save, you’ll see the option “Save and Continue,” which will save the content without returning to the list.

Create The About Page

Next, we want to create an “About” page so you can share a little more information about yourself.

Just like when you created the project content type, click the Add Content Type button in the bottom left of the sidebar, just above your username. Give the content type a Title (in this case, “About”) and you’ll see the Name field automatically populate. You can give it a Description if you’d like. Finally, make sure the Annotation is set to “Single” since you’ll only need one page of this type.

Now, you can add additional fields for your “About” page by dragging-and-dropping some widgets from the left sidebar:

Block Canvas: In the Title field enter “Biography.” This is an optional field where you can share a little more information about who you are.
Asset: In the Title field enter “Portrait.” This is an optional field, which you’ll use to save a flattering headshot.
Repeater: In the Title field enter “Social Profiles.” The Repeater widget is a little different from other widgets since you put other widgets inside of it. This will let you save several of your social profiles on your “About” page, all with identical fields. Drag-and-drop the following widgets into the Repeater’s drop zone:
- Single Line: In the Title field enter “Profile URL” and check the “Required” box.
- Single Line: In the Title field enter “Social Network” and check the “Required” box.
- Asset: In the Title field enter “Social Network Icon.” This will be an optional field.

When you’re all done, click the green Save Content Type button. You’ll then be taken to your blank “About” page.

Edit The About Page

Editing the content of the “About” page is the same as creating a “Project” page and filling in the fields. In Biography, tell the world your story with rich links, headings, images, and embeds. Upload your handsome mug to the Portrait field. And link to all your social networks using Social Profiles repeater. Since repeaters are new in this walkthrough, we’ll spend a moment on its unique interface.

New repeater entries can be created by clicking on the round plus [+] button. Repeater entries can be edited just like any other field and assets like the Social Network Icon field present the same interface as anywhere else. A special feature of repeater elements is that they can be rearranged, expanded and collapsed. At the top of the repeater field, you can expand-all or collapse-all of the entries with a single click. Play around with the repeater and get a feel for it; it’s a big part of what makes modeling content in TakeShape so powerful.

When you’re done editing the “About” page, click the green Save button. Since the “About” page is a single content type, you won’t be taken back to any kind of list after saving. You’ll stay right on the same content type since it’s the only one of its kind!

Create a Client Taxonomy Content Type

Your design portfolio will include work for a few different clients so you’ll want be able to organize your projects by client. To do this, create a Client Taxonomy content type. Taxonomies are a special Annotation in TakeShape that allows you to easily sort and filter collections.

To create this new content type, follow the same steps as before. Start by clicking the green Add Content Type button at the bottom of the left-hand sidebar. Give your new content type a Title (“Client”), let the Name auto-populate, and then give it a Description like “Clients commission the projects in my portfolio.” Then, change the Annotation from “Multiple” to “Taxonomy.” Finally, add three widgets to the content type:

Single Line Text: In the Title field enter “Name” and check the “Required” box.
Single Line Text: In the Title field enter “URL” and check the “Required” box.
Asset: In the Title field enter “Logo.” This is an optional field.

Then, click the green Save Content Type button. You’ll be taken to an empty list of clients.

Add Clients

Editing a Taxonomy is the same as editing a Multiple content type. Click the Add Client button from the top of the “Client” page. Fill in the available fields, adding your client’s Name, URL, and Logo.

Then save your changes to be taken back to the list of clients. If you’d like to create a bunch of clients without being taken back to the list view each time, you can click Save and add another.

Relate Clients to Projects

There’s one last step to take: you’ll need to update the Project content type to allow clients to be added to projects. On the left sidebar, you should see the list of content types you created. Click the gear icon [⚙] next to the “Project” entry to edit this content type. Drag in a Relationship widget. Give it a Title (“Client”) and a Description, then set the following:

Set Relationship Type to “Single.” If you want to be able to add multiple clients to a project, choose “Multiple” instead.
Set Allowed Content Types to “Client.”
Set Reverse Name to “projects.”

Click the green Update Content Type button.

When you’re ready to add a client to a project, you can search the clients you’ve already created or add a new one. When creating a new client you’ll only be able to edit its required fields, like Name and URL. You can update other client fields, like Logo, after it’s been created.

Finally, when your projects have been associated with clients, you can filter your list of projects by searching for the client’s name in the Filter field at the top of the page. Thanks, Taxonomies!

Now you can create projects and clients, associate them with each other, and organize your portfolio.

Surprise, You Also Built A GraphQL API!

Now that you’ve modeled your content and created some entries, you can see the API that TakeShape has automatically generated for you. Open your “Project” page from the left sidebar and select any project from the list. Once you’re in the content editor, click the button labelled View in API Explorer on the right side-bar to view the API query. Once the “API Explorer” window is open, click the Play button to see the results for querying for this piece of content. You can also enter the “API Explorer” at any time by choosing it from the drop-down navigation menu at the top of the sidebar.

Create A Static Site

Now that you have a customized CMS for your portfolio project you can easily update your projects and clients. In part 2 you'll create a unique static website to display your projects.

Interested in Creative Tools to Build Custom Websites?

TakeShape is a headless GraphQL CMS and static site generator. At TakeShape we're committed to building the best CMS tools possible for the most creative designers and developers. With our project templates, it's easy to get started. Plus, our pricing is flexible and affordable. Sign up for a free account and spend more time being creative!

Why The Best Websites Are Static

Mark Catalano — Fri, 05 Oct 2018 21:28:17 +0000

All websites are different, but three things every website needs to be are safe, fast, and cost-effective. Static websites are all three. Publishers, who have lost patience with the ongoing maintenance, outsized cost, and unreliable performance of dynamically generated websites, are now embracing the built-in benefits of going static. And as more tools and services rise to meet the needs of static websites, it’s quickly becoming the case that most—if not all—websites should be static from the start.

So just how fast, secure, and affordable are static sites? By only serving static HTML files—with most weighing in at only a few dozen kilobytes—the cost of hosting a website falls to pennies per day. When those lightweight static files are distributed on a content-delivery network (CDN), loading times evaporate. A well-designed static website on a CDN can load in a just few dozen milliseconds. Static sites, with their speedy load times, are more likely to be preferred by search engines and rise higher in the results. And when that blog post or landing page goes viral, there’s no chance that the site will go down. Best of all, static websites are secure by default because there’s no data collected, there’s no session tokens, and there’s no security holes for an attacker to breach. It’s a simple solution. It just works.

The speed, security, and affordability of static sites is a consequence of their simplicity. So perhaps the biggest reason why we’ve seen an explosion in the number of static sites is that they’re just less complicated. Together, we’ve come to realize that most sites are just better if they’re left static. Static site generators like Jekyll, Hugo, and Gatsby have made it simple to quickly create all the pages a static site needs by reducing them to a handful of design templates and content folders. Why pay to keep a rendering server running nonstop just to deliver a simple blog post that probably won’t ever change after it’s published? Why build up an entire database infrastructure behind a single product landing page?

As the popularity of static sites has grown, new tools and solutions have arisen to eliminate some of the downsides to choosing to go static, like providing a user-friendly CMS (TakeShape), handling user-generated content (Formstack), and integrating with third-party APIs (edge functions). Even better, these new tools are informed by the same values of speed, security, and simplicity. An entire new software architecture, JAMstack (Javascript, APIs, and Markup), has rapidly grown out of this static-first approach. By building beautiful web applications on the foundations of a static site, all the tools up the stack get to be simpler, faster, and more secure, as well. It’s now possible to have the best of both worlds: a simple static website and a richly-interactive web application, at the same time.

One problem to going static used to be content management: none of the existing solutions like Wordpress or Drupal work with this static-first approach. As a consequence, there’s been incredible progress reimagining what a CMS should be for this new static era. Rather than have an old, monolithic CMS managing the content, rendering the content, and serving the content, the next-generation of CMS treat their content as a service. These new headless CMS, so-called because they don’t attempt to render a dynamic website at all, instead just publish their data for static site generators to grab and use when they’re building a site. For example, TakeShape allows its users to create and edit content like posts, pages, or products—and creates a GraphQL API for it. On its own, this API could provide the content for any static site; but to make things faster and easier for developers, TakeShape has created their own static site generator that talks to the API for you. Like the static sites they feed their data to, a content-as-a-service CMS ends up being faster, safer, and cheaper than a legacy system like Wordpress, while keeping the rich web editing interface we’ve grown familiar with.

Another problem static sites have faced is receiving and handling input from users, from simple contact forms to complex checkout systems. The serverless movement has grown to solve this problem elegantly. With a more complete service like Netlify or just a one-off AWS Lambda function, input handling and server-side code is now easier to develop, cheaper to run, and more secure than ever before. It’s not surprising that the serverless and static trends have grown alongside one another—they’re a perfect match. Together, they vastly simplify the existing complexity of creating a website.

Finally, we no longer have to choose between a static site and web applications. We can have our cake and eat it, too! Progressive enhancement, a design best-practice of providing a consistent baseline experience and then building upon it with more sophisticated functionality, has totally changed how we think about delivering interactivity on the web. With the increasing sophistication of client-side Javascript frameworks like React, Vue, and Angular, it’s now possible to deliver a simple static site that progressively unfolds into a highly functional web application. Everybody can have a reliable and delightful experience, from the most data-constrained mobile devices to the fastest desktops with a hardwired Gigabit network connection. More importantly, it means that now there’s even fewer reasons for websites not to start from a lightweight, speedy static foundation.

It’s clear that bloated, unwieldy, and insecure dynamic websites are quickly becoming obsolete. Leaving those tools in the past, we should work to build a web where speed, security, and affordability are easy to achieve. It’s simpler than ever, with tools like TakeShape to publish a static site, keep it updated, and even give it the rich interactivity we’ve come to expect on the web. The future of the web is static, and it’s going to stay that way.

Interested in CMS for Static Sites?

TakeShape is a headless GraphQL CMS and static site generator. At TakeShape we're committed to building the best CMS tools possible for developers and content creators. It's easy to get started and we offer flexible pricing. Sign up for an account today. Developer projects are always free!